انتخابگرها

پادکست CSS - 002: Selectors

اگر متنی دارید که فقط اگر پاراگراف اول یک مقاله باشد می خواهید بزرگتر و قرمز باشد، چگونه این کار را انجام می دهید؟

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

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

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

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

بخش های یک قانون CSS

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

در این قانون CSS، انتخابگر .my-css-rule است که همه عناصر را با یک کلاس از my-css-rule در صفحه پیدا می کند. سه اعلان در داخل پرانتز فرفری وجود دارد. اعلان یک جفت ویژگی و مقدار است که سبک‌ها را برای عناصری که توسط انتخابگرها مطابقت دارند اعمال می‌کند. یک قانون CSS می تواند به تعداد دلخواه اعلان و انتخابگر داشته باشد.

انتخابگرهای ساده

ساده ترین گروه انتخابگرها عناصر HTML به اضافه کلاس ها، شناسه ها و سایر ویژگی هایی را که ممکن است به یک تگ HTML اضافه شوند، هدف قرار می دهند.

انتخابگر جهانی

یک انتخابگر جهانی - که به عنوان علامت عام نیز شناخته می شود - با هر عنصری مطابقت دارد.

* {
  color: hotpink;
}

این قانون باعث می شود که هر عنصر HTML در صفحه دارای متن hotpink باشد.

انتخابگر تایپ

انتخابگر نوع به طور مستقیم با یک عنصر HTML مطابقت دارد.

section {
  padding: 2em;
}

این قانون باعث می شود که هر عنصر <section> دارای 2em padding در هر طرف باشد.

انتخابگر کلاس

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

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

هر عنصری که کلاس روی آن اعمال شود قرمز رنگ می شود:

.my-class {
  color: red;
}

توجه کنید که چگونه . فقط در CSS وجود دارد و نه در HTML. این به این دلیل است که . کاراکتر به زبان CSS دستور می دهد تا اعضای ویژگی کلاس را مطابقت دهد. این یک الگوی رایج در CSS است که در آن از یک کاراکتر خاص یا مجموعه ای از کاراکترها برای تعریف انواع انتخابگر استفاده می شود.

یک عنصر HTML که دارای کلاس .my-class است، همچنان با قانون CSS بالا مطابقت دارد، حتی اگر چندین کلاس دیگر مانند این داشته باشد:

<div class="my-class another-class some-other-class"></div>

این به این دلیل است که CSS به‌جای تطبیق دقیق آن کلاس، به دنبال ویژگی class می‌گردد که شامل کلاس تعریف‌شده باشد.

انتخابگر شناسه

یک عنصر HTML با ویژگی id باید تنها عنصر در صفحه با آن مقدار ID باشد. شما عناصر را با انتخابگر ID مانند این انتخاب می کنید:

#rad {
  border: 1px solid blue;
}

این CSS یک حاشیه آبی به عنصر HTML که دارای id rad است اعمال می کند، مانند این:

<div id="rad"></div>

به طور مشابه انتخابگر کلاس . ، از یک کاراکتر # استفاده کنید تا به CSS دستور دهید عنصری را جستجو کند که با id که به دنبال آن است مطابقت داشته باشد.

انتخابگر صفت

می توانید با استفاده از انتخابگر ویژگی به دنبال عناصری بگردید که دارای یک ویژگی HTML خاص یا مقدار مشخصی برای یک ویژگی HTML هستند. به CSS دستور دهید تا با قرار دادن انتخابگر با براکت های مربع ( [ ] به دنبال ویژگی ها بگردد.

[data-type='primary'] {
  color: red;
}

این CSS به دنبال تمام عناصری است که دارای یک ویژگی از data-type با مقدار primary هستند، مانند این:

<div data-type="primary"></div>

به جای جستجوی یک مقدار خاص از data-type ، می‌توانید بدون در نظر گرفتن مقدار آن، به دنبال عناصری با ویژگی موجود نیز بگردید.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

هر دوی این عناصر <div> دارای متن قرمز خواهند بود.

می توانید با افزودن عملگر s به انتخابگر ویژگی خود از انتخابگرهای ویژگی حساس به حروف بزرگ و کوچک استفاده کنید.

[data-type='primary' s] {
  color: red;
}

این به این معنی است که اگر یک عنصر HTML به جای Primary یک data-type از primary داشته باشد، متن قرمز دریافت نمی کند. با استفاده از یک عملگر i می توانید برعکس - عدم حساسیت به حروف کوچک و بزرگ - را انجام دهید.

همراه با عملگرهای case، شما به عملگرهایی دسترسی دارید که بخش هایی از رشته ها را در مقادیر ویژگی مطابقت می دهند.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

انتخابگرهای گروه بندی

یک انتخابگر نباید تنها با یک عنصر منطبق باشد. می توانید چند انتخابگر را با جدا کردن آنها با کاما گروه بندی کنید:

strong,
em,
.my-class,
[lang] {
  color: red;
}

این مثال تغییر رنگ را به عناصر <strong> و <em> گسترش می دهد. همچنین به کلاسی به نام .my-class و عنصری که دارای ویژگی lang است نیز گسترش یافته است.

درک خود را بررسی کنید

دانش خود را از انتخابگرهای ساده تست کنید

* {}

div {}

شبه طبقات و شبه عناصر

CSS انواع انتخابگر مفیدی را ارائه می‌کند که بر روی حالت پلتفرم خاص تمرکز می‌کنند، مانند زمانی که یک عنصر شناور می‌شود، ساختارهای داخل یک عنصر یا بخش‌هایی از یک عنصر.

شبه طبقات

عناصر HTML خود را در حالت های مختلفی می یابند، یا به این دلیل که با آنها تعامل دارند یا یکی از عناصر فرزند آنها در وضعیت خاصی است.

به عنوان مثال، یک عنصر HTML را می توان با اشاره گر ماوس توسط یک کاربر یا یک عنصر فرزند نیز می تواند توسط کاربر شناور شود. برای آن مواقع، از کلاس :hover شبه استفاده کنید.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

در ماژول شبه کلاس‌ها بیشتر بیاموزید.

شبه عنصر

شبه عناصر با شبه کلاس ها تفاوت دارند زیرا به جای پاسخ به حالت پلتفرم، طوری عمل می کنند که گویی در حال وارد کردن یک عنصر جدید با CSS هستند. شبه عناصر نیز از نظر نحوی با شبه کلاس ها متفاوت هستند، زیرا به جای استفاده از دو نقطه ( : ) از دو نقطه ( :: ) استفاده می کنیم.

.my-element::before {
  content: 'Prefix - ';
}

همانطور که در نسخه ی نمایشی بالا که در آن برچسب پیوند را با نوع فایل آن پیشوند قرار دادید، می توانید از عنصر ::before شبه عنصر برای درج محتوا در ابتدای یک عنصر یا ::after شبه عنصر برای درج محتوا استفاده کنید. در انتهای یک عنصر .

با این حال، عناصر شبه به درج محتوا محدود نمی شوند. همچنین می توانید از آنها برای هدف قرار دادن بخش های خاصی از یک عنصر استفاده کنید. برای مثال، فرض کنید یک لیست دارید. ::marker برای استایل دادن به هر نقطه (یا عدد) در لیست استفاده کنید

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

همچنین می توانید از ::selection برای استایل دادن به محتوایی که توسط کاربر برجسته شده است استفاده کنید.

::selection {
  background: black;
  color: white;
}

در ماژول شبه عناصر بیشتر بیاموزید.

درک خود را بررسی کنید

دانش خود را در مورد انتخابگرهای شبه آزمایش کنید

p:hover {
  background: white;
  color: black;
}

انتخابگرهای پیچیده

شما قبلاً مجموعه گسترده ای از انتخابگرها را دیده اید، اما گاهی اوقات، به کنترل دقیق تری با CSS خود نیاز خواهید داشت. اینجاست که انتخاب کنندگان پیچیده وارد عمل می شوند تا کمک کنند.

در این مرحله شایان ذکر است که اگرچه انتخابگرهای زیر به ما قدرت بیشتری می‌دهند، ما فقط می‌توانیم با انتخاب عناصر فرزند، به سمت پایین حرکت کنیم . ما نمی توانیم به سمت بالا هدف گذاری کنیم و یک عنصر والد را انتخاب کنیم. ما در درس بعدی توضیح می دهیم که آبشار چیست و چگونه کار می کند.

ترکیب کننده ها

کامبیناتور چیزی است که بین دو انتخابگر قرار می گیرد. برای مثال، اگر انتخابگر p > strong بود، ترکیب‌کننده کاراکتر > است. انتخابگرهایی که از این ترکیب‌کننده‌ها استفاده می‌کنند به شما کمک می‌کنند موارد را بر اساس موقعیت آنها در سند انتخاب کنید.

ترکیب زاده

برای درک ترکیب‌کننده‌های نسل، ابتدا باید عناصر والد و فرزند را درک کنید.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

عنصر والد <p> است که حاوی متن است. داخل آن عنصر <p> یک عنصر <strong> است که محتوای آن را پررنگ می کند. از آنجا که در داخل <p> است، یک عنصر فرزند است.

یک ترکیب کننده نسل به ما امکان می دهد یک عنصر فرزند را هدف قرار دهیم. این از یک فاصله ( ) برای دستور دادن به مرورگر برای جستجوی عناصر فرزند:

p strong {
  color: blue;
}

این قطعه تمام عناصر <strong> را که فقط عناصر فرزند عناصر <p> هستند، انتخاب می‌کند و آنها را به صورت بازگشتی آبی می‌کند.

این افکت در مثال بالا با استفاده از انتخابگر ترکیب‌کننده، .top div بهتر دیده می‌شود. آن قانون CSS به آن عناصر <div> بالشتک چپ اضافه می کند. از آنجایی که ترکیب‌کننده بازگشتی است، همه عناصر <div> که در .top هستند دارای همان padding خواهند بود.

به پنل HTML در این نسخه نمایشی نگاهی بیندازید تا ببینید که چگونه عنصر .top دارای چندین عنصر فرزند <div> است که خود دارای عناصر فرزند <div> هستند.

ترکیب کننده خواهر و برادر بعدی

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

برای افزودن فاصله بین عناصر پشته‌ای، از ترکیب‌کننده خواهر و برادر بعدی استفاده کنید تا فقط در صورتی که یک عنصر برادر بعدی یک عنصر فرزند .top باشد، فضا را اضافه کنید.

می‌توانید با استفاده از انتخابگر زیر، حاشیه به همه عناصر فرزند .top اضافه کنید:

.top * {
  margin-top: 1em;
}

مشکل این است که چون شما هر عنصر فرزند .top را انتخاب می کنید، این قانون به طور بالقوه فضای اضافی و غیر ضروری ایجاد می کند. ترکیب‌کننده خواهر و برادر بعدی ، که با یک انتخابگر جهانی ترکیب شده است، شما را قادر می‌سازد نه تنها کنترل کنید چه عناصری فضا دریافت می‌کنند، بلکه فضا را به هر عنصری نیز اعمال کنید. این به شما انعطاف پذیری طولانی مدتی را ارائه می دهد، صرف نظر از اینکه چه عناصر HTML در .top ظاهر می شوند.

متعاقب- برادر و برادر ترکیبی

ترکیب‌کننده بعدی بسیار شبیه به انتخابگر خواهر و برادر بعدی است. اما به جای کاراکتر + از کاراکتر ~ استفاده کنید. تفاوت این موضوع این است که یک عنصر فقط باید عنصر دیگری را با همان والد دنبال کند، نه اینکه عنصر بعدی با همان والد باشد.

این ترکیب‌کننده بعدی استحکام کمتری را ارائه می‌کند، که در زمینه‌هایی مانند نمونه بالا مفید است، جایی که ما رنگ یک سوئیچ سفارشی را زمانی که چک باکس مربوط به آن حالت :checked را داشته باشد، تغییر می‌دهیم.

ترکیب کننده کودک

یک ترکیب‌کننده فرزند (همچنین به‌عنوان نسل مستقیم شناخته می‌شود) به شما امکان کنترل بیشتر بر بازگشتی را می‌دهد که با انتخابگرهای ترکیب‌کننده ارائه می‌شود. با استفاده از کاراکتر > ، انتخابگر ترکیب‌کننده را محدود می‌کنید تا فقط برای کودکان مستقیم اعمال شود.

نمونه انتخابگر خواهر و برادر قبلی و بعدی را در نظر بگیرید. فضا به هر خواهر و برادر بعدی اضافه می شود، اما اگر یکی از آن عناصر در کودکی دارای عناصر خواهر و برادر بعدی نیز باشد، می تواند منجر به ایجاد فاصله نامطلوب و اضافی شود.

برای کاهش این مشکل، انتخابگر خواهر و برادر بعدی را تغییر دهید تا ترکیب‌کننده فرزند را در خود جای دهد: > * + * . این قانون اکنون فقط برای فرزندان مستقیم .top اعمال می شود.

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

می توانید انتخابگرها را برای افزایش ویژگی و خوانایی ترکیب کنید. به عنوان مثال، برای هدف قرار دادن عناصر <a> ، که دارای یک کلاس از .my-class هستند، موارد زیر را بنویسید:

a.my-class {
  color: red;
}

این یک رنگ قرمز را برای همه پیوندها اعمال نمی کند و همچنین فقط اگر روی عنصر <a> باشد، رنگ قرمز را برای .my-class اعمال می کند. برای اطلاعات بیشتر در این مورد، ماژول ویژگی را ببینید.

درک خود را بررسی کنید

دانش خود را در مورد انتخابگرهای پیچیده آزمایش کنید

section.awesome {
  border: 1px solid hotpink;
}

منابع

• مرجع انتخابگرهای CSS
• بازی انتخابگرهای تعاملی
• مرجع شبه کلاس و شبه عناصر
• ابزاری که انتخابگرهای CSS را به توضیح‌دهنده‌های انگلیسی ساده ترجمه می‌کند