Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS4 selectors

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 486
    Comment on it

    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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: