4 ms·

Nice to see a parent selector in the form of :has. Some people seem to believe such a selector has always existed — at least I see some mentions of it on Stack

by wanda 10y ago

Nice to see a parent selector in the form of :has. Some people seem to believe such a selector has always existed — at least I see some mentions of it on StackOverflow sometimes. Now it looks like finally we will finally be able to do things like: nav:has(>a.active){ background-colour: red } if you wanted to change a navigation bar's background color without JavaScript. :lang seems a bit weird. Seems easier to use a lang= attribute on the root node or data-lang on any node, and then using an attribute selector like so: [lang='jp']{ font-family: 'Noto Sans' } or perhaps: .box { color: #111 } [data-lang='c'].box { color: #f44500 }

gsnedders 10y ago
Note however the different profiles (see https://drafts.csswg.org/selectors-4/#profiles https://drafts.csswg.org/selectors-4/#profiles). Notably, the dynamic profile excludes :has, and that's what's expected to be used for selector matching in CSS in browsers. (:has can't be matched in a single-pass of the document with a single-node lookahead, which is something no browser vendor wants to give up.) The static profile is likely to be used by querySelector and similar. The only thing new with :lang in Selectors 4 is wildcards (with "*"). Note that if you do want to use attribute selectors you likely want to use |= rather than just =. |= allows either the exact value or a string that starts with it followed by "-". :lang exists for similar reasons to :link—making selectors generic, so they can work with things except (X)HTML. I don't get why you'd ever use data-lang rather than lang, though? Notably, data-lang wouldn't get passed through to the AT layer. You can use lang on any element, not just the root.
- Klathmon 10y ago
  Does the profiles thing feel like a really really bad idea to anyone else? Taking CSS and splitting it into parts that can be in the stylesheet and parts that can't seems like it's only going to cause confusion, and won't really help anything. The major reason you'd want something like :has is because you want to style a parent in CSS only. Without that being in the "dynamic profile" it leaves it to JS only, which (if i'm reading things correctly) would be able to do the same thing by doing a lookup on the parent, then doing a lookup in that node for the child which would be faster than how current CSS engines would find that node if they had to start making multiple passes.
  - angry-hacker 10y ago
    They resist the whole parent / has selector avoidance with incremental rendering and performance issues.
acdha 10y ago
:lang (which is actually CSS2 except for the wildcard support) is slightly different than an attribute selector. One difference is that it should handle subtypes seamlessly - e.g. :lang(es) would match <div lang="es-mx"> without the developer having to remember to use [lang*=] or consider whether their expression could match other languages (e.g. did your attempt to select Canadian English (lang=en-ca) match Catalan (lang=ca) or vice versa?). The main reason I use :lang, however, is for inheritance: We don't want Chinese text to be displayed in bold b:lang(zh) { font-weight: normal !important; } will reliably match every time. [lang="zh"] won't without additional work writing and testing selectors and nested content is easy to get wrong in complex documents. I use things like q:lang() for quotations where it's really nice to be consistent across levels of embedded quoting.

by wanda 10y ago

gsnedders 10y ago

Note however the different profiles (see https://drafts.csswg.org/selectors-4/#profiles https://drafts.csswg.org/selectors-4/#profiles). Notably, the dynamic profile excludes :has, and that's what's expected to be used for selector matching in CSS in browsers. (:has can't be matched in a single-pass of the document with a single-node lookahead, which is something no browser vendor wants to give up.) The static profile is likely to be used by querySelector and similar. The only thing new with :lang in Selectors 4 is wildcards (with "*"). Note that if you do want to use attribute selectors you likely want to use |= rather than just =. |= allows either the exact value or a string that starts with it followed by "-". :lang exists for similar reasons to :link—making selectors generic, so they can work with things except (X)HTML. I don't get why you'd ever use data-lang rather than lang, though? Notably, data-lang wouldn't get passed through to the AT layer. You can use lang on any element, not just the root.

Klathmon 10y ago
Does the profiles thing feel like a really really bad idea to anyone else? Taking CSS and splitting it into parts that can be in the stylesheet and parts that can't seems like it's only going to cause confusion, and won't really help anything. The major reason you'd want something like :has is because you want to style a parent in CSS only. Without that being in the "dynamic profile" it leaves it to JS only, which (if i'm reading things correctly) would be able to do the same thing by doing a lookup on the parent, then doing a lookup in that node for the child which would be faster than how current CSS engines would find that node if they had to start making multiple passes.
- angry-hacker 10y ago
  They resist the whole parent / has selector avoidance with incremental rendering and performance issues.

acdha 10y ago

:lang (which is actually CSS2 except for the wildcard support) is slightly different than an attribute selector. One difference is that it should handle subtypes seamlessly - e.g. :lang(es) would match <div lang="es-mx"> without the developer having to remember to use [lang*=] or consider whether their expression could match other languages (e.g. did your attempt to select Canadian English (lang=en-ca) match Catalan (lang=ca) or vice versa?). The main reason I use :lang, however, is for inheritance: We don't want Chinese text to be displayed in bold b:lang(zh) { font-weight: normal !important; } will reliably match every time. [lang="zh"] won't without additional work writing and testing selectors and nested content is easy to get wrong in complex documents. I use things like q:lang() for quotations where it's really nice to be consistent across levels of embedded quoting.