what are css selectors' levels? are there any difference between level 3 and level 4?

user_14917917 0
Viewed 281

I can't understand what is point in the CSS selector's levels. and I want to know the answer.

I have a reference about it but i can't figure it out how this works or how they relate to each other??

css-selectors css
2 Answers

From the specification

Cascading Style Sheets does not have versions in the traditional sense; instead it has levels. Each level of CSS builds on the previous, refining definitions and adding features

In CSS, each new level is adding new feature to the previous one. As simple as that. Starting from the CSS Level 3 this logic will be applied to each module:

CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.

From this level on modules are levelled independently: for example Selectors Level 4 may well be completed before CSS Line Module Level 3. Modules with no CSS Level 2 equivalent start at Level 1; modules that update features that existed in CSS Level 2 start at Level 3.

CSS selectors Level 4 is the latest Specification written for CSS selectors and it's an improvement of the Level 3. You can clearly see that each level is adding new selectors.

You don't really need to bother with Levels. All you need to know is the selectors and how to use them and especially their browser support. (a useful tool that can help you: https://caniuse.com/)

Below the Specification of each level:

https://www.w3.org/TR/selectors-4/

https://www.w3.org/TR/selectors-3/

You can also find at the end of the last specification a section called Changes Since Level 3

user_86203330

CSS selectors are just different ways to select an element to apply some styles to it. As you can see here there are 4 levels and level 4 still seems to be in working draft status.

I can't understand what is point in the CSS selector's levels

Well, these new selectors will help in selecting elements that might be difficult to select with the existing selectors.

For example, the attribute case-sensitivity looks interesting as we can select in a case-insensitive way:

[attribute='value' i]
user_97651670
Related