Social Network for Web Professionals

Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

CSS4 Selectors and Syntax Preview

CSS4 is right now, just a working draft at W3C, but for sure trendy topic that everybody is trying to find more information about.

I have to admit that, can not find probable release date of CSS Level 4, but I suspect that it wont be soon. However, if you want to keep up to CSS4date, I suggest to take a regular check-up at https://dev.w3.org/csswg/selectors4/.

CSS3 took the world overnight, I think every web development blog or website release a tutorial of some kind, CSS3 offered amazing features and capabilities and just imagination is a boarder.
Being realistic, many website still haven't taken an advantage of CSS3 other just don't use the full potential, but even for CSS3 browser support is just close to 100%.

Please take a look at Browser CSS-Selector-Test - https://css4-selectors.com/browser-selector-test/
Right, many developers would say, just learned 3 and now 4 is coming. Well, CSS3 wont be left behind, 4 is just a number, an update.

Selectors overview

A Selector represents a structure. This structure can be used as a condition ( in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.

Selectors may range from simple element names to rich contextual representations.

New CSS4 Selectors

  • Negation pseudo-class
  • Local link pseudo-class selector
  • Time-dimensional pseudo-class selector
  • Indeterminate-value pseudo-class selector
  • Default option pseudo-class selector
  • Validity pseudo-class selectors
  • Optionality pseudo-class selectors
  • Mutability pseudo-class selectors
  • Structural pseudo-class selectors
  • Grid-Structural pseudo-class selectors
  • Attribute case-sensitivity selector
  • Reference combination selector
  • Subject of a selector with
  • Child combinator selector
  • Hyperlink pseudo-class selector
  • Matches-any pseudo-class

Just an Example of Negation pseudo-class

This takes as an argument a simple selector list (combination selectors aren't allowed). It matches an element which is not stated by the passed argument and this negations may not be nested within itself like this invalid example: E:not(:not(F))

Syntax

:not(negation-selector1[, negation-selector2, ...]) {

/* declarations */

}}

In CSS3 was only a single simple selector allowed as argument for :not.

Unfortunately none of the latest browsers support this pseudo-class, yet.

The Matches-Any Pseudo-class: :matches()

The matches-any pseudo-class, :matches(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.

In the fast Selectors profile, only lists of compound selectors are allowed within :matches(): combinators are not allowed. In the complete profile, full complex selectors are allowed.

*|*:matches(*:hover, *:focus)
Conclusion

2nd Example Indeterminate-value pseudo-class

This pseudo-class is called the indeterminate-value pseudo-class which represents the indeterminate state of radio or checkbox elements. This state is set if the checkbox/radio is neither checked nor unchecked, quasi a no pre-selected choice. Another indeterminate state would be an unknown progress meter completion.

indeterminate-value pseudo-class

Logical Combinations

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the selector list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.

CSS example:

In this example, we condense three rules with identical declarations into one.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

 Etc... Really you should check https://dev.w3.org/csswg/selectors4/, there are so many things that I want to describe, but probably 100 articles wont be enough.

There are just few examples of what CSS Selectors 4 can offer. Still untested, I really wanted to see how things look in real time on my browser and in real project, unfortunately most are not yet supported by any browser – desktop or mobile.

Rate this blog entry:
1
The Best SEO Company For You Could Be The One That...
How to Use Tablets for Coding and Web Development

Comments

 
No comments yet
Already Registered? Login Here
Guest
Wednesday, 25 November 2020
If you'd like to register, please fill in the username and name fields.

Captcha Image