0120 css selektorer
Läs mer om css-selektorer på nedanstående länkar.
Introducing CSS Selectors Bra grunder.
Selectutorial - CSS selectors Grundlig guide. Visar även DOM-trädet.
W3C CSS3 selectors Allt.
The 30 CSS Selectors you Must Memorize Mycket men lite rörigt.
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