CSS valitsinviittauskäsikirja

CSS-valitsin

CSS-valitsimet käytetään "etsimiseen" (tai valitsemiseen) haluamiasi HTML-elementtejä, joihin haluat asettaa tyylit.

Käytä CSS-valitsintesteriäsi näyttämään erilaisia valitsijoita.

CSS-yksinkertainen valitsin

Yksinkertaiset valitsimet valitsevat elementit elementin nimellä, id:llä ja luokalla. Lisäksi on yleinen valitsin (*)

Valitsin Esimerkki Esimerkki kuvaus
elementti p Valitse kaikki <p>-elementit.
#id #firstname Valitse elementti, jolla on id="firstname".
* * Valitse kaikki elementit.
.class .intro Valitse kaikki elementit, joilla on class="intro".

CSS-ominaisuusvalitsin

Ominaisuusvalitsimet valitsevat HTML-elementit, joilla on annettu ominaisusjoukko.

Valitsin Esimerkki Esimerkki kuvaus
[ominaisuus] [target] Valitse kaikki elementit, joilla on target-ominaisuus.
[ominaisuus=arvo] [target=_blank] Valitse kaikki elementit, joilla on target="_blank"-ominaisuus.
[ominaisuus~=arvo] [title~=flower] Valitse kaikki elementit, joiden title-ominaisuus sisältää sanan "flower".
[ominaisuus|=arvo] [lang|=en] Valitse kaikki elementit, joiden lang-ominaisuuden arvo alkaa "en".
[ominaisuus^=arvo] a[href^="https"] Valitse kaikki <a>-elementit, joiden src-ominaisuuden arvo alkaa "https".
[ominaisuus$=arvo] a[href$=".pdf"] Valitse kaikki <a>-elementit, joiden src-ominaisuus päättyy ".pdf".
[ominaisuus*=arvo] a[href*="codew3c"] Valitse kaikki <a>-elementit, joiden href-ominaisuuden arvossa on "abc"-osio.

CSS sisäänrakennettu valitsin

Valitsin Esimerkki Esimerkki kuvaus
& & Käytä elementin tyyliä toisen elementin kontekstissa