Here’s what I didn’t know about :where() - Manuel Matuzović
I feel like I’m starting to understand how the CSS :where pseudo-class works and why it’s useful. The cogs are slowly turning in my brain.
Tags: pseudoclass
10
Wednesday, January 26th, 2022
Saturday, May 15th, 2021
Can I :has()
This would be such a great addition to CSS—a parent/ancestor selector!
With the combined might of :has(), :not(), nth-child(), and calc(), CSS has become a powerful language for specifying rules to account for all kinds of situations.
Wednesday, January 16th, 2019
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.
Monday, January 7th, 2019
CSS-only multiple choice quizzing - Matthew Somerville
In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the :checked pseudo-class and counter-increment.
Oh, and this is how he realised it wasn’t using JavaScript:
I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium).
Thursday, April 12th, 2018
Notes on `lang` by Taylor Hunt on CodePen
A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.
Friday, March 30th, 2018
Focusing on Focus Styles | CSS-Tricks
A deep dive into the :focus pseudo-class and why it’s important.
Saturday, September 23rd, 2017
[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts
A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.
Thursday, July 7th, 2016
The :target Trick
An alternative to using the :checked pseudo-class for sprinkling in some behaviour—you can use the :target pseudo-class. It might mess up the browser history though.
Thursday, December 17th, 2015
Pseudo and pseudon’t
I like CSS pseudo-classes. They come in handy for adding little enhancements to interfaces based on interaction.
Take the form-related pseudo-classes, for example: :valid, :invalid, :required, :in-range, and many more.
Let’s say I want to adjust the appearance of an element based on whether it has been filled in correctly. I might have an input element like this:
<input type="email" required>
Then I can write some CSS to put green border on it once it meets the minimum requirements for validity:
input:valid {
border: 1px solid green;
}
That works, but somewhat annoyingly, the appearance will change while the user is still typing in the field (as soon as the user types an @ symbol, the border goes green). That can be distracting, or downright annoying.
I only want to display the green border when the input is valid and the field is not focused. Luckily for me, those last two words (“not focused”) map nicely to some more pseudo-classes: not and focus:
input:not(:focus):valid {
border: 1px solid green;
}
If I want to get really fancy, I could display an icon next to form fields that have been filled in. But to do that, I’d need more than a pseudo-class; I’d need a pseudo-element, like :after
input:not(:focus):valid::after {
content: '✓';
}
…except that won’t work. It turns out that you can’t add generated content to replaced elements like form fields. I’d have to add a regular element into my markup, like this:
<input type="email" required>
<span></span>
So I could style it with:
input:not(:focus):valid + span::after {
content: '✓';
}
But that feels icky.
Update: See this clever flexbox technique by Kitty Giraudel for a potential solution.
Sunday, May 10th, 2015
keyboard (div) ✿ dabblet.com
Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.