A rather geeky/technical weblog, est. 2001, by Bramus
:is() in complex selectors selects more than you might initially think
Because selector matching in browsers happens from right to left, you might end up with more matches than you expected when using .a :is(.b .c).
:has() and ~
:has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*)
:nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()
:nth-child(An+B [of S]?) is not available in all browsers, but thanks to :has we can polyfill it (to a certain extent)
:has()
Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
:has()
Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.
Jim Nielsen set out to style a bunch of links that appeared before hr elements. As the element tree – generated from a Markdown file – was entirely flat, there are no enclosing section elements to hook onto in order to select those links (using something like section p:last-child a:only-child). The solution? The :has() selector: …
x items
Because I keep forgetting this, an entry on the blog so that my future self can find it back easily: CSS: Want your first 5 list items to be bold? li:nth-of-type(-n + 5) {font-weight: bold;} Start with the # of list items you want to impact, then increment backward with -n. — Estelle Weyl (@estellevw) …
Now that’s a fun little quiz by Vincent Will: A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. Finished my in 04:38:7. Level 8 tripped me up though: didn’t immediately see the pattern and lost more than 2 minutes on it 😅. …
Continue reading “Test your CSS Selector Skills with CSS Speedrun”
:has()
Similar to how you can (ab)use :nth-child() to create “new” CSS selectors, you can leverage :has() to create some typical combinators. Brandon McConnell did just that: y:has(+ x) selects the first preceding y sibling of x: y:has(~ x) selects all preceding y sibling of x: x + y, y:has(+ x) selects the first preceding and …
Continue reading “Magic PostCSS Custom Combinators using :has()“