
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
A rather geeky/technical weblog, est. 2001, by Bramus
:has()
selector is way more than a “Parent Selector”: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
selectorThe Problem One 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 …
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 …
:is()
selector will simplify thingsOne of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for …
Continue reading “How the CSS :is()
selector will simplify things”