Background:
In the past, mid of 1995, Microsoft introduced its first internet browser for WWW users to browse internet stuff. From then and so on we are witnessing so many versions of internet explorer and its competitors in the market. Reason to launch web browsers (IE & all others) was to allow users to surf on internet hence so many organizations started to develop web browsers to entertain users in different ways. Every browser possesses its own salient features which differentiate it from other web browsers and makes users to use it.
As technology kept growing with the passage of time, we experienced so many features in web development. HTML has been updated to HTML5, many frameworks of JS are introduced.To show HTML elements in a stylish way Cascading Styles were introduced. As many HTML elements have their own nature to show on browsers with default properties. CS was used to nullify the default behaviors of HTML elements and show in a stylish way.
CSS (Cascading Style Sheet) is a language which is used to present HTML elements in fashionable ways. Few years ago CSS3 has hit the market with its new amazing features which helped developers to develop beautiful layouts for all the devices including mobiles. Currently in modern era, CSS level 4 is making its room to enter market regardless the factor many browsers are still not able to support full features of CSS3. But CSS is all about selectors in all levels. First let’s talk about selectors.
What Are Selectors?
Pattern(s) matching against elements in tree are CSS selectors. In HTML nested tags are used to make structure of a web document, in CSS tree structure is used to select tags to style.
In level 4 CSS some new pseudo-classes have been introduced.  Let’s break into new features.
Logical Compositions: :matches, :not
The word logical itself is describing its features. Now we’ll be able to combine as many selector trees as we want, in one line. We should be thankful to this selector which allows us to combine and make one group instead of making so many trees.
Previously
.main-nav li a, .main-nav li a:hover, .main-nav li a:visited,
.main-nav li a:focus{ color: black; } Now
.main-nav li a:matches(.link, :hover, :visited, :focus){ color: black; } Isn’t it easy like 2+2 = 4? Now all the four instructions are written in just one instruction. It will apply black color to the link with class active, visited anchor, focused anchor and hovered anchor.
The other logical compositor is :not pseudo selector. Although this pseudo selector was introduced previously in css3 but in level4 it has new use of it.
span:not(.red, .pink){
color:black;
}
This will apply black color to all the spans but not to those having red and pink class.
Location Pseudo-Classes: :any-link, :local-link
What do you understand by its name? Example below will make you understand.
.article a:visted, .article a:hover{
color:blue;
}
Now it can be done it the following way:
.article a:any-link{ color:blue; } Now it will give blue color all the links present in .article element.
Further, we have local-link pseudo class. It is fruitful to color the links in breadcrumb. Let’s understand it with an example.
Suppose the address bar is https://tenoblog.com/category/year/date/title.
Breadcrumbs: Home/category/year/date/title
.breadcrumbs :local-link(0){ color:red; }
.breadcrumbs :local-link(1){ color:black; }
.breadcrumbs :local-link(2){ color:blue; }
.breadcrumbs :local-link(3){ color:green; }
.breadcrumbs :local-link(4){ color:yellow; }
Now all the links will have different colors.
Home = red, category = black, year = blue, date = green respectively.
Time-Dimensional Pseudo-Classes: :past, :current, :future
Now you will be wondering what this pseudo class will do. This is the best for readers to concern which paragraph is being read. Suppose there are some paragraphs on a webpage and what these pseudo classes can do.
p:past{color:red;}
p:current{color:green;}
p:future{color:blue;}
In this case, the paragraph which is currently being read and spoken will be highlighted (karaoke-style). Further this is used for subtitles in videos to highlight the spoken words for the WebVTT video format.
UI State Pseudo-Class: :indeterminate
While filling web form we notice that check boxes and radio buttons have only two states either checked or not checked which can be styled with following code.
checkbox:checked{border: 1px solid green;}
checkbox:not(:checked)</span>{border: 1px solid red;}
But ever consider what if we need to style unused checkbox or radio button? CSS level 4 have the solution for it.
checkbox:indeterminate{border: 1px solid blue;}
Grid-Structural Pseudo-Classes: :column, :nth-column, :nth-last-column
Let me take you back to history when HTML was started, in start all the layouts were table based. In modern era table less coding is used and table layout coding is omitted. But still tables are used to show some data with. As we know tabular data is <tr> row oriented and columns are missing, so we are unable to style columns only. But we must be thankful this new CSS level 4. Now we can style columns with this new feature, and make some fun with grid-based structure.
:column(.table){ background:red;}
:nth-column(odd){background: green;}
Every cell in table (with class .table) will have red background, and every odd cell will have green background.
Parent Selector!
By its name what comes in your mind ? What Parent selector can do to our styling? This selector is going to save a lot of time and some JS work too. This is one of the powerful specification of CSS level 4. This selector will let you do some dynamic work for specific conditions. For example if you want to change body font-color on hovering a specified anchor then we need some JS work to manipulate it. But with this very selector we can change styles of parents by its child element.
body #header a.color-change:hover{ color:red; }
body! #header a.color-change:hover{ color:red; }
First, it will change color of the anchor to red while it is hovered.
Second, it will change the color of the text in body tag while anchor .color-change is hovered inside header tag with id header. Isn’t interesting ? Well, it is going to developers a a lot that will save lot of time, lot of JS, lot of code.
Browser Support:
But all features are still under consideration, so far browser vendors are looking into it to make is possible to run all these specifications and make compatible for latest browsers. As it’s not good choice to use the produce while it is still in progress or under construction. We are hoping that soon it will be live to help developer round the globe.
Conclusion
Did you notice? new features are a lot interesting, I must say these all are like mouth watering deals for a developer to use. Personally, I am looking forward for the official release to utilize these in my upcoming tasks. It is going to change the future of coding. You can further check for the updates here:
We have so many other new features that we’ll discuss in our next article.