انتخابگرهای شبه‌کلاس

مقدمه

گروه بعدی انتخابگرهای CSS که در این درس قصد بررسی آنها را داریم، شبه‌انتخابگرها (pseudo-selectors) هستند. شبه‌انتخابگرهای CSS کلمات کلیدی هستند که در قالب دو گروه شبه‌عنصرها (pseudo-elements) و شبه‌کلاس‌ها (pseudo-classes) در دسترس ما قرار دارند. در این درس، در مورد شبه‌کلاس‌ها و در درس بعدی در مورد شبه‌عنصرها صحبت می‌کنیم. تعداد شبه‌کلاس‌های CSS خیلی زیاد است و از این‌رو این درس نسبت به سایر دروس مربوط به انتخابگرها، طولانی‌تر است. اما بعد از اینکه روش کلی استفاده از شبه‌انتخابگرها را یاد بگیرید، می‌توانید از این درس به عنوان یک مرجع (reference) برای پیدا کردن شبه‌انتخابگری که کار مورد نظرتان را انجام می‌دهد، استفاده کنید.

انواع انتخابگرهای شبه‌کلاس

یک شبه‌کلاس (pseudo-class) انتخابگری است که امکان انتخاب و استایل‌دهی را بر اساس وضعیت عناصر، فراهم می‌کند و دارای فرم کلی زیر است:

برای نمونه، با استفاده از شبه‌کلاسی به نام :hover می‌توانیم ترتیبی دهیم که وقتی یک عنصر در وضعیت hover قرار می‌گیرد (یعنی کاربر نشانگر ماوس را روی آن عنصر می‌برد)، استایل‌های تعریف‌شده را دریافت کند. به عنوان یک مثال دیگر، می‌توانیم به شبه‌کلاسی با نام :first-child اشاره کنیم که عناصری را انتخاب می‌کند که اولین فرزند والد خود هستند و یا در وضعیت first-child قرار دارند. به طور کلی، یک شبه‌کلاس مانند :x عنصر یا عناصری را انتخاب می‌کند که در وضعیت x قرار دارند.

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

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

فرض کنید قصد داریم تیم‌های بالانشین سه لیگ معتبر فوتبال دنیا یعنی لیگ برتر انگلستان، سری A ایتالیا و لالیگای اسپانیا را در قالب لیست‌های ترتیبی نمایش دهیم. اما می‌خواهیم تیم صدرنشین هر لیگ با رنگ قرمز نمایش داده شود. در کدهای زیر، این کار را با استفاده از شبه‌کلاس first-child انجام داده‌ایم:

CSS

li:first-child{
  color: red;
}

با اجرای کدهای بالا، خواهید دید که اولین آیتم هر لیست ترتیبی موجود در صفحه، با رنگ قرمز نمایش داده می‌شود. علت این امر، استفاده از انتخابگر li:first-child است که به این معناست که هر عنصر li که اولین فرزند عنصر والد خود است، انتخاب شود. شاید فکر کنید این کار را می‌توان بدون نیاز به شبه‌کلاس‌ها هم انجام داد. برای مثال، می‌توانیم یک کلاس با نامی دلخواه مثل first-item ایجاد کرده و استایل مورد نظر را در آن تعریف کنیم و سپس، آن کلاس را به هر یک از آیتم‌های ابتداییِ هر لیست اختصاص دهیم. مانند زیر:

CSS

.first-item{
  color: red;
}

بله، حق با شماست و اصلاً‌ علت اینکه این انتخابگرها را شبه‌کلاس می‌نامند این است که کاری مشابه تعریف یک کلاس جدید انجام می‌دهند. اما شبه‌کلاس‌ها از مزایایی مثل عدم نیاز به تعریف کلاس‌های متعدد و حفظ اختصار کدها برخوردارند. به علاوه، از روش معادل، یعنی تعریف کلاس جدید، تنها در مورد برخی از شبه‌کلاس‌ها مثل first-child می‌توان استفاده کرد. برای مثال، کار شبه‌کلاس :hover را به هیچ روش دیگری نمی‌توان انجام داد. اما از همه‌ی اینها مهمتر این است که شبه‌کلاس‌ها دینامیک هستند. دینامیک بودن شبه‌کلاس‌ها به این معناست که آنها با تغییر محتوا، آپدیت می‌شوند اما روش تعریف کلاس جدید، چنین قابلیتی را ندارد. برای روشن شدن موضوع، فرض کنید در مثال بالا لیست اول که مربوط به رده‌بندی تیم‌های لیگ برتر انگلستان است، بعداً تغییر کرده و جای تیم‌ها عوض شود یا یک تیم به ابتدای آن اضافه شود:

CSS

.first-item{
  color: red;
}

حالا آیتم جدیدی آیتم اول لیست است و همانطور که با اجرای این مثال می‌توانید ببینید، شرایط مطابق انتظار ما نیست و برای اصلاح اوضاع، باید کلاس first-item را از آیتم قبلی گرفته و به آیتم جدید (یعنی لیورپول) بدهیم. اما اگر همین تغییر را در مثالی که از شبه‌کلاس :first-child استفاده کرده، انجام دهیم، هیچ مشکلی به وجود نمی‌آید؛ چون شبه‌کلاس :first-child پس از تغییر ایجاد شده، آپدیت شده و لذا در هر شرایطی همواره اولین عنصر لیست را انتخاب می‌کند.

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

شبه کلاس‌های link و visited

شبه‌کلاس‌های دینامیک link و visited تنها روی لینک‌ها (عناصر a) و یا عناصر area که دارای یک صفت href هستند، قابل اعما‌ل‌اند. این عناصر تا زمانی که هنوز توسط کاربر مشاهده (visit) نشده باشند، در وضعیت link قرار دارند و پس از مشاهده توسط کاربر، در وضعیت visited خواهند بود. با استفاده از شبه‌کلاس :link می‌توانیم استایل‌هایی را برای عناصری که در وضعیت link قرار دارند، تعریف کنیم و با استفاده از شبه‌کلاس :visited می‌توانیم استایل‌هایی را برای اِعمال روی عناصر در وضعیت visited تعریف کنیم. مثال زیر را ببینید:

CSS

a:link{
  color: gold;
  background-color: green;
}

a:visited{
  color: red;
  background-color: yellow;
}

لینک‌های موجود در مثال بالا، تا زمانی که مشاهده نشده باشند، با رنگ زمینه‌ی طلایی و پس‌زمینه‌ی سبز نمایش داده می‌شوند اما پس از مشاهده، با رنگ زمینه‌ی قرمز و پس‌زمینه‌ی زرد نمایش داده می‌شوند. توجه داشته باشید که اگر بعد از مشاهده‌ی یک لینک، صفحه را رفرش کنید یا مرورگر را بسته و مجدداً صفحه را اجرا کنید، لینک‌ها همچنان با استایل visited نمایش داده می‌شوند. برای تغییر این وضعیت، باید تاریخچه‌ی (history) مرورگر را پاک کنیم. با این حساب، اگر شما قبلاً با مرورگر خود از هر یک از لینک‌های مثال بالا یعنی سایت‌های UEFA و AFC دیدن کرده باشید، از همان ابتدا لینک‌ها را با رنگ زمینه‌ی قرمز و پس‌زمینه‌ی زرد خواهید دید.

اغلب مرورگرها در استایل‌شیت داخلی خود، مقدار پیش‌فرضی را برای پراپرتی color عناصری که در وضعیت visited قرار دارند، تعریف کرده‌اند. به علاوه، مرورگرها به دلایل مربوط به حریم خصوصی، پراپرتی‌هایی را که می‌توان با استفاده از شبه‌کلاس :visited تنظیم کرد، به‌شدت محدود کرده‌اند.

شبه‌کلاس‌های hover و active

وقتی کاربر، اشاره‌گر ماوس (cursor) را روی یک عنصر می‌برد، آن عنصر در وضعیت hover قرار می‌گیرد. با استفاده از شبه‌کلاس :hover می‌توانیم عنصری را که در این وضعیت قرار دارد، انتخاب کنیم و استایل‌هایی را به آن تخصیص دهیم. این شبه‌کلاس معمولاً برای ایجاد افکت‌های roll-over به کار می‌رود. اما وقتی کاربر روی عنصر کلیک می‌کند، آن عنصر فعال شده و اصطلاحاً در وضعیت active قرار می‌گیرد. با استفاده از شبه‌کلاس :active می‌توانیم عنصر را در این وضعیت انتخاب و استایل‌دهی کنیم. توجه داشته باشید که وضعیت active برای یک عنصر با فشردن کلیک اصلی ماوس (که برای ماوس‌های راست‌دست معادل کلیک چپ است) شروع شده و با رها کردن آن به پایان می‌رسد. شبه‌کلاس :active معمولاً برای لینک‌ها (عناصر a) و دکمه‌ها (عناصر button) استفاده می‌شود. یک استفاده‌ی معمول دیگر از این شبه‌کلاس به عنصر یا کنترل‌‌های فرم مربوط می‌شود که در ادامه، مثالی از آن خواهید دید. ابتدا به مثال زیر نگاه کنید.

CSS

a:link{
  color: blue;
}

a:visited{
  color: purple;
}

a:hover{
  background: yellow;
}

a:active{
  color: red;
}

p:active{
  background: #eee;
}

در مورد شبه‌کلاس :hover با مسئله‌ای مواجه هستیم که به دستگاه‌های فاقد ماوس و لمسی مانند موبایل‌ها مربوط است. ظاهراً رویداد hover برای این دستگاه‌ها معنی ندارد. البته موبایل‌ها به این رویداد واکنش‌هایی دارند؛ مثلاً برخی از دستگاه‌ها زمان کوتاهی در ابتدای لمس لینک را برای رویداد hover در نظر می‌گیرند یا برخی از دستگاه‌های موبایل، یک‌بار لمس را به عنوان hover و دو بار لمس را به عنوان کلیک در نظر می‌گیرند. اما روی‌هم‌رفته، به خاطر محدودیت‌های موجود، نباید از hover جز به عنوان افکتی نمایشی برای بهبود تجربه کاربری، استفاده کنید.

شبه‌کلاس any-link

شبه‌کلاس :any-link عناصری را که داری یک صفت href هستند، بدون توجه به اینکه توسط کاربر مشاهده شده‌اند یا خیر، انتخاب می‌کند. به عبارت دیگر، این شبه‌کلاس، هر عنصر a یا area را که در وضعیت link یا visited قرار داشته باشد، انتخاب می‌کند. مثال زیر را ببینید.

CSS

a:any-link{
  border: 1px solid blue;
  color: orange;
}

a:-webkit-any-link{
  border: 1px solid blue;
  color: orange;
}

شبه‌کلاس focus

شبه کلاس :focus برای انتخاب عنصری که فوکوس را دریافت کرده، کاربرد دارد. یک عنصر زمانی فوکوس را دریافت می‌کند که کاربر روی آن کلیک کند یا ضربه بزند (tap) و یا با استفاده از کلید tab صفحه‌کلید، فوکوس را به آن عنصر انتقال دهد. مثال زیر را ببینید.

CSS

.red-input:focus{
  background: yellow;
  color: red;
}

.blue-input:focus{
  background: yellow;
  color: blue;
}

توجه داشته باشید که شبه‌کلاس :focus خودِ عنصر دارای فوکوس را انتخاب می‌کند و اگر بخواهیم یک عنصری را که شامل یک عنصر دارای فوکوس است، انتخاب کنیم، باید از شبه‌کلاس :focus-within استفاده کنیم.

شبه‌کلاس focus-widthin

شبه‌کلاس :focus-within برای انتخاب عنصری که خود یا یکی از فرزندان مستقیم یا غیرمستقیمش دارای فوکوس هستند، کاربرد دارد. به عنوان یکی از معمول‌ترین موارد استفاده‌ی این شبه‌کلاس، می‌توانیم کانتینر form را در زمانی که یکی از فیلدها یا کنترل‌های درون آن فرم دارای فوکوس باشند، انتخاب کنیم و استایلی را برای آن تعیین کنیم. برای مثال، در کد زیر، عنصر form استایل‌های رنگی مشخصی را در زمانی که یکی از فیلدهای متنی درون آن دارای فوکوس هستند، دریافت می‌کند.

CSS

form{
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-widthin{
  background: #ff8;
  color: black;
}

شبه‌کلاس focus-visible

شبه‌کلاس :focus-visible عنصری را انتخاب می‌کند که اولاً دارای فوکوس باشد و ثانیاً به تشخیص مرورگر، به نمایش واضح و مشهود فوکوس نیاز داشته باشد؛ یعنی مرورگر تشخیص دهد که مهم است که کاربر بداند این عنصر، فوکوس را دریافت کرده است. برای روشن شدن موضوع، مثال زیر را ببینید.

CSS

.fv:focus-visible{
  outline: 4px dashed red;
}

اگر بعد از اجرای کدهای بالا، درون فیلد متنی کلیک کنیم (یعنی با ماوس، فوکوس را به آن فیلد منتقل کنیم)، مقدار تعریف‌شده برای پراپرتی outline این عنصر در نظر گرفته می‌شود و لذا استایل آن تغییر می‌کند. پس، این فیلد در اینجا هر دو شرط مورد نظر را دارد؛ یعنی هم دارای فوکوس است و هم مرورگر تشخیص می‌دهد که دریافت فوکوس توسط این عنصر باید به وضوح نمایش داده شود. اما اگر روی دکمه (عنصر button) کلیک کنیم، تغییری در استایل این عنصر به وجود نمی‌آید. بنابراین، این عنصر، شرط دوم را برآورده نمی‌کند؛ یعنی مرورگر نیازی نمی‌بیند که انتقال فوکوس (توسط ماوس) به یک دکمه را اعلام کند. اما اگر فوکوس را با استفاده از کلید tab صفحه‌کلید به دکمه‌ی مثال بالا انتقال دهیم، استایل تعریف‌شده روی آن اعمال می‌شود. پس، از نظر مرورگر، انتقال فوکوس توسط کیبورد (بر خلاف ماوس) به یک دکمه، اتفاقی است که باید دیده شود.

در حقیقت، مهمترین کاربرد شبه‌کلاس :focus-visible همین چیزی است که در مثال بالا دیدیم؛ یعنی تعریف استایل‌های متفاوت برای عناصری که دارای فوکوس هستند، بسته به روش دریافت فوکوس.

حالا توجه شما را به مثال زیر جلب می‌کنم که تفاوت شبه‌کلاس‌های :focus و :focus-visible را به خوبی نشان می‌دهد.

CSS

input, button{
  margin: 10px;
}

.focis-only:focus{
  outline: 2px solid black;
}

.focus-visible-only:focus-visible{
  outline: 4px dashed red;
}

در این مثال، ما سه جفت input و button داریم:

• جفت اول مطابق استایل‌های پیش‌فرض مرورگر رفتار می‌کنند. یعنی اگر فوکوس را با ماوس به آنها انتقال دهیم، استایل تعریف‌شده توسط مرورگر (از طریق پراپرتی outline) روی فیلد متنی اعمال می‌شود اما دکمه بدون تغییر می‌ماند. اما چنانچه فوکوس را با کیبورد و کلید tab به آنها انتقال دهیم، دکمه نیز مانند فیلد متنی، استایل جدید را دریافت می‌کند.
• جفت دوم از شبه‌کلاس :focus استفاده کرده‌اند و بنابراین، انتقال فوکوس به آنها چه از طریق ماوس و چه از طریق کیبورد، با دریافت استایل تعریف‌شده توسط شبه‌کلاس :focus همراه است. در واقع، اینجا شرط دومی برای بررسی وجود ندارد.
• جفت سوم از شبه‌کلاس :focus-visible استفاده کرده‌اند. پس، اگر فوکوس را با ماوس به آنها انتقال دهیم، استایل تعریف‌شده توسط شبه‌کلاس، روی فیلد متنی اعمال می‌شود اما استایل دکمه تغییری نمی‌کند. اما در انتقال فوکوس از طریق کیبورد، هم فیلد و هم دکمه استایل تعریف‌شده را دریافت می‌کنند. در واقع، این حالت مشابه همان حالت پیش‌فرض است با این تفاوت که در اینجا نه استایل تعریف‌شده توسط مرورگر بلکه استایلی که خودمان برای شبه‌کلاس :focus-visible تعریف کردیم، روی عناصر اعمال می‌شود.

شبه‌کلاس first-child

همانطور که از نام شبه‌کلاس :first-child برمی‌آید، از آن برای انتخاب عناصری که اولین فرزند عنصر والد خود هستند، استفاده می‌شود. به عبارت دیگر، این شبه‌کلاس باعث انتخاب عناصری می‌شود که در بین یک گروه از عناصر با والد مشترک، عنصر اول هستند. عناصری که دارای والد مشترک هستند عناصر sibling نیز گفته می‌شوند. واژه‌ی sibling به نوعی رساننده‌ی مفهوم خواهر و برادری است. پس، می‌توان گفت که شبه‌کلاس :first-child فرزندان ارشد عناصر را انتخاب می‌کند. مثال زیر را ببینید.

CSS

p:first-child{
  color: lime;
  background-color: black;
  padding: 5px;
}

در مثال بالا، انتخابگر p:first-child به این معناست که هر عنصر p که اولین فرزند عنصر والد خود است، انتخاب شود. به همین دلیل، تنها عنصری که انتخاب می‌شود، پاراگراف اول از اولین عنصر div است. طبیعتاً پاراگراف دوم به این دلیل که اولین عنصر والد خود (یعنی div)‌نیست، انتخاب نمی‌شود و عنصر h2 نیز اگرچه اولین عنصر والد خود است اما از نوع p نیست و لذا انتخاب نمی‌شود. اگر در مثال بالا، به جای انتخابگر موجود از *:first-child استفاده کنیم، عنصر h2 نیز انتخاب خواهد شد.

شبه‌کلاس last-child

مطابق انتظار، شبه‌کلاس :last-child برای انتخاب عناصری کاربرد دارد که آخرین فرزند عنصر والد خود هستند. به عبارت دیگر، این شبه‌کلاس باعث انتخاب عناصری می‌شود که آخرین عنصر در بین یک گروه از عناصر sibling هستند. پس، این شبه‌کلاس، ته‌تغاری‌ها را انتخاب می‌کند. مثال زیر را ببینید.

CSS

p:last-child{
  color: lime;
  background-color: black;
  padding: 5px;
}

شبه‌کلاس only-child

شبه‌کلاس :only-child موجب انتخاب عناصری می‌شود که تنها فرزند عنصر والد خود هستند. به عبارت دیگر، این شبه‌کلاس، عناصری را انتخاب می‌کند که هیچ عنصر sibling یا هم‌والد دیگری ندارند. پس، می‌توان گفت این شبه‌کلاس، تک‌فرزندها را انتخاب می‌کند. مثال زیر را ببینید.

CSS

div:only-child{
  color: red;
}

div{
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

شبه‌کلاس only-of-type

نام شبه‌کلاس :only-of-type کاربرد آن را نشان می‌دهد. افزودن این شبه‌کلاس به یک انتخابگر، باعث می‌شود که عنصر مورد هدفِ انتخابگر تنها در صورتی انتخاب شود که هیچ عنصر sibling از نوع خودش نداشته باشد و به عبارت دیگر، تنها فرزند از آن نوع در بین فرزندان والد خود باشد. مثال زیر را ببینید.

CSS

main :only-of-type{
  color: red;
}

شبه‌کلاس first-of-type

شبه‌کلاس :first-of-type باعث انتخاب عناصری می‌شود که در بین یک گروه از عناصر sibling، اولین عنصر از نوع خود هستند. در مثال زیر، اولین عنصر p انتخاب می‌شود زیرا در بین یک گروه از عناصر sibling (فرزندان div) اولین عنصر از نوع پاراگراف یا p است.

CSS

p:first-of-type{
  color: red;
}

شبه‌کلاس last-of-type

شبه‌کلاس :last-of-type باعث انتخاب عناصری می‌شود که در بین یک گروه از عناصر sibling، آخرین عنصر از نوع خود هستند. در مثال زیر، آخرین عنصر p انتخاب می‌شود زیرا در بین یک گروه از عناصر sibling (فرزندان div) آخرین عنصر از نوع p است.

CSS

p:last-of-type{
  color: red;
  font-style: italic;
}

شبه کلاس nth-child

شبه‌کلاس :nth-child() عناصر را بر اساس موقعیتی که در بین یک گروه از عناصر sibling دارند، انتخاب می‌کند. این شبه‌کلاس دارای یک آرگومان است که الگویی را برای عنصر یا عناصر انتخابی بر اساس اندیس آنها تعیین می‌کند. به بیان ساده‌تر، آرگومان شبه‌کلاس :nth-child() شماره‌ی اندیس عنصر یا عناصری است که باید انتخاب شوند. این آرگومان می‌تواند به یکی از سه فرم زیر باشد:

• یک عدد صحیح: فرم nth-child(b) که در آن b یک عدد صحیح است، به معنای انتخاب b-امین عنصر در بین یک گروه از عناصر sibling است. برای مثال، nth-child(1) باعث انتخاب اولین عنصر می‌شود.
• یک ترکیب خطی: فرم nth-child(an+b) که در آن n یک کلمه کلیدی است که حکم یک شمارنده یا تکرارگر روی عناصر sibling را دارد. برای بدست آوردن عناصر انتخابی در این فرم، باید با قرار دادن اعداد صفر، یک، دو و الی آخر به جای n تا جایی که an+b از تعداد عناصر بیشتر نشود، اندیس‌های عناصر انتخابی را محاسبه کرد. برای مثال، در یک گروه شامل 10 عنصر مجاور، شبه‌کلاس nth-child(3n+1) به این معناست که عناصر اول، چهارم، هفتم و دهم انتخاب می‌شوند. عنصر اول به ازای n=0، عنصر چهارم به ازای n=1، عنصر هفتم به ازای n=2 و عنصر دهم به ازای n=3 بدست می‌آیند. به ازای n=4 عدد 13 بدست می‌آید که از تعداد عناصر (10 عنصر)‌ بیشتر است.
• کلمات کلیدی even یا odd: انتخاب فرزندان دارای اندیس زوج یا فرد در بین یک گروه از عناصر مجاور، به قدری رایج است که به جای آرگومان‌های 2n و 2n+1 که به ترتیب، باعث انتخاب فرزندان زوج و فرد یک عنصر والد می‌شوند، می‌توانیم از کلمات کلیدی even و odd استفاده کنیم. یعنی nth-child(even) باعث انتخاب عناصر دوم، چهارم، ششم و الی آخر می‌شود و nth-child(odd) عناصر اول، سوم، پنجم و الی آخر را انتخاب می‌کند.

اجازه دهید موارد گفته‌شده در مورد شبه‌کلاس :nth-child() را در قالب چند مثال ببینیم. ساده‌ترین حالت ممکن برای شبه‌کلاس :nth-child() این است که همانند مثال زیر، یک عدد صحیح را به عنوان آرگومان دریافت کند.

CSS

li:nth-child(4){
  color: green;
}

در اینجا با توجه به آرگومان شبه‌کلاس :nth-child(4) چهارمین آیتم لیست انتخاب می‌شود و استایل مورد نظر را دریافت می‌کند. حالا فرض کنید در همین مثال، بخواهیم آیتم‌های دارای اندیس فرد که کشورهای آسایی هستند، با رنگ زرد و آیتم‌های دارای اندیس زوج که کشورهای اروپایی هستند، با رنگ سبز نمایش داده شوند. در این صورت، داریم:

CSS

li:nth-child(2n){
  color: green;
}

li:nth-child(2n+1){
  color: yellow;
}

البته همانطور که قبلاً هم گفتیم، به جای آرگومان‌های 2n+1 و 2n+2 می‌توانستیم از کلمات کلیدی odd و even نیز استفاده کنیم. حالا مثال زیر را ببینید.

CSS

li:nth-child(3n+1){
  color: yellow;
}

li:nth-child(3n+2){
  color: green;
}

li:nth-child(3n+3){
  color: red;
}

در کدهای بالا، از شبه‌کلاس :nth-child() به نحوی استفاده شده که آیتم‌های اول، چهارم و هفتم که از روی الگوی 3n+1 بدست می‌آیند، با رنگ زرد (کشورهای آسیایی) نمایش داده شوند و به همین ترتیب، کشورهای اروپایی با رنگ سبز و کشورهای قاره‌ی آمریکا با رنگ قرمز نمایش داده شده‌اند.

موضوعی که در مثال بعدی به آن پرداخته شده، امکان استفاده از شمارنده‌ی منفی است که به معنای معکوس کردن شمارش و انجام شمارش رو به عقب است. در حقیقت، وقتی به جای n از -n استفاده کنیم، نحوه‌ی محاسبه تغییری نمی‌کند و همچنان با قرار دادن اعداد صفر، یک، دو و الی آخر به جای n، اندیس‌های عناصر انتخابی را تعیین می‌کنیم. اما این بار، شمارش در جهت معکوس انجام می‌شود. برای مثال، در کد زیر، به ازای n=0 عنصر سوم و به ازای n=1 عنصر دوم و به ازای n=2 عنصر اول بدست می‌آیند.

CSS

li:nth-child(-n+3){
  background-color: yellow;
}

و بالاخره در مثال زیر، با استفاده از ترکیبی از دو شبه‌کلاس :nth-child() ترتیبی داده شده که در بین آیتم‌های لیست، دو کشور آسیایی اول انتخاب شوند.

CSS

li:nth-child(3n+1):nth-child(-n+4){
  background-color: yellow;
}

شبه‌کلاس nth-of-type

شبه‌کلاس :nth-of-type() عناصر را بر اساس موقعیتی که در بین یک گروه از عناصر sibling و هم‌نوع دارند، انتخاب می‌کند. آرگومان این شبه‌عنصر، الگویی را برای تعیین عنصر یا عناصری که در بین یک گروه از عناصر sibling، موقعیت مشخصی دارند، ارائه می‌دهد. به عنوان مثال، اگر آرگومان این شبه‌کلاس عدد 2 باشد، عناصری از گروه مورد نظر انتخاب می‌شوند که دومین عنصر از نوع خود هستند. همانند شبه‌کلاس :nth-child() آرگومان شبه‌کلاس :nth-of-type() نیز می تواند یک عدد صحیح، یک ترکیب خطی از یک شمارنده به نام n و یا یکی از کلمات کلیدی odd یا even باشد. مثال زیر را ببینید.

CSS

p:nth-of-type(2n+1){
  color: red;
}

p:nth-of-type(2n){
  color: blue;
}

p:nth-of-type(1){
  font-weight: bold;
}

p.fancy:nth-of-type(2n+1){
  text-decoration: underline;
}

شبه‌کلاس nth-last-of-type

شبه‌کلاس :nth-last-of-type() عناصر را بر اساس موقعیتی که در بین یک گروه از عناصر sibling و هم‌نوع دارند، با شمارش از آخر به اول، انتخاب می‌کند. در حقیقت، این شبه‌کلاس کاملاً مشابه شبه‌کلاس :nth-of-type() است؛ با این تفاوت که در اینجا شمارش از آخر به اول انجام می‌شود. اگر کاربرد این شبه‌کلاس برایتان مبهم است، مثال زیر ابهام را رفع می‌کند.

CSS

span:nth-last-of-type(2){
  backgound-color: lime;
}

شبه‌کلاس مثال بالا به این معناست که آن عنصر span که در بین عناصر این گروه، دومین عنصر span از آخر است، انتخاب شود. البته شبه‌کلاس nth-last-of-type نیز می‌تواند همانند دو شبه‌کلاس قبلی، یک ترکیب خطی از n را به عنوان آرگومان بپذیرد.

شبه کلاس nth-last-child

شبه‌کلاس :nth-last-child() عناصر را بر اساس موقعیتی که با شمارش از آخر به اول، در بین یک گروه از عناصر sibling دارد، انتخاب می‌کند. به عبارت دیگر، این انتخابگر عناصر را بر اساس اینکه از آخر چندمین عنصر در بین یک گروه از عناصر sibling هستند، انتخاب می کند. با این حساب، این شبه‌کلاس کاملاً همانند شبه‌کلاس :nth-child() است؛ با این تفاوت که شمارش عناصر از آخر به اول انجام می‌شود. مثال زیر را ببینید.

CSS

table{
  border: 1px solid blue;
}

tr:nth-last-child(-n+3){
  background-color: pink;
}

tr:nth-last-child(n+2){
  color: blue;
}

tr:nth-last-child(2){
  font-weight: 600;
}

شبه‌کلاس empty

از شبه‌کلاس :empty برای انتخاب عناصری که فاقد محتوا هستند، استفاده می‌شود. محتوای یک عنصر می‌تواند متن، عناصر فرزند و کاراکترهای فاصله‌سفید (whitespace) باشد. اما کامنت‌ها و دستورالعمل‌های پردازشی (processing instructions) محتوا تلقی نمی‌شوند. البته در ماژول Selectors Level 4 شبه‌کلاس :empty طوری بازتعریف شده که کاراکترهای whitespace را نیز همانند کامنت‌ها، محتوا تلقی نمی‌کند. مثال زیر را ببینید.

CSS

.box{
  background: pink;
  height: 80px;
  width: 200px;
}

.box:empty{
  background: lime;
}

در کدهای بالا، چهار عنصر div وجود دارد که استایل‌های تعریف‌شده توسط کلاسی با نام box را دریافت کرده و لذا با رنگ پس‌زمینه‌ی صورتی (pink) نمایش داده می‌شوند. اما یک قاعده‌ی دیگر نیز وجود دارد که باعث می‌شود از بین این چهار عنصر، هر کدام که فاقد محتوا هستند، انتخاب شده و با رنگ پس‌زمینه‌ی لیمویی (lime) نمایش داده شوند. باکس یا عنصر div اول، تنها شامل یک کامنت است که همانطور که گفتیم، محتوا تلقی نمی‌شود و لذا با رنگ پس‌زمینه‌ی لیمویی نمایش داده می‌شود. دومین باکس اما شامل مقداری متن است و لذا با رنگ پس‌زمینه‌ی صورتی نمایش داده می‌شود. باکس سوم نیز شامل یک کامنت است اما قبل از آن چند کاراکتر whitespace نیز وجود دارد و به دلیل وجود همین کاراکترها، دارای محتوا محسوب می‌شود و لذا با رنگ صورتی نمایش داده می‌شود. اما همانطور که گفتیم، اگر مرورگری از تعریف جدید شبه‌کلاس :empty در ماژول Selectors Level 4 پشتیبانی کند، باکس سوم را با رنگ پس‌زمینه‌ی لیمویی نمایش خواهد داد. باکس چهارم نیز شامل یک عنصر فرزند p است که با وجود اینکه این عنصر فرزند فاقد محتواست اما به هر حال، محتوای عنصر div محسوب می‌شود.

شبه‌کلاس blank

شبه‌کلاس :blank برای انتخاب آن گروه از عناصر ورودی فرم (input و textarea) که هنوز مقداری در آنها وارد نشده، کاربرد دارد. کاربرد اصلی این شبه‌کلاس این است که می‌توانیم با استفاده از آن، فیلدهایی را که اجباری نیستند اما هنوز داده‌ای در آنها وارد نشده، با استایل متفاوتی نمایش دهیم تا کاربر راحت‌تر آنها را ببیند.

شبه‌کلاس :blank در حال حاضر، در هیچ مرورگری پشتیبانی نمی‌شود و از طرف دیگر، کارگروه CSS مدام آن را تغییر می‌دهد. بنابراین، بهتر است فعلاً از این شبه‌کلاس استفاده نکنیم.

شبه‌کلاس root

از شبه‌کلاس :root برای انتخاب بالاترین عنصر در ساختار درختی سند استفاده می‌شود. این عنصر در اسناد HTML همیشه عنصر html است. بنابراین، شبه‌کلاس :root معادل انتخابگر html است؛ البته با این تفاوت که از specificity بالاتری برخوردار است. در مورد مفهوم specificity در فصل بعد صحبت خواهیم کرد. شبه‌کلاس :root برای تعریف یا اعلان متغیرهای عمومی (global) در CSS مفید است. مثال زیر را ببینید.

CSS

:root{
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

در مورد متغیرهای CSS و کاربرد و نحوه‌ی استفاده از آنها نیز در آینده صحبت خواهیم کرد.

شبه‌کلاس‌های enabled و disabled

دو شبه‌کلاس :enabled و :disabled عناصر را بر این اساس که قابلیت فعال‌شدن را دارند یا خیر، انتخاب می‌کنند. شبه‌عنصر :enabled عناصری را انتخاب می‌کند که بتوانند در وضعیت فعال‌شده (activated) قرار بگیرند؛ یعنی بتوان آنها را انتخاب کرد (selected)، روی آنها کلیک کرد (clicked on)، درون آنها نوشت (typed into) و غیره یا قابلیت دریافت فوکوس را داشته باشند. در مقابل، شبه‌کلاس :disabled عناصری را انتخاب می‌کند که نه بتوانند به هیچ روش در حالت activated قرار گیرند و نه امکان دریافت فوکوس را داشته باشند. مثال زیر را ببینید.

CSS

input:enabled{
  color: #2b2;
}

input:disabled{
  color: #aaa;
}

همانطور که در مثال بالا هم می‌بینیم، این دو شبه‌کلاس می توانند به کاربران کمک کنند تا بدانند با کدام عناصر می‌توانند تعامل داشته باشند.

شبه کلاس checked

از شبه‌کلاس :checked برای انتخاب عناصری که در وضعیت انتخاب‌شده (selected) یا تیک‌خورده (checked) قرار دارند، استفاده می‌شود. این شبه‌کلاس تنها روی چک‌باکس‌ها (عناصر input از نوع checkbox)، دکمه‌های رادیویی (عناصر input از نوع radio) و آیتم‌های یک لیست dropdown (عناصر option درون یک عنصر select) کاربرد دارد. استایل‌های تعریف‌شده برای شبه‌کلاس :checked هنگام انتخاب یا تیک‌دار کردن عنصر مورد نظر، نمایش داده می‌شوند و با خارج کردن عنصر از حالت انتخاب، محو می‌شوند. مثال زیر را ببینید.

CSS

div, selest{
  margin: 8px;
}

input:checked+label{
  color: red;
}

input[type="radio"]:checked{
  box-shadow: 0 0 0 3px orange;
}

option:checked{
  box-shadow: 0 0 0 3px lime;
  color: red;
}

شبه‌کلاس‌های valid و invalid

مرورگرهای مدرن که از HTML5 پشتیبانی می‌کنند، کنترل‌های فرم یا فیلدهای ورود داده را بر اساس نوع آنها، اعتبارسنجی می‌کنند و از ورود مقادیر غیرمعتبر در فیلدها جلوگیری می‌کنند. این قابلیت به همراه شبه‌کلاس‌های :valid و :invalid ما را قادر می‌سازد که فیلدها را بر اساس وضعیت آنها از نظر معتبر بودن یا نبودن، استایل‌دهی کنیم. شبه‌کلاس :valid عناصری را انتخاب می‌کند که داده‌ای که توسط کاربر در آنها وارد شده، با موفقیت اعتبارسنجی شده باشد. طبیعتاً شبه‌کلاس :invalid نیز عناصری را انتخاب می‌کند که داده‌ی معتبری در آنها وارد نشده باشد. مثال زیر را ببینید.

CSS

input:valid{
  border: 1px solid green;
}

input:invalid{
  border: 1px solid red;
}

شبه‌کلاس‌های required و optional

شبه‌کلاس‌های :required و :optional عناصر را بر اساس به‌کارگیری یا عدم به‌کارگیری صفت required انتخاب می‌کنند. required یک صفت بولین است که وجود آن به معنای اجباری بودن ورود داده در فیلد مورد نظر است. در حقیقت، هر یک از عناصر فرم، اعم از عناصر input از نوع‌های مختلف، عنصر select و عنصر textarea که صفت required را تنظیم کرده‌اند، توسط شبه‌کلاس :required انتخاب می‌شوند و هر یک از این عناصر که صفت required را تنظیم نکرده‌اند، توسط شبه‌کلاس :optional انتخاب می‌شوند. مثال زیر را ببینید.

CSS

input:optional{
  border: 1px solid green;
}

input:required{
  background-color: yellow;
}

شبه‌کلاس‌های in-range و out-of-range

برخی از عناصر input می‌توانند با استفاده از صفت‌های min و max بازه‌ی مقادیر مجاز برای آن عنصر را تعیین کنند. وقتی چنین عنصری مقداری خارج از این بازه را دریافت کرده باشد، در وضعیت out-of-range قرار دارد و چنانچه مقدار مجازی را دریافت کرده باشد، در وضعیت in-range قرار دارد. با این توضیح، عملکرد شبه‌کلاس‌های :out-of-range و :in-range واضح است. اولی برای استایل‌دهی به عنصر در وضعیتی که مقداری خارج از بازه‌ی مجازش را دریافت کرده کاربرد دارد و دومی برای استایل‌دهی به عنصر در وضعیتی که مقداری از بازه‌ی مجاز تعیین‌شده را دریافت کرده‌اند. مثال زیر را ببینید.

CSS

input:out-of-range{
  color: red;
}

input:in-range{
  color: green;
}

فرم موجود در مثال بالا از یک فیلد از نوع number و یک فیلد از نوع date تشکیل شده است. فیلد number دارای این محدودیت است که عدد ورودی در آن باید بین 1 و 20 باشد و هر عددی در این بازه، این فیلد را در وضعیت in-range قرار می‌دهد و هر مقداری خارج از این بازه، این فیلد را در وضعیت out-of-range قرار می‌دهد. فیلد date نیز این محدودیت را دارد که تاریخ ورودی در آن باید متعلق به بازه‌ی زمانی اول ژانویه 1970 تا اول ژانویه 2000 باشد و چنانچه هر تاریخی خارج از این بازه وارد شود، این فیلد در وضعیت out-of-range قرار می‌گیرد.

شبه کلاس‌های read-write و read-only

شبه‌کلاس‌های :read-only و :read-write عناصر را بر اساس قابل ویرایش بودن یا نبودن آنها انتخاب می‌کنند. عنصر قابل ویرایش (editable) به عنصری گفته می‌شود که امکان ویرایش آن توسط کاربر وجود دارد. در مورد عناصر فرم، با استفاده از صفت بولین readonly و در مورد سایر عناصر مانند هدینگ‌ها و پاراگراف‌ها، با استفاده از صفت بولین contenteditable می‌توانیم عناصر را قابل ویرایش کنیم. پس، شبه‌کلاس :read-only عناصری را انتخاب می‌کند که یکی از صفت‌های readonly (برای عناصر فرم) و یا contenteditable (برای عناصر غیر از فرم) را تنظیم کرده باشند. شبه‌کلاس :read-write نیز عناصری را انتخاب می‌کند که قابل ویرایش نیستند؛ یعنی هیچ‌یک از دو صفت مذکور را به‌کار نگرفته‌اند.

در مثال زیر، دو پاراگراف داریم که اولی به خاطر استفاده از صفت contenteditable قابلیت ویرایش توسط کاربر را دارد و دومی یک پاراگراف معمولی است و کاربر نمی‌تواند آن را ویرایش کند. همانطور که با اجرای این مثال خواهید دید، پاراگراف اول، استایل‌های مربوط به قاعده‌ی دوم و پاراگراف دوم، استایل‌های قاعده‌ی اول را دریافت می‌کنند.

CSS

p:read-only{
  background-color: red;
  color: white;
}

p:read-write{
  background-color: lime;
}

اما مثال بعدی به عناصر فرم اختصاص دارد. در اینجا دو عنصر input داریم که اولی یک فیلد نرمال است و دومی به خاطر استفاده از صفت readonly تبدیل به یک فیلد غیرقابل ویرایش شده است و لذا استایل تعریف‌شده برای شبه‌کلاس :read-only را دریافت می‌کند.

CSS

input:read-only{
  background-color: yellow;
}

توجه داشته باشید که برای پشتیبانی مرورگر فایرفاکس از این دو شبه‌کلاس، باید از پیشوند مربوط به این مررورگر یعنی -moz- استفاده کنیم. در واقع، مثال بالا را بایذ به صورت زیر می‌نوشتیم.

CSS

input:-moz-read-only, input:read-only{
  background-color: yellow;
}

شبه‌کلاس placeholder-shown

شبه‌کلاس :placeholder-shown هر عنصر input یا textarea را که در حال نمایش متن placeholder است، انتخاب می‌کند. منظور از متن placeholder برای یک فیلد، متنی است که به صفت placeholder آن فیلد اختصاص داده شده است. مثال زیر را ببینید.

CSS

input:placeholder-shown{
  border-color: red;
  font-style: italic;
}

دقت داشته باشید که وقتی فوکوس به فیلد مورد نظر منتقل شود، از وضعیت placeholder-shown خارج می‌شود و بنابراین، استایل‌های تعریف شده برای شبه‌کلاس :placeholder-shown را از دست می‌دهد.

شبه‌کلاس‌های playing و paused

شبه‌کلاس‌های :playing و :paused عناصر مدیا مانند video و audio و هر عنصر دیگری را که قابلیت پخش و توقف پخش را داشته باشند، بر اساس قرار داشتن در وضعیت در حال پخش (playing) یا متوقف‌شده (paused) انتخاب می‌کنند. در واقع، هر عنصری که در حال پخش باشد، توسط شبه‌کلاس :playing و هر عنصری که پخشش متوقف شده باشد، توسط شبه‌کلاس :paused انتخاب می‌شود. البته باید توجه داشته باشید که این شبه‌کلاس‌ها فعلاً در وضعیت آزمایشی (experimental mode) قرار دارند و توسط مرورگرها پشتیبانی نمی‌شوند. مثال زیر را ببینید.

CSS

.playing{
  border: 5px solid green;
}

.paused{
  border: 5px solid gray;
}

توجه داشته باشید که یک منبع مدیا مانند فیلم یا صدا، حتی زمانی که در وضعیت buffering قرار دارد نیز در حال پخش محسوب می‌شود و استایل‌های شبه‌کلاس :playing را دریافت می‌کند. همچنین، اگر به هر دلیلی به جز تعامل کاربر نیز متوقف شود، در وضعیت paused قرار می‌گیرد و استایل‌های شبه‌کلاس :paused را دریافت می‌کند.

شبه‌کلاس indeterminate

با استفاده از شبه‌کلاس :indeterminate می‌توانیم هر عنصر فرم را که در وضعیت نامشخص (indeterminate) قرار دارد، انتخاب کنیم. عناصر زیر می‌توانند در وضعیت indeterminate قرار داشته باشند:

• عناصر input از نوع radio که متعلق به یک گروه هستند (یعنی مقدار صفت name آنها یکی است)، در صورتی که هیچ کدام از آنها انتخاب نشده باشد، در وضعیت indeterminate هستند.
• عناصر input از نوع checkbox که پراپرتی indeterminate‌ آنها با استفاده از جاوااسکریپت روی مقدار true تنظیم شده است، در وضعیت indeterminate هستند.
• عناصر progress که مقداری برای آنها تنظیم نشده (یعنی مقداری را به صفت‌های value و max اختصاص نداده‌اند)، در وضعیت indeterminate هستند.

اجازه دهید کاربرد شبه‌کلاس :indeterminate را در قالب یک مثال ببینیم. در مثال زیر، مجموعه‌ای از دکمه‌های رادیویی هم‌گروه داریم که همانطور که گفتیم، تا زمانی که هیچ‌یک از آنها انتخاب نشده باشد، در وضعیت indeterminate هستند و لذا استایل‌های تعریف‌شده توسط شبه‌کلاس :indeterminate را دریافت می‌کنند. همچنین، با استفاده از جاوااسکریپت، مقدار true را برای پراپرتی indeterminate یک چک‌باکس تنظیم کرده‌ایم و با این کار، این چک‌باکس در وضعیت indeterminate قرار گرفته است. به علاوه، دو عنصر progress نیز داریم که دومی در وضعیت indeterminate قرار دارد و لذا استایل‌های تعریف‌شده توسط انتخابگر progress:indeterminate را دریافت می‌کند.

CSS

input:indeterminate{
  box-shadow: 0 0 1px 1px red;
}

progress:indeterminate{
  width: 80%;
}

شبه‌کلاس default

شبه‌کلاس :default عناصری از فرم را انتخاب می‌کند که در بین یک گروه از عناصر مرتبط، عنصر پیش‌فرض (default) محسوب می‌شوند. عناصر button، option و عناصر input از نوع checkbox و radio عناصری هستند که می‌توانند توسط شبه‌کلاس :default انتخاب شوند. به بیان دقیق‌تر:

• یک عنصر button در صورتی عنصر پیش فرض محسوب شده و توسط شبه‌کلاس :default انتخاب می‌شود که اولین دکمه‌‌ی تأیید فرم (submission button) باشد. این موضوع شامل عناصر input مربوط به تأیید فرم‌ها یعنی نوع‌های submit و image نیز می‌شود.
• در بین یک گروه از عناصر option، اولین عنصری که صفت selected را دریافت کرده باشد، عنصر پیش‌فرض محسوب شده و لذا توسط شبه‌کلاس :default انتخاب می‌شود. اگر هیچ‌یک از عناصر option دارای صفت selected نباشند، اولین عنصر، پیش‌فرض محسوب می‌شود. در مورد لیست‌های چندگانه (multiple select) که امکان انتخاب بیش از یک عنصر وجود دارد، همه‌ی عناصر انتخاب‌شده (یعنی همه‌ی عناصری که دارای صفت selected هستند)، پیش‌فرض به حساب می‌آیند.
• - در مورد عناصر input از نوع checkbox و radio هر عنصری که دارای صفت checked باشد، عنصر پیش‌فرض محسوب شده و توسط شبه‌کلاس :default انتخاب می‌شود.

در مثال زیر، چهار دکمه رادیویی معرف چهار فصل سال داریم که از بین آنها دکمه‌ی مربوط به تابستان (summer) دارای صفت checked است و لذا به عنوان عنصر پیش‌فرض این گروه از دکمه‌ها، توسط شبه‌کلاس :default انتخاب شده و استایل مورد نظر را دریافت می‌کند.

CSS

input:default{
  box-shadow: 0 0 2px 1px coral;
}

شبه‌کلاس target

شبه‌کلاس :target عنصر یکتای مورد اشاره‌ی یک لینک داخلی را انتخاب می‌کند. یک لینک داخلی که bookmark نیز گفته می‌شود، با استفاده از صفت id عنصر مورد نظر، لینکی را به آن عنصر ایجاد می‌کند؛ یعنی کاربر با کلیک روی لینک به عنصر مورد نظر در صفحه منتقل می‌شود. با استفاده از شبه‌کلاس :target می‌توانیم استایل‌هایی را برای عنصر هدف یا target لینک تعیین کنیم. مثال زیر را ببینید.

CSS

p:target{
  background-color: gold;
}

در مثال بالا، سه لینک داخلی داریم که اولی به عنصری اشاره می‌کند که صفت id آن دارای مقدار p1 است و دومی به عنصری که صفت id آن برابر با p2 است. به خاطر وجود انتخابگر p:target، با کلیک روی این لینک‌ها، علاوه بر انتقال به عنصر مورد نظر، محتوای آن عنصر با پس‌زمینه‌ی طلایی نمایش داده می‌شود. لینک سوم به عنصری اشاره می‌کند که در صفحه وجود ندارد و بنابراین، با کلیک روی آن، اتفاق خاصی رخ نمی‌دهد اما از آنجایی که، یک لینک داخلی در هر لحظه تنها می‌تواند به یک عنصر یکتا اشاره کند، استایل عنصر قبلی حذف می‌شود.

شبه کلاس lang

شبه‌کلاس :lang() عناصر را بر اساس زبانی که برای آنها تعیین شده، انتخاب می‌کند. در مورد اسناد HTML، زبان عناصر به وسیله‌ی ترکیبی از صفت lang، عنصر meta و احیاناً اطلاعاتی در سطح پروتکل (مانند هدرهای HTTP) مشخص می‌شود. در مورد سایر انواع اسناد، ممکن است روش‌های دیگری برای تعیین زبان، استفاده شود. آرگومان شبه‌کلاس :lang() یک کد زبانی (language code) مانند en برای زبان انگلیسی، fr برای فرانسوی، fa برای فارسی و غیره است. مثال زیر را ببینید.

CSS

h1, p{
  text-align: center;
}

*:lang(fa){
  color: green;
  direction: rtl;
  font-family: Arabic Typesetting;
}

در مثال بالا، از شبه‌کلاس :lang به همراه انتخابگر عمومی (universal) طوری استفاده شده تا هر عنصری در صفحه که زبان فارسی برایش تعیین شده، با استایل متفاوتی نمایش داده شود.

شبه‌کلاس dir

شبه‌کلاس :dir() عناصر را بر اساس جهت‌گیری (directionality) متن موجود در آنها، انتخاب می‌کند. البته این شبه‌کلاس تنها مقدار معنایی (semantic) جهت‌گیری را ملاک قرار می‌دهد؛ یعنی جهت‌گیری تعریف‌شده توسط خود سند HTML. به عبارت ساده‌تر، شبه‌کلاس :dir() جهت‌گیری تعیین‌شده با استفاده از HTML (صفت dir) را ملاک کار خود قرار می‌دهد و جهت‌گیری تعیین‌شده توسط CSS (پراپرتی direction) را نادیده می‌گیرد. این شبه‌کلاس، دارای یک آرگومان است که می‌تواند یکی از مقادیر rtl به معنای راست‌به چپ یا ltr به معنای چپ‌به‌راست باشد. مثال زیر را ببینید.

CSS

:dir(ltr){
  background-color: yellow;
}

:dir(rtl){
  background-color: powderblue;
}

دقت داشته باشید که رفتار شبه‌کلاس :dir() مشابه انتخابگر صفت [dir=…] نیست. این انتخابگر صفت، عناصر را بر اساس مقدار صریح صفت dir انتخاب می‌کند و عناصر فاقد این صفت را نادیده می‌گیرد. بنابراین، اگر مقداری به صفت dir یک عنصر به ارث رسیده باشد، آن را در نظر نمی‌گیرد. اما شبه‌کلاس :dir() مقداری را که مرورگر برای صفت dir محاسبه می‌کند، ملاک قرار می‌دهد. بنابراین، مقادیر به‌ارث‌رسیده نیز در نظر گرفته می‌شوند.

شبه‌کلاس is

شبه‌کلاس is() لیستی از انتخابگرها را به عنوان آرگومان دریافت کرده و عناصری را انتخاب می‌کند که بتوانند به‌وسیله‌ی یکی از انتخابگرهای این لیست، انتخاب شوند. با استفاده از این شبه‌کلاس، می‌توانیم انتخابگرهای چندگانه‌ی طولانی را به شکل مختصرتر و فشرده‌تری بنویسیم. برای مثال، فرض کنید بخواهیم همه‌ی عناصر header، footer و article که دارای کلاسی مثل demo هستند، انتخاب کنیم. در این صورت یک انتخابگر چندگانه به صورت زیر ایجاد می‌کنیم:

header.demo, footer.demo, article.demo{

}

در یک انتخابگر چندگانه مانند انتخابگر بالا، اگر یکی از انتخابگرها نامعتبر باشد، کل انتخابگر نادیده گرفته می شود. بنابراین، اگر در اینجا مثلاً انتخابگر header را اشتباه تایپ کنیم، نه تنها عناصر header بلکه عناصر footer و article دارای کلاس demo نیز انتخاب نمی‌شوند.

اما به جای انتخابگر چندگانه‌ی بالا، می‌توانیم از یک انتخابگر فشرده‌تر به صورت زیر استفاده کنیم:

:is(header, footer, article).demo{

}

در این روش، چنانچه یکی از انتخابگرهای لیست آرگومان is() نامعتبر باشد، تنها همان انتخابگر نادیده گرفته می‌شود نه کل انتخابگر. پس، اگر مثلاً نام انتخابگر header را اشتباه تایپ کنیم، انتخابگرهای footer و article دارای کلاس demo همچنان بدون مشکل، انتخاب می‌شوند.

شبه‌کلاس not

شبه‌کلاس :not() عناصری را انتخاب می‌کند که با یک لیست مشخص از انتخابگرها مطابقت ندارند. یعنی آرگومان این شبه‌کلاس نیز مانند :is() یک لیست از انتخابگرهاست اما این بار عناصری انتخاب می‌شوند که توسط هیچ‌یک از انتخابگرهای این لیست، انتخاب نمی‌شوند. عملکرد این شبه‌کلاس مانند عملگر نفی یا نقیض در منطق ریاضیاتی است و به همین دلیل، آن را انتخابگر نقیض (negation pseudo-class) نیز می‌نامند.

در مورد شبه‌کلاس :not() چند نکته هست که باید آنها را بدانیم تا با نتایج غیرقابل‌انتظار مواجه نشویم. اجازه دهید ابتدا مثالی ساده از این شبه‌کلاس ببینیم و پس از آن، این نکته‌ها را بیان خواهیم کرد.

CSS

p:not(.test){
  color: red;
}

انتخابگر مثال بالا به معنای انتخاب عناصر پاراگرافی است که دارای کلاس test نیستند.

و اما نکات مربوط به این شبه‌کلاس:

• شبه‌کلاس :not() را نمی‌توان تودرتو کرد؛ یعنی انتخابگری مثل :not(:not(…)) نامعتبر است.
• با وجودی که آرگومان این شبه‌کلاس می‌تواند لیستی از انتخابگرها باشد اما هنوز از بیش از یک انتخابگر در مرورگرها پشتیبانی نمی‌شود. بنابراین، به جای انتخابگری مثل :not(.foo, .bar) باید از انتخابگر :not(.foo):not(.bar) استفاده کنیم.
• این انتخابگر تنها روی یک عنصر اعمال می‌شود؛ ما نمی‌توانیم از آن برای مستثنی کردن فرزندان غیرمستقیم استفاده کنیم. برای نمونه، انتخابگر body :not(table) a بر خلاف انتظاری که شاید داشته باشیم، لینک‌های درون table را مستثنی نمی‌کند زیرا عناصر tr همچنان با بخش not() انتخابگر مطابقت دارند.