And what’s really important is the error-handling model for this pattern. If you use a selector that the browser doesn’t understand, the browser will simply skip over that set of rules. It won’t break, it won’t throw an error to the user; it’ll just ignore the whole selector. If you use a property the browser doesn’t understand, that’s fine, it just skips onto the next rule. And if you use a value it doesn’t understand, that’s fine, it just skips onto the next rule again. It doesn’t break. It’s such a beautifully simple pattern, and yet immensely powerful. And this is how we get new CSS features all the time. And we can start adding those new CSS features before they’re supported everywhere. It’s the power of simplicity.
— Jeremy Keith
CSS selectoren
- universele selector: *
- typeselector
- klasseselector: .
- id-selector: #
- nakomelingselector: spatie
- kindselector: >
- broer/zus selector: ~
- opeenvolgende broer/zus selector: +
- groeperen: ,
- attribuutselector: []
- pseudo-elementen: ::before en ::after
- pseudo-klassen: :hover enz
Video Web Dev Simplified
In een filmpje van een twintigtal minuten geeft Web Dev Simplified een goed overzicht van de meest gebruikte selectoren. In de commentaar bij deze film kan je een mooi overzicht downloaden als PDF (2,1 MB) ofwel in lichte versie of in donkere versie (ik vind de donkere versie echt wel mooi!).
In de video maakt Kyle een klein HTML foutje. Alles wat hij toont i.v.m. selectoren blijft wel werken, maar er is toch iets in zijn HTML code dat niet zou valideren. Bekijk eerst onderstaand filmpje. Vind je de fout?
Kyle zet op een bepaald moment in zijn ul een span element. Dat is niet toegelaten. In een ul (of ol mogen alleen li elementen staan. In die li zou
dan wel een span mogen staan natuurlijk.
Leuke oefening: CSS diner
Deze oefening is al wat ouder, maar nog steeds wel zinvol om te doen. Ga
ervan uit dat er HTML elementen table, apple, orange enz. bestaan. Schrijf nu de juiste selectoren om de juiste dingen te selecteren.
Naar het einde toe worden de opgaves redelijk moeilijk. Ga naar de oefening CSS diner.
Ondersteuning van nieuwe selectoren?
CSS als taal breidt voortdurend uit. Designers en developers vragen bepaalde nieuwe functionaliteiten. Die vraag gaat dan naar het W3C die beslissen of iets een ‘recommendation’ wordt. Vervolgens is het aan de browsermakers om die nieuwe eigenschap te implementeren. Er is één bron waar je kan opzoeken welke browsers een eigenschap al ondersteunen https://caniuse.com. Aan jou dan op te beslissen of je die nieuwe eigenschap in een productiesite al opneemt …
Een nieuwe selector waar veel mensen zitten op te wachten is :has(). Men noemt dat de ‘relationele pseudoklasse’. Zoek op wat die juist
selecteert en waarom dat zo handig zou kunnen zijn. Ga vervolgens naar https://caniuse.com en zoek op welke browser dit al ondersteunt.
Het nut van deze selector is dat die toelaat om een parent te
selecteren op basis van een kind. Zo selecteert a:has(>img) alle a elementen die een img kind bevatten.
Voorlopig (februari 2022) ondersteunt alleen safari versie 15.4 deze selector.
Benieuwd om te zien hoe snel de andere browers zullen volgen!
Update februari 2024: ondertussen wordt deze :has selector
zo goed als algemeen in alle browsers ondersteund en kan je hem gewoon
in je CSS-bestand gebruiken.
Meer info
Uitgebreide info over selectoren: