105 ms·
How is that a limitation of CSS? I would think the previous sibling would historically be harder (but doable with :has), since next sibling is the way CSS has a
by ezekg 3y ago
How is that a limitation of CSS? I would think the previous sibling would historically be harder (but doable with :has), since next sibling is the way CSS has always worked.
.foo:has(+ .foo)
vs
.foo + .foo
- gmaster1440 3y agohttps://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-...
- ezekg 3y agoI'm still not following the limitation. You can use ~ in place of + in my example and it'll work for subsequent siblings too, not just for next sibling.
- gmaster1440 3y agoCan you share a snippet or link to a repl showing how I can use `peer-` to make the label below have a gray text color when the input sibling is disabled? ``` <label for="email">Email</label> <input disabled id="email" type="email" /> ```
- ezekg 3y agoI don't use Tailwind but this is easy with CSS: label:has(+ input:disabled) { color: gray; } Not sure why Tailwind couldn't do this.
- gmaster1440 3y agoAh, I see. May simply be the case then that `:has()` is relatively new and it wasn't possible prior to it's general availability as recent as Dec 2023.