انتخابگرهای CSS الگوهایی هستند که برای انتخاب و استایل عناصر HTML در یک صفحه وب استفاده می‌شوند. این انتخابگرها به شما اجازه می‌دهند تا عناصر خاص یا گروه‌هایی از عناصر را هدف قرار دهید تا استایل‌هایی مانند رنگ‌ها، فونت‌ها، حاشیه‌ها و موارد دیگر را بر روی آن‌ها اعمال کنید. انتخابگرهای CSS بخشی اساسی از سی اس اس (CSS) هستند، که یک زبان استفاده شده برای کنترل ارائه و طرح بندی اسناد وب است.
عنصر یا عناصری که توسط انتخابگر انتخاب می‌شوند به عنوان موضوع انتخابگر (subject of the selector) معروف هستند.
لیست انتخابگرها
اگر CSS یکسان توسط بیش از یک انتخابگر استفاده شود، این انتخابگرها می‌توانند با هم ترکیب شوند تا یک لیست انتخابگری بسازند. بنابراین قانون CSS به تمامی انتخابگرهای فرد اعمال می‌شود.
به عنوان مثال، اگر همان CSS رنگ: قرمز برای عنصر p و کلاس .sample استفاده شود، به این صورت نوشته می‌شود:
p {
color: crimson;
}
.sample {
color: crimson;
}
اما، می‌توانیم این دو قانون را با یکدیگر به صورت یک لیست انتخابگری ترکیب کنیم، با اضافه کردن یک کاما برای جدا کردن آن‌ها به شکل زیر:
p, .sample {
color: crimson;
}
نویسه‌های زیر قانون نامعتبر تلقی می‌شود، زیرا یکی از انتخابگرها نامعتبر است (. .example- روش نادرست تعریف یک کلاس است).
p {
color: crimson;
}
..sample {
color: crimson;
}
p, ..sample {
color: crimson;
}
یک فضای سفید قبل یا بعد از کاما در یک اعلان لیست انتخابگری قابل قبول است.
اگر هر یک از انتخابگرها در لیست انتخابگری نامعتبر باشد، تمام قانون نادیده گرفته می‌شود و نامعتبر تلقی می‌شود.
توصیه می‌شود که هر انتخابگر را در یک خط جدید تعریف کنید، زیرا این امر باعث می‌شود کد CSS خواناتر باشد.
انتخاب‌کننده کلاس (Class Selector)
انتخابگر کلاس در CSS به عناصری اشاره می‌دهد که دارای یک مقدار خاص برای ویژگی کلاس خود هستند.
.style-h1 {
text-decoration-line: underline;
}
.style-p {
color: green;
font-size: 25px;
}
در مثال بالا، دو انتخابگر کلاس تعریف شده‌اند. .style-h1 برای عناصری استفاده می‌شود که دارای کلاس “style-h1” هستند و .style-p برای عناصری استفاده می‌شود که دارای کلاس “style-p” هستند. برای این عناصر، استایل‌های مشخصی مانند زیر تعریف شده‌اند:
- برای عناصر با کلاس “style-h1″، خط زیر را به عنوان استایل تعریف شده است:
text-decoration-line: underline;. - برای عناصر با کلاس “style-p”، استایل‌های زیر تعریف شده‌اند:
color: green;: تعیین رنگ متن به سبز.font-size: 25px;: تعیین اندازه فونت به 25 پیکسل.
حالت استفاده از این انتخابگرها در یک سند HTML نمایش داده شده است:
<html>
<head>
<style>
.style-div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
.style-p {
color: green;
font-size: 25px;
}
.style-h1 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<div class="style-div">
<h1 class="style-h1">class selector</h1>
<p class="style-p">class .style-p applied</p>
<p>No class applied on this p element</p>
</div>
</body>
</html>
در این مثال، برای سه عنصر مختلف، عناصری با استفاده از کلاس‌های تعریف شده استفاده شده است. عناصر با کلاس “style-div”، “style-h1” و “style-p” با استفاده از انتخابگرهای کلاس مربوطه در سند HTML استفاده شده‌اند و به آن‌ها استایل‌های مختلف اعمال شده است.
انتخاب‌کننده شناسه (ID Selector)
انتخابگر شناسه در CSS به عناصری اشاره می‌دهد که دارای یک مقدار خاص برای ویژگی شناسه (id) خود هستند.
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
text-decoration-line: underline;
color: red;
}
در مثال بالا، دو انتخابگر شناسه تعریف شده‌اند. #style-p برای عناصری استفاده می‌شود که دارای شناسه “style-p” هستند و #style-h1 برای عناصری استفاده می‌شود که دارای شناسه “style-h1” هستند. برای این عناصر، استایل‌های مشخصی مانند زیر تعریف شده‌اند:
- برای عناصر با شناسه “style-p”، استایل‌های زیر تعریف شده‌اند:
color: green;: تعیین رنگ متن به سبز.font-size: 25px;: تعیین اندازه فونت به 25 پیکسل.
- برای عناصر با شناسه “style-h1″، استایل‌های زیر تعریف شده‌اند:
text-decoration-line: underline;: زیرخط گذاری متن.color: red;: تعیین رنگ متن به قرمز.
حالت استفاده از این انتخابگرها در یک سند HTML نمایش داده شده است:
<html>
<head>
<style>
#style-div {
border: 5px inset purple;
width: 300px;
text-align: center;
background-color: lightgoldenrodyellow;
}
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
text-decoration-line: underline;
color: red;
}
</style>
</head>
<body>
<div id="style-div">
<h1 id="style-h1">ID selector</h1>
<p id="style-p">id #style-p applied</p>
<p>No id applied on this p element</p>
</div>
</body>
</html>
در این مثال، سه عنصر مختلف با استفاده از شناسه‌های تعریف شده استفاده شده است. عناصر با شناسه “style-div”، “style-h1” و “style-p” با استفاده از انتخابگرهای شناسه مربوطه در سند HTML استفاده شده‌اند و به آن‌ها استایل‌های مختلف اعمال شده است.
انتخاب‌کننده ویژگی (Attribute Selector)
انتخابگر ویژگی در CSS به عناصری اشاره می‌دهد که بر اساس یک ویژگی خاص یا مقادیر ویژگی در عنصر تعریف شده‌اند.
a[target] {
background-color: peachpuff;
}
در مثال بالا، یک انتخابگر ویژگی تعریف شده است که به عناصر <a> اشاره می‌دهد که دارای ویژگی “target” هستند. برای این عناصر، یک استایل با رنگ پیچ‌پوستی (peachpuff) تعریف شده است.
همچنین، می‌توانید عنصر را با یک مقدار خاص برای ویژگی مشخص کنید.
a[href="https://www.underdevelops.com"] {
background-color: peachpuff;
}
در این مثال، یک انتخابگر ویژگی تعریف شده است که به عناصر <a> اشاره می‌دهد که دارای ویژگی “href” با مقدار “https://www.underdevelops.com” هستند. برای این عناصر، یک استایل با رنگ پیچ‌پوستی (peachpuff) تعریف شده است.
حالت استفاده از این انتخابگرها در یک سند HTML نمایش داده شده است:
<html>
<head>
<style>
a[target] {
background-color: peachpuff;
color: blueviolet;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Attribute selector</h2>
<p>Styling applied to anchor element with target attribute:</p>
<a href="#">Tutorialspoint</a>
<a href="#" target="_blank">google</a>
<a href="#" target="_self">wikipedia</a>
</body>
</html>
در این مثال، عناصر <a> با ویژگی “target” ویژگی‌های مختلفی از جمله رنگ متن، رنگ پس‌زمینه و اندازه فونت دارند.
انتخاب‌کننده سوئدو-کلاس (Pseudo-class Selector)
انتخابگر شبه کلاس در CSS برای استایل دادن به یک وضعیت خاص از یک عنصر استفاده می‌شود، مانند :hover که برای استایل دادن به یک عنصر هنگامی که به آن نشانگر موس می‌بریم (hover) استفاده می‌شود.
a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
در مثال بالا، یک انتخابگر شبه کلاس تعریف شده است که به عناصر <a> اشاره می‌دهد و وقتی که به آن‌ها موس می‌بریم، استایل‌های مختلفی برای آن‌ها تعریف شده است. برای این عناصر، استایل‌های زیر تعریف شده‌اند:
background-color: peachpuff;: تعیین رنگ پس‌زمینه به رنگ پیچ‌پوستی (peachpuff).color: green;: تعیین رنگ متن به سبز.font-size: 2em;: تعیین اندازه فونت به 2 برابر اندازه معمول.
حالت استفاده از این انتخابگرها در یک سند HTML نمایش داده شده است:
<html>
<head>
<style>
a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>Styling applied to anchor element with a pseudo-class:</p>
<a href="#">Tutorialspoint</a>
</body>
</html>
در این مثال، عنصر <a> با استفاده از انتخابگر شبه کلاس :hover استایل‌های مختلفی در وضعیت hover دارد.
انتخاب‌کننده سوئدو-عنصر (Pseudo-element Selector)
انتخابگر شبه عنصر در CSS برای استایل دادن به یک بخش خاص از یک عنصر به جای خود عنصر استفاده می‌شود.
a::before {
content: url('images/smiley.png');
}
در مثال بالا، یک انتخابگر شبه عنصر تعریف شده است که به عناصر <a> اشاره می‌دهد و محتوای قبل از محتوای اصلی این عنصر را استایل می‌دهد. با استفاده از ویژگی content، یک تصویر با استفاده از تابع url() به عنوان محتوا قبل از محتوای عنصر <a> تعیین شده است.
حالت استفاده از این انتخابگر در یک سند HTML نمایش داده شده است:
<html>
<head>
<style>
a::before {
content: url('images/smiley.png');
}
a::after {
content: " Pseudo-element ::after applied";
color: red;
background-color: chartreuse;
}
</style>
</head>
<body>
<h2>Pseudo-element selector</h2>
<p>Styling applied to anchor element with a pseudo-element:</p>
<a href="#">Tutorialspoint</a>
</body>
</html>
در این مثال، برای عنصر <a> با استفاده از انتخابگرهای شبه عنصر ::before و ::after استایل‌های مختلفی تعریف شده‌اند. انتخابگر ::before تصویر “smiley.png” را به عنوان محتوا قبل از محتوای عنصر <a> قرار می‌دهد، در حالی که انتخابگر ::after متن “Pseudo-element ::after applied” را به عنوان محتوا بعد از محتوای عنصر <a> قرار می‌دهد و استایل‌های متن و پس‌زمینه آن را تعیین می‌کند.
ترکیب‌کننده‌ها (Combinators)
Combinators در CSS نشان دهنده رابطه بین انتخابگرها هستند. دو یا چند انتخابگر ساده می‌توانند با استفاده از یک combinator ترکیب شوند تا یک انتخابگر تشکیل دهند.
در مثال زیر، دو نوع combinator مورد استفاده قرار گرفته است: descendant selector (فاصله) و child combinator (>).
<html>
<head>
<style>
/* استایلی که فقط به div اعمال می‌شود */
div {
border: 2px solid black;
width: 300px;
}
/* استایلی که به تمام عناصر li که مستقیما زیر ul قرار دارند اعمال می‌شود */
ul li {
background-color: lightpink;
color: purple;
font-size: 1.5em;
padding: 5px;
margin-right: 15px;
}
/* استایلی که به تمام عناصر li که زیر مستقیم ol قرار دارند اعمال می‌شود */
ol > li {
background-color: bisque;
color: black;
font-size: 0.75em;
padding: 5px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Item One</li>
<li>Item Two
<ol>
<li>Nested 1</li>
<li>Nested 2</li>
</ol></li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five
<ol>
<li>Nested 3</li>
<li>Nested 4</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
در این مثال، دو div داریم، که یکی از آن‌ها حاوی یک لیست نشانه‌گذاری شده با عناصر ul و li است. در اینجا استایل‌های مختلفی با استفاده از Combinators به این عناصر اعمال شده است:
- استایل‌هایی که به تمام عناصر li که مستقیماً زیر ul قرار دارند اعمال می‌شود. اینها شامل
background-color: lightpink;,color: purple;,font-size: 1.5em;,padding: 5px;وmargin-right: 15px;می‌شوند. - استایل‌هایی که به تمام عناصر li که مستقیماً زیر ol قرار دارند اعمال می‌شود. اینها شامل
background-color: bisque;,color: black;,font-size: 0.75em;وpadding: 5px;می‌شوند.
این نمونه‌ها نشان می‌دهند که Combinators چگونه می‌توانند استفاده شوند تا استایل‌ها را بر اساس رابطه‌های سلسله مراتبی میان عناصر اعمال کنند.
انتخاب‌کننده گسترده (Universal Selector)
انتخابگر یونیورسال (Universal Selector)، با علامت ستاره (*) نشان داده می‌شود و یک انتخابگر ویژه است که با هر عنصری در سند HTML مطابقت دارد.
/* Selects and styles all elements on the page */
* {
margin: 0;
padding: 0;
}
بر اساس نحوه استفاده از این انتخابگر در مثال بالا، انتخابگر یونیورسال برای اعمال حاشیه و فاصله‌گذاری صفر به تمام عناصر HTML استفاده شده است.
در مثال زیر، استفاده از انتخابگر یونیورسال (*) نشان داده شده است:
<html>
<head>
<style>
* {
background-color: peachpuff;
color: darkgreen;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Universal selector (*)</h1>
<div>Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p>
</div>
<p>Paragraph 3</p>
</body>
</html>
در این مثال، تمام عناصر HTML در صفحه با استفاده از انتخابگر یونیورسال (*) سبک‌سازی شده‌اند. آن‌ها همه پس‌زمینه رنگ پیچ‌پوستی (peachpuff)، متن با رنگ سبز تیره (darkgreen) و اندازه فونت 25 پیکسل دارند.
انتخاب‌کننده تو در تو (& nesting selector)
انتخابگر & در CSS به ما امکان می‌دهد تا یک قانون استایل را داخل قانون دیگری، با انتخابگر فرزند نسبت به انتخابگر والدین، قرار دهیم.
این انتخابگر، رابطه بین قوانین والدین و فرزندان را نشان می‌دهد.
- وقتی که انتخابگرهای تو در تو توسط مرورگر تجزیه و تحلیل می‌شوند، خودکار یک فاصله خالی بین انتخابگرها اضافه می‌شود، که به این ترتیب یک قانون انتخابگر CSS جدید ایجاد می‌شود.
- در مواقعی که قانون داخلی باید به قانون والدین (بدون هیچ فاصله‌ای) متصل شود، مانند استفاده از شبه کلاس یا انتخابگرهای ترکیبی، انتخابگر & باید بلافاصله قبل از آن پیشوند شود تا نتیجه مطلوب حاصل شود.
- برای برعکس کردن زمینه قوانین، می‌توان انتخابگر & را پسوند داد.
- می‌توان چندین نمونه از انتخابگر & را داشت.
در مثال زیر، استفاده از انتخابگر & نشان داده شده است:
<html>
<head>
<style>
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
& a {
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
}
</style>
</head>
<body>
<h1>& nesting selector</h1>
<p id="sample">
Hover <a href="#">over the link</a>.
</p>
</body>
</html>
در این مثال، قوانین CSS داخل قوانین CSS دیگر (نسبت به والدین) جای داده شده‌اند. برای عناصر <a> داخل عنصری با id مشخص “sample”، از رنگ کریمسون برای متن استفاده شده و وقتی موس را روی آن‌ها می‌بریم یا بر روی آن‌ها فوکوس می‌شود، رنگ متن به سبز و رنگ پس‌زمینه به زرد تغییر می‌یابد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام