Lahat ng karaniwang CSS selector, pinangkat ayon sa pamilya: basic, combinators, pseudo-class, pseudo-element, at attribute selector. Pinapares ng bawat hilera ang selector sa halimbawang isang linya.
Pumipili ang selector ng mga elementong sakop ng isang rule. Tinutukoy ng specificity kung aling rule ang mananalo kapag marami ang tumugma: tatalo ng inline ang id, tatalo ng id ang class, tatalo ng class ang type. Basahin ang mga selector mula kanan pakaliwa: inuugma muna ng browser ang pinakakanang bahagi, tapos aakyat sa mga combinator. Saklaw ng mga pamilya sa ibaba ang halos lahat ng isusulat mo.
Talaan ng sanggunian · 53 mga entry
Mga CSS SelectorExplained
53 of 53 rows
Basic
Bawat elementong may ganyang tag.
button { }
Mga elementong may ganyang class.
.active { }
Ang nag-iisang elementong may ganyang id.
#header { }
Lahat ng elemento.
* { box-sizing: border-box; }
Ang ugat ng dokumento; ang karaniwang lugar ng mga global custom property.
:root { --gap: 1rem; }
Mga elementong tinutugma ng A o B (pagpapangkat).
h1, h2, h3 { }
Mga Combinator
Anumang B na inapo ng A.
nav a { }
B na direktang anak ng A.
ul > li { }
B na kaagad pagkatapos ng A, parehong parent.
h1 + p { }
Bawat B na sumusunod sa A, parehong parent.
h1 ~ p { }
Mga Pseudo-class (estado)
Ang elemento habang nasa ibabaw nito ang pointer.
a:hover { }
Ang elementong may keyboard focus.
input:focus { }
Elementong unang anak ng parent nito.
li:first-child { }
Ang ika-n anak; tumatanggap ng formula tulad ng 2n.
tr:nth-child(2n) { }
Mga elementong hindi tumutugma sa alinmang panloob na selector; tumatanggap ng listahan simula Selectors 4.
li:not(:first-child, .skip) { }
Naka-check na checkbox, radio, o option.
input:checked { }
Input o button na naka-disable.
button:disabled { }
Parent na naglalaman ng tugma sa panloob na selector.
li:has(ul) { }
Anumang selector sa listahan; ang specificity ay ang pinakamataas sa listahan.
:is(ol, ul) li { }
Pareho sa :is(), pero zero ang specificity.
:where(ol, ul) li { }
Focus na dapat may ipakitang ring, karaniwang mula sa keyboard.
a:focus-visible { }
Elementong ang sarili nito o alinmang inapo nito ay naka-focus.
form:focus-within { }
Elementong huling anak ng parent nito.
li:last-child { }
Elementong walang kapatid.
p:only-child { }
Ang ika-n kapatid na pareho ng tag; tumatanggap ng formula tulad ng 2n.
p:nth-of-type(2n) { }
Ang unang o huling kapatid na pareho ng tag.
p:first-of-type { }
Elementong walang anak at walang teksto.
td:empty { }
Mga link na hindi pa nabibisita at mga link na nabisita na.
a:visited { }
Mga input na minarkahang required at mga inputang naiwang optional.
input:required { }
Mga input na ipinapasa o bumabagsak sa sariling validation rule.
input:invalid { }
Input na hindi ma-edit ng user.
input:read-only { }
Elementong ang id ay tumutugma sa URL fragment.
#note:target { }
Ang paunang piniling option o default na button ng isang grupo.
input:default { }
Checkbox na inilagay ng script sa indeterminate na estado.
input:indeterminate { }
Anumang built-in na elemento, o custom element kapag na-register na.
my-widget:defined { }
Elementong nasa ibinigay na wika.
p:lang(fr) { }
Mga Pseudo-element
Node ng nilalamang nabuo bago ang elemento.
label::before { content: ""; }
Node ng nilalamang nabuo pagkatapos ng elemento.
code::after { content: ";"; }
Ang unang titik ng bloke ng teksto.
p::first-letter { }
Ang placeholder na teksto ng isang input.
input::placeholder { }
Ang unang linya ng bloke ng teksto.
p::first-line { }
Ang tekstong na-highlight ng user.
::selection { }
Ang bullet o numero ng isang list item.
li::marker { }
Ang lugar sa likod ng fullscreen na elemento o dialog.
dialog::backdrop { }
Ang browse na button sa loob ng file input.
input::file-selector-button { }
Bahagi ng shadow-DOM na inilabas ng host.
my-widget::part(header) { }
Mga Attribute selector
Mga elementong may ganyang attribute, anuman ang value.
[required] { }
Eksaktong katumbas ng val ang attribute.
[type="submit"] { }
Nagsisimula sa val ang attribute.
a[href^="https"] { }
Nagtatapos sa val ang attribute.
a[href$=".pdf"] { }
Naglalaman ng val ang attribute.
a[href*="login"] { }
Listahang hiwalay sa espasyo na kasama ang val.
[class~="badge"] { }
Ang value ay eksaktong val o nagsisimula sa val na may sunod na hyphen.