هر انتخابگر رایج CSS، گروهبندیشده بر اساس خانواده: پایه، ترکیبکنندهها، شبهکلاسها، شبهعنصرها و انتخابگرهای ویژگی. هر ردیف، انتخابگر را با یک مثال یکخطی جفت میکند.
انتخابگر، عنصرهایی را برمیگزیند که یک قاعده روی آنها اعمال میشود. وقتی چند قاعده با هم مطابقت دارند، ویژگیمندی (specificity) تعیین میکند کدام برنده است: inline بر id، id بر class و class بر type غلبه میکند. انتخابگرها را از راست به چپ بخوانید: مرورگر ابتدا راستترین بخش را تطبیق میدهد و سپس در ترکیبکنندهها بالا میرود. خانوادههای زیر تقریباً هر چیزی را که مینویسید پوشش میدهند.
جدول مرجع · 53 مورد
انتخابگرهای CSSExplained
53 of 53 rows
پایه
هر عنصر با آن تگ.
button { }
عنصرهایی که آن کلاس را دارند.
.active { }
تنها عنصری که آن id را دارد.
#header { }
همه عنصرها.
* { box-sizing: border-box; }
ریشه سند؛ جای معمول برای ویژگیهای سفارشی سراسری.
:root { --gap: 1rem; }
عنصرهایی که با A یا B مطابقت دارند (گروهبندی).
h1, h2, h3 { }
ترکیبکنندهها
هر B که فرزندِ A باشد.
nav a { }
B که فرزند مستقیم A است.
ul > li { }
B بلافاصله بعد از A، با والد یکسان.
h1 + p { }
هر B که بعد از A میآید، با والد یکسان.
h1 ~ p { }
شبهکلاسها (حالت)
عنصر در حالی که اشارهگر روی آن است.
a:hover { }
عنصری که فوکوس صفحهکلید دارد.
input:focus { }
عنصری که اولین فرزند والدش است.
li:first-child { }
فرزند nاُم؛ فرمولهایی مثل 2n میپذیرد.
tr:nth-child(2n) { }
عنصرهایی که با هیچ انتخابگر داخلی مطابقت ندارند؛ از Selectors 4 فهرست میپذیرد.
li:not(:first-child, .skip) { }
چکباکس، دکمه رادیویی یا گزینهای تیکخورده.
input:checked { }
ورودی یا دکمه غیرفعال.
button:disabled { }
والدی که شامل یک مطابقت با انتخابگر داخلی است.
li:has(ul) { }
هر انتخابگر در فهرست؛ ویژگیمندی برابر بیشترین مقدار فهرست است.
:is(ol, ul) li { }
مانند :is()، اما با ویژگیمندی صفر.
:where(ol, ul) li { }
فوکوسی که باید حلقه نشان دهد، معمولاً از صفحهکلید.
a:focus-visible { }
عنصری که خودش یا یکی از فرزندانش فوکوس دارد.
form:focus-within { }
عنصری که آخرین فرزند والدش است.
li:last-child { }
عنصری بدون خواهر و برادر.
p:only-child { }
فرزند nاُم از همان تگ؛ فرمولهایی مثل 2n میپذیرد.
p:nth-of-type(2n) { }
اولین یا آخرین خواهر/برادر از همان تگ.
p:first-of-type { }
عنصری بدون فرزند و بدون متن.
td:empty { }
پیوندهای بازدیدنشده و پیوندهای از قبل بازدیدشده.
a:visited { }
ورودیهای اجباریشده و ورودیهای اختیاری مانده.
input:required { }
ورودیهایی که مقدارشان قواعد اعتبارسنجیشان را میگذراند یا شکست میدهد.
input:invalid { }
ورودیای که کاربر نمیتواند ویرایش کند.
input:read-only { }
عنصری که id آن با بخش fragment نشانی اینترنتی مطابقت دارد.
#note:target { }
گزینه از پیش انتخابشده یا دکمه پیشفرض یک گروه.
input:default { }
چکباکسی که با اسکریپت در حالت نامعین قرار گرفته.
input:indeterminate { }
هر عنصر داخلی، یا عنصر سفارشی به محض ثبتشدن.
my-widget:defined { }
عنصری به زبان دادهشده.
p:lang(fr) { }
شبهعنصرها
گره محتوای تولیدشده پیش از عنصر.
label::before { content: ""; }
گره محتوای تولیدشده پس از عنصر.
code::after { content: ";"; }
نخستین حرف یک بلوک متنی.
p::first-letter { }
متن جاینگهدار یک ورودی.
input::placeholder { }
نخستین خط یک بلوک متنی.
p::first-line { }
متنی که کاربر هایلایت کرده.
::selection { }
نقطه یا شماره یک مورد فهرست.
li::marker { }
ناحیه پشت عنصر تمامصفحه یا دیالوگ.
dialog::backdrop { }
دکمه مرور درون ورودی فایل.
input::file-selector-button { }
بخشی از shadow-DOM که میزبان آن را افشا کرده.
my-widget::part(header) { }
انتخابگرهای ویژگی
عنصرهایی که آن ویژگی را دارند، با هر مقداری.
[required] { }
ویژگی دقیقاً برابر val است.
[type="submit"] { }
ویژگی با val شروع میشود.
a[href^="https"] { }
ویژگی به val ختم میشود.
a[href$=".pdf"] { }
ویژگی شامل val است.
a[href*="login"] { }
فهرستی جداشده با فاصله که val را در بر دارد.
[class~="badge"] { }
مقدار دقیقاً برابر val است یا با val و یک خط تیره بعد از آن شروع میشود.