Meerdere selectoren aaneengeschreven in CSS
Om een element te selecteren dat tegelijkertijd onder meerdere selectoren valt, moet je deze selectoren aaneenschrijven, zonder spatie.
De volgende selector selecteert bijvoorbeeld een element
dat tegelijkertijd de klasse bbb en de klasse
zzz heeft:
.bbb.zzz {
}
En de volgende selector selecteert een kop h2,
dat tegelijkertijd de klasse bbb en de klasse
zzz heeft:
h2.bbb.zzz {
}
Op deze manier kunnen willekeurige constructies van selectoren worden samengesteld. De volgorde van de gebruikte selectoren maakt hierbij niet uit, behalve de regel dat tag-selectoren helemaal aan het begin moeten staan.
Dat wil zeggen, de selectoren .bbb.zzz
en .zzz.bbb zijn bijvoorbeeld volledig equivalent.
Bovendien kunnen selectoren worden gevormd met
gebruik van id, bijvoorbeeld:
#elem.eee, of h2#elem.eee,
of h2.eee#elem, enzovoort.
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:
.bbb.zzz {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:
h2.bbb.zzz {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:
#elem.bbb {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:
#elem.bbb.zzz {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:
h2#elem.bbb {
color: red;
}
