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

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 398
    Comment on it
    Hi all,
    Selector are the basic component in the CSS. Here's a definition of the selector from W3C documentation -
    A Selector represents a structure. This structure can be used as a condition (e.g. 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. - W3C

    Below is some example of some rich contextual representations of CSS3 selectors.


    E[foo^="bar"]

    Html :-

    <p id="val-1">Findnerd</p>
    <p id="val2">Findnerd</p>
    <p id="other-val">Blank</p>
    

    css :-

    p[id^="val"]{
        color: blue
    }
    

    The above CSS selector will select only those p elements who id attribute has value that starts with "val". It mean the first two p tags will colored blue.


    E[foo$="bar"]

    This expression selects HTML elements whose 'foo' attribute has value that ends with the string 'bar'.
    Example:

    Html :-

    <p id="val-1">Findnerd</p>
    <p id="val2">Findnerd</p>
    <p id="other-val">Blank</p>
    

    css :-

    p[id^="val"]{
        color: blue
    }
    

    In this case the last P will blue color.


    E[foo*="bar"]

    This expression selects HTML elements whose 'foo' attribute has any `id`.
    Example:

    Html :-

    <p id="val-1">Findnerd</p>
    <p id="val2">Findnerd</p>
    <p id="other-val">Blank</p>
    

    css :-

    p[id^="val"]{
        color: blue
    }
    

    In this case the allP will blue color.


    :root selector

    :root selector selects the root of the html page which will be the html element. It take higher specificity than a normal element selector.
    Example:

    css :-

    :root{
        background: Blue;
    }
    html{
        background: black;
    }
    

    Blue color on background is applied to <html> element instead of red due to :root's higher specificity.


    :nth-child(n)

    Click here


    E:empty

    This pseudo selector works when an 'E' element which has no children or content inside it.
    Example:

    Html :-

    <div></div>
    <div>
        Hello World!
    </div
    

    Css:-

    div:empty{
        width: 120px;
        height: 120px;
        background: Blue;
    }
    

    E:not(s)

    Expression selects an element `E` which is not a selector `s`.
    Example:

    Html :-

    <p>Findnerd</p>
    <p>Findnerd</p>
    <p>Findnerd</p>
    

    Css:-

        p:not(:last-child){
            color: Blue;
        }
    

    In this case only first two p element will colored blue

    References http://www.htmlxprs.com/post/25/16-css3-selectors-you-should-know

 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: