Websites met stijl
Naslag: element selectors
Op dit naslagblad
De universele selector
* staat voor alle elementen. Het is de zogenaamde universele selector.
voorbeeld 1
* {color: red;}
Van alle elementen wordt de tekst rood.
De element selector
- De selector kan elk willekeurig element zijn, bijvoorbeeld a, of div of b.
- Selecteert alle elementen van de opgegeven soort.
voorbeeld 2
b {color: red;}
Het element b (vet) krijgt rode letters. (Die letters worden us rood én vet.)
- Als eenzelfde eigenschap gedefinieerd wordt door verschillende selectors, dan prevaleert de stijlregel met de meer specifieke selector.
voorbeeld 3
p {color: aqua;}
.extra {color: red;}
In voorbeeld 3 worden de letters van p.extra (de alinea's van class 'extra') rood, niet lichtblauw (aqua).
Alle alinea's die niet van de class 'extra' zijn hebben wel blauwe letters.
De element, element selector
- Een lijst elementen gescheiden door komma's kan worden gebruikt om verschillende elementen van dezelfde (deel-)opmaak te voorzien:
voorbeeld 4
h1, h2, h3, p {color: aqua}
Voorbeeld 4 voorziet de koppen h1, h2, h3 en alinea's p van blauwe letters.
voorbeeld 5
h1, h2, h3 {font-style: i;}
In voorbeeld 5 krijgen h1, h2 en h3-koppen cursieve letters.
In de lijst hoeven niet alleen elementen te staan, het kunnen ook andere enkelvoudige selectors zijn, bv:
voorbeeld 6
p, .groot {....} Voorbeeld 6 selecteert p-elementen (alinea's) én alle elementen van de class 'groot'.
De element1 element2 selector
Bij deze selector worden alle elementen 2 geselecteerd die een descendant zijn van element 1,
in andere woorden alle elementen 2 die zich in element 1 bevinden.
voorbeeld 7
div p {background-color: aqua)
In voorbeeld 7 krijgen alle alinea's in een div-element een blauwe achtergrond.
De element1 > element2 selector
Bij deze selector worden alle elementen 2 geselecteerd die een child (kind) van element 1 zijn,
in andere woorden ale elementen 2 die zich direct binnen element 1 bevinden.
voorbeeld 8
div > p
In de figuur hieronder is het verschil te zien tussen elemen1 div p (links) en div > p.
DIV
Alinea 1
Alinea 2
Alinea 3
div p {background-color: aqua;}
DIV
Alinea 1
Alinea 2
Alinea 3
div > p {background-color: aqua;}
- In het linker voorbeeld: div p worden alle alinea's voorzien van een lichtblauwe achtergrond, ook de alnea's binnen het nav-element.
(De kinderen van de kinderen enz.)
- In het rechter voorbeeld: div > p worden alleen de alinea's die direct 'onder' de div vallen lichtblauw.
De alinea's in nav blijven ongekleurd.