Jokainen yleinen CSS-valitsin ryhmiteltynä perheen mukaan: perusvalitsimet, yhdistäjät, pseudoluokat, pseudo-elementit ja attribuuttivalitsimet. Jokainen rivi parittaa valitsimen yksiriviseen esimerkkiin.
Valitsin valitsee elementit, joihin sääntö vaikuttaa. Spesifisyys ratkaisee, mikä sääntö voittaa, kun useita vastaa: inline voittaa id:n, id voittaa luokan, luokka voittaa tyypin. Lue valitsimet oikealta vasemmalle: selain vastaa ensin oikeinta osaa ja kulkee sitten yhdistäjiä ylöspäin. Alla olevat perheet kattavat lähes kaiken, mitä kirjoitat.
Viitetaulukko · 53 merkintää
CSS-valitsimetExplained
53 of 53 rows
Perusteet
Jokainen kyseisen tagin elementti.
button { }
Elementit, joilla on kyseinen luokka.
.active { }
Ainut elementti, jolla on kyseinen id.
#header { }
Jokainen elementti.
* { box-sizing: border-box; }
Dokumentin juuri; tavallinen paikka globaaleille mukautetuille ominaisuuksille.
:root { --gap: 1rem; }
Elementit, jotka A tai B täsmää (ryhmittely).
h1, h2, h3 { }
Yhdistäjät
Mikä tahansa A:n jälkeläinen B.
nav a { }
B, joka on A:n suora lapsi.
ul > li { }
B heti A:n jälkeen, sama vanhempi.
h1 + p { }
Jokainen B, joka seuraa A:ta, sama vanhempi.
h1 ~ p { }
Pseudoluokat (tila)
Elementti, kun osoitin on sen päällä.
a:hover { }
Elementti, jolla on näppäimistökohdistus.
input:focus { }
Elementti, joka on vanhempansa ensimmäinen lapsi.
li:first-child { }
n:s lapsi; hyväksyy kaavoja kuten 2n.
tr:nth-child(2n) { }
Elementit, jotka eivät täsmää mihinkään sisäiseen valitsimeen; hyväksyy luettelon Selectors 4:stä lähtien.
li:not(:first-child, .skip) { }
Valittu valintaruutu, radiopainike tai vaihtoehto.
input:checked { }
Poistettu käytöstä oleva syöte tai painike.
button:disabled { }
Vanhempi, joka sisältää täsmäyksen sisäiselle valitsimelle.
li:has(ul) { }
Mikä tahansa luettelon valitsin; spesifisyys on luettelon korkein.
:is(ol, ul) li { }
Sama kuin :is(), mutta nollaspesifisyys.
:where(ol, ul) li { }
Kohdistus, jonka pitäisi näyttää rengas, yleensä näppäimistöltä.
a:focus-visible { }
Elementti, jolla itsellään tai jollakin jälkeläisellä on kohdistus.
form:focus-within { }
Elementti, joka on vanhempansa viimeinen lapsi.
li:last-child { }
Elementti, jolla ei ole sisaruksia.
p:only-child { }
n:s saman tagin sisarus; hyväksyy kaavoja kuten 2n.
p:nth-of-type(2n) { }
Saman tagin ensimmäinen tai viimeinen sisarus.
p:first-of-type { }
Elementti, jolla ei ole lapsia eikä tekstiä.
td:empty { }
Vierailematomat linkit ja jo vieraillut linkit.
a:visited { }
Pakollisiksi merkityt syötteet ja valinnaisiksi jätetyt syötteet.
input:required { }
Syötteet, joiden arvo läpäisee tai ei läpäise omaa validointisääntöään.
input:invalid { }
Syöte, jota käyttäjä ei voi muokata.
input:read-only { }
Elementti, jonka id vastaa URL:n fragmenttia.
#note:target { }
Ryhmän ennalta valittu vaihtoehto tai oletuspainike.
input:default { }
Valintaruutu, jonka skripti on asettanut epämääräiseen tilaan.
input:indeterminate { }
Mikä tahansa sisäänrakennettu elementti tai mukautettu elementti, kun se on rekisteröity.
my-widget:defined { }
Elementti annetulla kielellä.
p:lang(fr) { }
Pseudo-elementit
Muodostettu sisältösolmu ennen elementtiä.
label::before { content: ""; }
Muodostettu sisältösolmu elementin jälkeen.
code::after { content: ";"; }
Tekstilohkon ensimmäinen kirjain.
p::first-letter { }
Syötteen paikkamerkkiteksti.
input::placeholder { }
Tekstilohkon ensimmäinen rivi.
p::first-line { }
Teksti, jonka käyttäjä on korostanut.
::selection { }
Listaelementin luettelomerkki tai numero.
li::marker { }
Alue koko näytön elementin tai dialogin takana.
dialog::backdrop { }
Selaa-painike tiedostosyötteen sisällä.
input::file-selector-button { }
Shadow DOM -osa, jonka isäntä on paljastanut.
my-widget::part(header) { }
Attribuuttivalitsimet
Elementit, joilla on attribuutti, millä tahansa arvolla.
[required] { }
Attribuutti on täsmälleen val.
[type="submit"] { }
Attribuutti alkaa merkkijonosta val.
a[href^="https"] { }
Attribuutti päättyy merkkijonoon val.
a[href$=".pdf"] { }
Attribuutti sisältää merkkijonon val.
a[href*="login"] { }
Välilyönnein erotettu luettelo, joka sisältää val:n.
[class~="badge"] { }
Arvo on täsmälleen val tai alkaa merkkijonosta val ja tavuviivasta.