0120 css selektorer

Läs mer om css-selektorer på nedanstående länkar.

Teori om släktskap

Bra teori om släktskap.

Ordlista

ancestors
förfäder
Alla element högre upp i DOM
descandants
ättlingar
Alla element som är lägre ner i DOM
parent
förälder
Element direkt över i DOM
child
barn
Alla element direkt under i DOM
sibling
syskon
Delar samma förälder

Uppgift

Gör en hemsida. Gör exempel som visar hur var och en av nedanstående selektorer kan användas. Gör det så att du kan gå tillbaka till denna sida när du vill minnas hur det var man använde en viss selektor.

Släktskapsselektorer

p
typ
eng. type
#mitt-id
id
.min-klass
klass
eng. class
ul p
ättlingar
eng. descendants
div > ul
barn
eng. child
p ~ h2
syskon
eng. sibling
p + p
omedelbart följande syskon
eng. adjacent sibling

Attribut

img[alt]

img[alt=""]

span[lang="en"]

Pseudoklass

LoVe Focus HAte (Link, Visited, Focus, Hover, Active) Alltid i denna ordning.

:link :visited :focus :hover :active

:first-child :last-child :nth-child(n) :nth-last-child(n)

:first-of-type :last-of-type :only-of-type :nth-of-type :nth-last-of-type

:enabled :disabled :checked :target

:root :empty :not(X) :lang

:before :after

pseudoelement

::first-letter ::first-line