A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that …
/* Case sensitive */
a[href*='css-tricks' s] {}
/* Case insensitive */
a[href*='css-tricks' i] {}Adding an s makes the selector case-sensitive and i makes it case-insensitive.
I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support …
I think this is good advice from Silvestar Bistrović:
An enabling selector is what I call a selector that does a job without disabling the particular rule.
The classic example is applying margin to everything, only to have to remove …
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are “selector,” “property,” and “value,” but even as a person who writes …
Having a “parent selector” in CSS is mentioned regularly as something CSS could really use. I feel like I’ve had that thought plenty of times myself, but then when I ask my brain for a use case, I find it …
You can have multiple classes on an HTML element:
<div class="module p-2"></div>Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:
.module { }
.p-2 { }const div = document.querySelector("div");
.foo {
}Programmatically, is:
if (element has a class name of "foo") {
}Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just …
Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:
div, span::butt {
background: red;
}Even though div is a perfectly valid selector, span:butt is not, thus the entire …
“Why the heck don’t we have ::first-column?”
I heard someone ask that the other day and it’s a valid question. I’d even take that question further by asking about ::nth-column() or whatever else relates to CSS columns. We …
I saw Nicole Dominguez tweet this the other day:
say it louder for the people in the backhttps://t.co/prDKo5QaZi
— nicole (@sodevious) January 11, 2018
I wasn’t at this conference, so I have very little context. Normally, I’d consider it …
