HI all,

As we all knows CSS33 describes the look and formatting of a document written in a markup language very well but now the time is coming for CSS4.

Because it is still in WORKING DRAFT in W3C so all selector is not compatible with all browser. But definitely it will helps you.

So below is some example selector of CSS4.

Mutability pseudo-class

The pseudo-class mutability represents elements whose contents are user-alterable or even not. :read-only represents mostly the biggest part of a site: the user-non-alterable content. :read-write represents input elements which are user-alterable or the in HTML5 introduced contenteditable attribute which allows the user to edit content.

Syntax :-

:read-only {
        /* declarations */
    }
    :read-write {
        /* declarations */
    }

Example :-

:read-only {
    font-family: Verdana, Arial, sans-serif;
   color:red;
}

:read-write {
    font-family: Trebuchet MS, Times New Roman, sans-serif;
    color:green;
}

Browser support

Placeholder pseudo-class

The placeholder pseudo-class matches input elements which show a placeholder text.

Syntax :-

    :placeholder-shown {
        /* declarations */
    }

Example :-

:placeholder-shown {
    color: green;
}

::-webkit-input-placeholder {
    color: green;
}

::-moz-placeholder {
    color: green;  
}

:-ms-input-placeholder {
    color: green;  
}

Browser support

Matches-any pseudo-class

This pseudo-class takes as an argument a selector list which is a combination selectors aren't allowed. you create sets of selectors by instituting groups which match all included selectors. Negations may not be nested within itself like this invalid example: E:matches(:matches(F))

Syntax:-

:matches(selector1[, selector2, ]) {
    /* declarations */
}

Example: -

section h1, article h1, aside h1 {
    color: red;
}

/* Is the same as */

:matches(section, article, aside) h1 {
    color: red;
}

/* Working, prefixed examples. Note: Mozilla and WebKit uses their own syntax :-prefix-any */
:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

Browser support

Optionality pseudo-class

This pseudo-class optionality is for form elements which are required or optional. Every input element which isn't :required is selected by :optional.

Syntax:-

:required {
/* declarations */
}

:optional {
    /* declarations */
}

Example: -

<p>:required {
    border: 1px solid red;
}</p>

<p>:optional {
    border: 1px solid gray;
}</p>

Browser support

Range pseudo-class

This pseudo-class is range pseudo-class and matches elements regarding their validation status through its data validity semantics. An element matched through range pseudo-class could have a valid or invalid.

Syntax:-

:valid {
/* declarations */
}

:invalid {
    /* declarations */
}

Example: -

:valid {
    border: 2px solid green;
}

:invalid {
    border: 2px solid red;
}

Here is two email input, first input has a valid value and gets a green border and the second input has a red border because of its invalid value.
Browser support

References

optionality-pseudo-class

matches-any-pseudo-class

mutability-pseudo-class

placeholder-pseudo-class