A rather geeky/technical weblog, est. 2001, by Bramus
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()“
:has() selector is way more than a “Parent Selector”Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
:is()Continue reading “Three important things you should know about CSS :is()“
::spelling-error and ::grammar-error pseudo-elementsPart of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …
:nth-of-class selectorOne thing that bothers me with CSS :nth-of-type/:nth-child selectors is that you can’t combine them with CSS classes. The selector below for example won’t work as you’d first expect it to work: .bar:nth-child(2) { color: red; } No, the selector above won’t color the second .bar element red, something I had somehow expected it to …
A small utility to demystify CSS selectors, explaining them in plain English. Best part of it all: it updates the URL upon entering a selector so you get directly shareable links 🙂 Selectors Explained →
I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them. Especially the different type of attribute selectors are really powerful: // Seven different types of CSS attribute selectors // This attribute exists on the element [value] // This attribute has …
Matthew Somerville: I followed a link to one of those Guardian end-of-year quizzes on my phone, and had answered a few questions before realising that it was working entirely without JavaScript (I have JavaScript disabled on my phone). I found this very impressive, well done whoever worked on that, and so I thought I would …