انتخابگرهای CSS (CSS Selectorها)

اگر بخواهیم به تگ های HTML استایل دهی کنیم بی شک به انتخابگرهای CSS نیاز خواهیم داشت. این انتخابگرها به مرورگرها می گویند که کدام کدهای CSS به کدام تگ های HTML اعمال شوند. درواقع این انتخابگرها نوعی آدرسی دهی می باشند.

این انتخابگرها عناصر HTML را با توجه به شناسه، کلاس، نوع، ویژگی و غیره انتخاب می کنند. در زیر به معرفی برخی از مهمترین انتخابگرهای CSS می پردازیم.

انواع انتخابگرهای CSS

  • Grouping Selector
  • ID selector
  • Class Selector (Dot Symbol)
  • Child Combinator
  • Star Symbol
  • General Sibling Combinator
  • Adjacent Sibling Combinator
  • Attribute Selector

بعد از معرفی این انتخابگرها به همراه مثال کاربردی، به ترکیب این انتخابگرهای با هم می پردازیم.

Grouping Selector

انتخابگر گروه بندی برای انتخاب همه عناصر با تعاریف یکسان استفاده می شود. برای مثال در زیر تمامی تگهای p از تگهای HTML موجود در صفحه دارای نوشته های قرمز خواهند بود.

p {
    color: red;
} 

<p>This is a Paragraph.</p>

This is a Paragraph.

بنابه این مثال در واقع اکثر انتخابگرهای CSS را می توان نوعی از این مورد دانست زیرا استایلهای CSS چون به صورت inline نوشته نمی شوند پس می توانند به تعداد زیادی از تگ های و المنت های HTML اعمال شوند. در ادامه بیشتر متوجه این موضوع خواهید شد.

ID selector

به تمامی المنت ها و تگهای HTML می توان صفت (attribute) id را اضافه کنیم. فقط در نظر داشته باشید که در یک صفحه HTML فقط یک id با نام مشخص می توان قرار داد به عبارت دیگر هر id در صفحه HTML منحصربفرد است.

این انتخابگر تگی که id آن مشخص شده است را در صفحه یافته و کدهای CSS را به آن اعمال می کند.

#paragraph {
    border: 1px solid black;
}

<p id="paragraph">This is a Paragraph.</p>

This is a Paragraph.

در این مثال به تگ p صفت id با نام paragraph اضافه شده است و از طریق CSS به مرورگر اعلام میشود که استایل CSS که شامل تعریف حاشه می باشد به تگی که id آن paragraph است اعمال شود.

چون این انتخابگر بر روی id اعمال می شود پس نمی توان آن را بصورت گروهی اعمال نمود.

Class Selector (Dot Symbol)

صفت کلاسها مانند id می باشند با این تفاوت که یک کلاس خاص را می توان به چندین المنت یا تگ HTML اعمال نمود. برای درک فرق بین id و کلاس می توانید به مقاله id و class مراجعه نمایید.

.menu{
    background-color: #ccc;
}

Or

div.menu{
    background-color: #ccc;
}

<div class="menu">
    <a href="https://honarsystems.com/">Home</a>
</div>

در مثال بالا کلاسی با نام menu تعریف شده است که شامل پس زمینه رنگ #ccc می باشد. هر المنت و یا تگ HTML ای که دارای کلاس با نام menu باشد این استایل به آن اعمال خواهد شد. تعداد این المنت ها برخلاف id می تواند بینهایت باشد.

در این مثال حتی گفته شده است که این استایل فقط به تگهای div که کلاس با نام menu دارند اعمال شود. اگر از div.menu استفاده کنید و صفحه شامل تگ p با نام کلاس menu داشته باشد، این استایل CSS به p اعمال نخواهد شد.

این انتخابگر را می توان انتخابگر گروهی نیز نامید چون به تعداد زیادی از المنت ها تاثیر می گذارد.

Child Combinator

این انتخابگر از انتخابگرهای CSS، فقط فرزندان مستقم را انتخاب می کند. برای مثال در X>Y المنتهای Y که به طور مستقیم فرزندان X هستند انتخاب خواهد شد.

.menu > a{
    background-color: #ccc;
}

<div class="menu">
    <a href="https://honarsystems.com/">Home</a>
</div>

در این مثال فقط تگهای a که مستقیما فرزند کلاس menu هستند انتخاب خواهند شد. ممکن است در داخل کلاس menu تگ p وجود داشته باشد و در داخل آن تگ p هم تگ a وجود داشته باشد، بنابراین آن تگ a انتخاب نخواهد شد چون فرزند مستقیم کلاس menu نمی باشد.

Star Symbol

انتخابگر universal CSS (*)  شامل تمام عناصر از هر نوع می باشد. نماد ستاره تمام عناصر موجود در زیر مجموعه المنت انتخاب شده را هدف قرار می دهد. بسیاری از توسعه دهندگان از این ترفند برای حذف حاشیه ها و padding استفاده می کنند.

* {
    background-color: #ccc;
}

برای مثال در مثال بالا تمامی پس زمینه های المنتهای موجود در صفحه به رنگ #ccc خواهد بود.

گاهی نیاز هست که به فرزندان المنت خاص یک استایل مشابه اضافه شود که از این روش برای استایل دهی استفاده می کنیم.

.menu * {
    background-color: #ccc;
}

پس زمینه تمامی فرزندان کلاس menu به رنگ #ccc خواهد بود.

General Sibling Combinator

اگر بخواهیم هم ردیف های یک المنت را انتخاب کنیم از این انتخابگر استفاده می کنیم. این انتخابگر تمامی هم ردیف های کنار المنت را انتخاب کرده و استایلهای تعریف شده را به آنها اعمال می کند.

.card div ~ p {
    background: #cccccc;
}

<div class="card" >
    <div>Test</div>
    <p>This is Test.</p>
    <p>This is Test.</p>
</div>
Test

This is Test.

This is Test.

در این مثال تمام تگهای p که هم ردیف تگ div در کلاس card هستند انتخاب می شوند.

Adjacent Sibling Combinator

این انتخابگر مانند General Sibling است با این تفاوت که فقط المنتهای هم ردیف و مجاور خود را انتخاب می کند. یعنی المنت هایی که درست کنار آن قرار دارند و بقیه انتخاب نمی شوند.

.example h2 + p {
    color: gray;
}

<div class="example">
    <p>This is Test.</p>
    <h2>Test</h2>
    <p>This is Test.</p>
    <p>This is Test.</p>
</div>

This is Test.

Test

This is Test.

This is Test.

در این مثال فقط تگ p اول بعد از تگ h2 انتخاب می شود و بقیه تگ های p توسط انتخابگر CSS انتخاب نمی شوند

Attribute Selectors

[attribute] selector برای انتخاب عناصر با ویژگی مشخص استفاده می شود.

.menu a[target="_blank"] {
    background: #cccccc;
}

<div class="menu">
    <a href="https://honarsystems.com/" target="_blank">Home</a>
</div>

در این مثال آن تگ های a از کلاس menu انتخاب می شوند که دارای صفت target که مقدار آنها _blank می باشد انتخاب می شوند.

در این مثال _blank همیشه ثابت است اما گاهی ممکن است بخواهیم المنتی را انتخاب کنیم که بخشی از نام صفت آن ثابت است ولی بخش دیگر برای هر المنت متغیر است. برای مثال:

.card p[class*="paragraph-"] {
    background: #cccccc;
}

<div class="card">
    <div>Test</div>
    <p class="paragraph-1">This is Test.</p>
    <p class="paragraph-2">This is Test.</p>
    <p class="paragraph-3">This is Test.</p>
</div>

در این مثال نام کلاس تگهای p متغیر هستند اما قسمت paragraph- آنها ثابت است. با استفاده از انتخابگرهای صفت در CSS می توان به راحتی مانند بالا این نوع المنت ها را نیز انتخاب کرد.

ترکیب انتخابگر های CSS

در ادامه به ترکیب انتخابگرهای گفته شده در بالا خواهیم پرداخت.

ترکیب > و *

حال برای مثال می خواهیم تمامی فرزندان اول کلاس menu پس زمینه رنگ #ccc داشته باشند. برای این کار می توان از مثال زیر استفاده کرد.

.menu > * { 
    background-color: #ccc; 
}

در این مثال پس زمینه تمام فرزندان مستقیم کلاس menu به رنگ #ccc خواهند بود.

مطالب مرتبط