Tag Archives: selectors

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

Recently Stefan Judis shared how to style the browse button of a file selector using the ::file-selector-button pseudo-element TIL – you can style the file input "browse" button using `::file-selector-button`.😲Supported in Firefox, Chromiums starting with 89 & Safari Tech preview.🔗 MDN: https://t.co/56jACY9qK1🔗 Compat data pr: https://t.co/vrFNS4LdISVideo alt: Example of a styled browse button. pic.twitter.com/3YQ0njkX0J— Stefan …

Continue reading “Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools”

Three important things you should know about CSS :is()

Back in 2019 I shared how the CSS :is() selector will simplify things when writing CSS. What I didn’t know back then, and only have learnt quite recently, are these three important facts about CSS :is(): The selector list of :is() is forgiving The specificity of :is() is that of its most specific argument :is() …

Continue reading “Three important things you should know about CSS :is()“

Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements

Part 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 …

Continue reading “Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements”

CSS :nth-of-class selector

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 it to …

Continue reading “CSS :nth-of-class selector”

A Complete Guide to Data Attributes

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 …

Continue reading “A Complete Guide to Data Attributes”

CSS-Only Multiple Choice Quiz

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 …

Continue reading “CSS-Only Multiple Choice Quiz”

How the CSS :is() selector will simplify things

One 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”

The future of CSS: Nesting Selectors

Early March the first Editor’s Draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors) This module describes support for nesting a style rule within another style rule, allowing the inner …

Continue reading “The future of CSS: Nesting Selectors”