De CSS :has() pseudo class

Eindelijk, hij is er! De lang verwachte CSS :has() pseudo class.

Een lang verwachte feature voor de meeste front-end developers is een manier om DOM elementen te stijlen afhankelijk van hun afgeleide elementen. De enige manier tot nu toe was door gebruik te maken van JavaScript. Door de release van de nieuwe pseudo class :has() kunnen we dit effect nu eindelijk bereiken zonder JavaScript!

Basis voorbeeld

Stel voor dat we twee typen <article> elementen hebben en we willen een rode rand instellen op alle artikelen die een <img> tag in zich hebben. Door gebruik te maken van :has() pseudo class is dit gemakkelijk te doen.

See the Pen :has() Pseudo class basic example by Rogier (@ikmaakt) on CodePen.

Meer details

Een mooi gedetailleerd artikel over deze nieuwe feature samen met wat goede voorbeelden kan gevonden worden op webkit.org. Bekijk het zeker even.

Status

Deze nieuwe feature is, op het moment van schrijven, beschikbaar in de de laatste versies van Chrome en Safari. Voor de meest actieve status bekijk je caniuse.com.