Complexe selectors

Je kan heel specifiek kiezen welk element een bepaalde stijlregel meekrijgt. Een overzicht van handige selectors, met voorbeelden:

Selector	Betekenis
p,ul	Geldt voor p elementen én ul elementen.
ul li	Geldt alleen voor li elementen die in een ul element zitten.
body > a	Geldt alleen voor a elementen die op het eerste niveau in een body element zitten. Deze selector geldt dus niet voor a elementen die een niveau dieper, bijvoorbeeld in een p element, zitten.
p + ul	Geldt alleen voor ul elementen die vlak na een p element komen.
p.speciaal.belangrijk	Geldt alleen voor p elementen de class speciaal én de class belangrijk hebben.
img[src$=".png"]	Geldt alleen voor img elementen waarvan het src attribuut eindigt met .png. Alle png-afbeeldingen, dus.
a[href^="https://"]	Geldt alleen voor a elementen waarvan het href attribuut begint met https://. Alle beveiligde links, dus.
a[href*="scratch.edu"]	Geldt alleen voor a elementen waarvan het href attribuut ergens scratch.edu bevat. Dus links naar iets op de Scratch website.