10 votes

How to use Webkit's new CSS4 ":has()" selector

1 comment

  1. pseudolobster
    (edited )
    Link
    The :has() selector has been on many web designers' wish lists for decades now, as it gives a huge new level of flexibility in styling things. Webkit has now officially implemented has() in their...

    The :has() selector has been on many web designers' wish lists for decades now, as it gives a huge new level of flexibility in styling things. Webkit has now officially implemented has() in their rendering engine with Safari already implementing it and Chrome to follow suit in version 105 due at the end of the month.

    Personally I'm really excited for this since it opens up a ton of possibilities, but I'm also leery about how it can be used in all sorts of unintended, even malicious ways. Sites that allow users to style things with arbitrary CSS will need to do something to filter this selector or users will now be able to style anything on the page. Surely there's also performance considerations as well since this could possibly be used for complex recursive styling, maybe some kind of "CSS bomb". Or at the very least this will probably end up being used for lazy hacks to override other styles, like another !important.

    5 votes