Difference between CSS3 and CSS4

SOURCE

Well, it's css4, but in fact the correct one is not CSS4, but Level 4 Selectors, because css 3 like html 3 has been divided into modules, and so it has new changes and of course as always every new thing always comes to favor us in the programmers. Let's get some insight into css4 and its major changes from the previous one.

$ class div One of the new and more powerful changes that happened in css was the possibility to change the style of a tag taking as reference your children, see below and understand better

$ div a.home {...} here we are selecting all the div's that have an element inside the class home, not the a.home

We can also mix with various other elements and calls, without having to fill your id's or class's code.

$ div > span {...} Here we will be styling all divs that have a child span directly;

$ div > span: only-child {...} Here all that have only one span element inside.

: not () O: not () is already present in css 3 but it is important to show its functionality that you can now receive more than one selector.

*: not (h1, strong) {...} here we select the style for all elements except h1, and strong.

input: not (: checked) {...} We give the style for all input, except the checked

: matches () This will undoubtedly make our work much easier, it does nothing else that selects and style for all selectors within one, so you no longer need to do a bunch of lines of code.

div: matches (span, small) {...} Look how incredible, it selects all the span, and small that are inside the div, great not? and still can look better.

: matches (section, div.image) img {...} Here we select all the img that are inside the section and the div with class image

input: matches (: focus,: hover) {...} Here we select the inputs, with their states of: focus that is when we are inside the input and: hover that is when hovering over it.

More on:

CSS Level 4 Selectors

Use the features of CSS 4 today

Selectors Level 4

What's new in this CSS4