CSS4 Selector

Overview

The CSS4 Selectors specializes a large number of revisions since CSS 3. That is the first draft of the spec likely changed in numerous ways before it becomes a recommendation itself and there are browser implementations. Let’s have a quick dig into the draft and see what has changed.

CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting and there are many useful updates to be found. Let’s have a look at what new CSS4 selectors and features will be available to us in future browsers!

Some Useful Property In Css4 Selector

Matches-any pseudo-class

This matches-any pseudo-class  which takes as an argument a selector list. It lets you create sets of the selectors by groups which match all included the selectors.

Input:

<h1>Matches-any pseudo-class</h1>
<section>
    <h1>Section: Hello World!</h1>
    <p>But I must explain to you how...</p>
</section>
<article>
    <h2>Article: Hello World!</h2>
    <p>But I must explain to you how...</p>
</article>
<header>
    <h3>Header: Hello World!</h3>
    <p>But I must explain to you how...</p>
</header>
<aside>
    <h1>Aside: Hello World!</h1>
    <p>But I must explain to you how...</p>
</aside>

CSS:

:matches(section, article, aside) h1 {
    color: red;
}
:-moz-any(section, article, aside) h1 {
    color: red;
}
:-moz-any(section, article, aside) h2 {
    color: green;
}
:-moz-any(section, article, aside) h3 {
    color: blue;
}
:-webkit-any(section, article, aside) h1 {
    color: blue;
}

Indeterminate-value pseudo-class

This indeterminate-value pseudo-class which represents the indeterminate state of radio or checkbox elements. This state is the set of the checkbox or radio is neither checked or unchecked.

Input:

<h1>Indeterminate-value pseudo-class</h1>
<label for="test">Label</label>
<input type="checkbox" id="test" />

<script type="text/javascript">
    document.getElementById("test").indeterminate = true;
</script>

CSS:

:indeterminate {
    opacity: 1;
}

Attribute case-sensitivity

This attribute case-sensitivity selector is mostly equivalent to the CSS2 attribute selector but difference between to the case-sensitivity within to ASCII range. It selects an element using the given attribute value case-sensitivity.

Input:

<h1>Attribute case-sensitivity</h1>
<a href="test.pdf">Test</a>
<a href="test.PDF">Test</a>
<a href="test.pDF">Test</a>
<a href="test.html">Test</a>
<a href="test.xml">Test</a>

CSS:

a[href$="pdf" i] {
    color: red;
}

Direction pseudo-class

This dir pseudo-class will match elements by its direction based on the document     language. Currently these are left-to-right and right-to-left common value while left-to-right and right-to-left.

Input:

<h1>Direction pseudo-class</h1>
<div dir="ltr">Test</div>
<div dir="rtl">Testing</div>

CSS:

:dir(ltr) {
    color: green;
}
:dir(rtl) {
    color: blue;
}

Scope pseudo-class

This scope pseudo-class can be represented by any element that is in the contextual     references element set and if the contextual references element set is empty :scope is equivalent to :root.

Input:

<header>      
    <div>
        <style scoped>
            :scope { background-color: blue; }
        </style>
        <p>Inside the scope</p>
    </div>
    <div>
        <p>Outside of the scope</p>
    </div>
</header>

CSS:

:scope {
    background-color: #000;
}