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.
