CSS Selectors I Want To Use NOW!
CSS 4* support for various selectors pops up like weeds on various browsers. But I just learned CSS 3, you say? Welcome to development, where you can never stop learning. Front and center is the move to greatly increase the power and versatility selectors. While selectors have been with us since some of the earliest iterations of CSS, we are talking about a whole new level of pattern matching conditions, pseudo-classes and complexity.
Heavy users of presentational JS/jQuery, will notice the opportunity to offload some of that effort into CSS. While some have harrumphed the blurring of the line between design and development, I’m pretty excited about the enhancement and how we can leverage them to enhance the visitor experience.
*Oh sure, some will make an academic argument that there is no CSS 4 (or spoon); instead splitting CSS into various independent “modules”. This allows each module to be contain a manageable set of features and preventing bottle-necking of the standard’s growth over larger feature sets or more divisive additions/changes… but we all know we are going to call it CSS 4 for convenience sake anyway. 😉
Relational / Parent
Probably high on many people’s wish list, this functions as a reverse parent selector, allowing us to style an element based on content too.
selector1:has(selector2) {
/* declarations */
}
header:has(h1) {
background-color: blue;
}
Indeterminate
Some elements on a page can exist in an indeterminate state. Currently tehese are usually set using JavaScript since HTML/CSS doesn’t have a simple or elegant way of identifying and interacting with them. This would allow us to easily do so with elements like checkboxes, radio buttons, status indicators, etc.
input[type="sometype"]:indeterminate {
/* declarations */
}
input[type="radio"]:indeterminate {
opacity: 0.6;
}
Negation
Beefing up the existing :not from CSS3 to allow multiple selectors, instead of writing tedious multiple rules to match all possible logical conditions.
:not(negation-selector1[, negation-selector2, …]) {
/* declarations */
}
a:not([rel="external"], [rel="nofollow"]) {
color: red;
}
Default
Allows you to target the “default” state of an element and apply styles to it.
option:default {
/* declarations */
}
option:default {
background-color: gray;
}
Matches
Functioning as a reverse :not selector, with support for multiple selectors as an argument and improved maintainability and readability from previous implementations.
:matches(selector1[, selector2, …]) {
/* declarations */
}
section h1, article h1, aside h1 {
color: red;
}
/* Is the same as */
:matches(section, article, aside) h1 {
color: red;
}
Drop
Goes hand in hand with HTML5’s dropzones, allowing styling to them in valid, invalid and active states.
element:drop {
/* declarations */
}
element:drop(active) {
/* declarations */
}
element:drop(valid) {
/* declarations */
}
element:drop(invalid) {
/* declarations */
}
element:drop {
background-color: blue;
}
element:drop(active) {
background-color: yellow;
}
element:drop(valid) {
background-color: green;
}
element:drop(invalid) {
background-color: red;
}
