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, a
og h1
er vælgere:
a { color: black; } h1 { font-size 24px; }
Snydeark med almindelige vælgere
head
vælger elementet med head
tagget
.red
vælger alle elementer med klassen 'rød'
#nav
vælger elementerne med 'nav' Id
div.row
vælger alle elementer med div
tagget og klassen 'række'
["]
vælger alle elementer med aria-hidden
attributten 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 a
DOM efterkommerkombinator. Alle a
tags, der er et barn af li
tags
div.row *
vælger alle elementer, der stammer fra (eller underordnet) af elementerne med div
tag og 'række' klasse
li > a
Forskel kombinator. Vælg direkte efterkommere i stedet for alle efterkommere som efterkommerne
li + a
Den 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 a
efter hver li
.
li, a
Vælger alle a
elementer og alle li
elementer.
li ~ a
Søskendekombinatoren. Vælger a
element efter et li
element.
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 a
elementer, der ikke hører til .name
klassen
::after
Giver 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.
::before
Giver 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-child
væ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-child
kan 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.