سلکتورهای پیشرفته

combinators

a + b   /* b که بلافاصله بعد از a است */
a ~ b   /* همهٔ b های بعد از a */
a > b   /* فرزند مستقیم */
a b     /* نواده */

pseudo-class بیشتر

:not(.active) { }
:first-of-type, :last-of-type { }
:checked { }   /* چک‌باکس تیک‌خورده */
:disabled { }

pseudo-element

«بخش»هایی از عنصر را استایل می‌دهد (با ::):

p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }
.box::before { content: "★ "; }
.box::after { content: " →"; }

::before/::after محتوای تزئینی اضافه می‌کنند.

attribute selector

input[type="email"] { }
a[target="_blank"] { }
[data-state="open"] { }

این سلکتورها قدرت زیادی برای استایل دقیق بدون کلاس اضافه می‌دهند.