The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4”. Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier.
Selectors level 4 specification is an evolving draft, not yet an official standard. You can’t rely on draft document as it may change in the future.
Parent selector
There was no way to select the parent container in CSS but in the W3C draft of selectors level 4, parent selector has been introduced. You can select element other than the last one. Now, it’s easy to style the fieldset on the focus of an input element.
$fieldset input:focus{
background: #e1e1e1;
}
Any syntax of CSS selectors level 4 mentioned here, could be changed. It’s only a draft. Like “$” symbol before the selector [$fieldset], it was proposed in the first draft which got changed to “!” exclamation mark after the selector [fieldset!]
Logical combinator – :matches, :not
It takes the selectors list as an argument and apply the styles.
/* Basic simple use*/
a:link, a:hover, a:visited, a:focus{
color:green;
}
/* can be written as */
a:matches(a:link, a:hover, a:visited, a:focus){
color:green;
}
/*more better use*/
h1:matches(.section1, .section2, .section3){
background: red;
}
/*same with negation*/
h1:not(.section1, .section2, .section3){
background: black;
}
Location pseudo-classes- :any-link, :local-link
This controls the styling of link more smartly, any-link combine the a:link and a:visited link into one. And using local-link, you can get a different link style of any specific page or based on the domain.
a:link,
a:visited {
color: green;
}
/*same can be written as*/
a: any-link {
color: green;
}
Grid-structural pseudo classes – :column, :nth-column, :nth-last-column
Applying style to a column in a grid will be possible in CSS selector level 4. Imagine a grid with different plan options and a specific column (plan) need to be highlighted.
:column(.highlighted) {
background: yellow;
}
/*alternate column color*/
:nth-column(even) {
background: gray;
}
If there is not sufficient implementer interest, some features may be dropped during the CR period
Conclusion
Addition of these cool selectors is really mouth-watering but It will take some time to standardize these specifications. At least we will have to wait till the browser vendors start implementing these features. This speedy evolution of the web making it more interesting and dynamic.
Leave a Reply