CSS Selectors Cheat Sheet

I CSS er selektorer mønstre, der bruges til at vælge DOM-elementer.

Her er et eksempel på brug af vælgere. I følgende kode, aog h1er vælgere:

a { color: black; } h1 { font-size 24px; }

Snydeark med almindelige vælgere

headvælger elementet med headtagget

.red vælger alle elementer med klassen 'rød'

#nav vælger elementerne med 'nav' Id

div.rowvælger alle elementer med divtagget og klassen 'række'

["]vælger alle elementer med aria-hiddenattributten med værdien "sand"

  • Jokertegnvælger. Vælger alle DOM-elementer. Se nedenfor for brug af det med andre vælgere

Vi kan kombinere vælgere på interessante måder

Nogle eksempler:

li aDOM efterkommerkombinator. Alle atags, der er et barn af litags

div.row *vælger alle elementer, der stammer fra (eller underordnet) af elementerne med divtag og 'række' klasse

li > aForskel kombinator. Vælg direkte efterkommere i stedet for alle efterkommere som efterkommerne

li + aDen tilstødende kombinator. Det vælger det element, der straks går forud for det tidligere element. I dette tilfælde kun den første aefter hver li.

li, aVælger alle aelementer og alle lielementer.

li ~ aSøskendekombinatoren. Vælger aelement efter et lielement.

Pseudo-selektorer eller pseudo-strukturelle klasser

Disse er også nyttige til valg af strukturelle elementer fra DOM.

Her er nogle af dem:

:first-child Målret mod det første element straks inden i (eller underordnet) til et andet element

:last-child Målret mod det sidste element straks inde i (eller underordnet) til et andet element

:nth-child()Målret mod det nte element straks inden i (eller underordnet) til et andet element. Indrømmer heltal, even, odd, eller formler

a:not(.name)Vælger alle aelementer, der ikke hører til .nameklassen

::afterGiver mulighed for at indsætte indhold på en side fra CSS i stedet for HTML. Mens slutresultatet faktisk ikke er i DOM, ser det ud på siden som om det er. Dette indhold indlæses efter HTML-elementer.

::beforeGiver mulighed for at indsætte indhold på en side fra CSS i stedet for HTML. Mens slutresultatet faktisk ikke er i DOM, ser det ud på siden som om det er. Dette indhold indlæses før HTML-elementer.

Vi kan bruge pseudoklasser til at definere en speciel tilstand for et element i DOM. Men de peger ikke alene på et element.

Nogle eksempler:

:hover vælger et element, der svæves af en musemarkør

:focus vælger et element, der modtager fokus fra tastaturet eller programvist

:active vælger et element, der klikkes på med en musemarkør

:link vælger alle links, der endnu ikke er blevet klikket på

:visited vælger et link, der allerede er blevet klikket på

Mere info om nth-child-vælgeren

Den nth-childvælgeren er en css psuedo klasse tager et mønster ved at matche et eller flere elementer i forhold til deres position blandt søskende.

Syntaks

 a:nth-child(pattern) { /* Css goes here */ }

Mønster

De mønstre, der accepteres af, nth-childkan komme i form af nøgleord eller en ligning af formen An + B.

Nøgleord

Ulige

Odd returnerer alle ulige elementer af en given type.

 a:nth-childe(odd) { /* CSS goes here */ }
Også selvom

Selv returnerer alle lige elementer af en given type.

 a:nth-childe(even) { /* CSS goes here */ }

An + B

Returnerer alle elementer, der matcher ligningen An + B for hver positive heltalværdi på n (ud over 0).

For eksempel vil følgende matche hvert 3. ankerelement:

 a:nth-childe(3n) { /* CSS goes here */ }

Spil

CSS Diner er et webspil, der lærer næsten alt, hvad der er at vide om at kombinere vælgere.

Yderligere referencer

Der er mange flere CSS-vælgere! Lær om dem på CodeTuts, CSS-tricks.com eller på Mozilla Developer Network.