CSS '>' SELECTOR; WHAT IS IT?

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
 1367  View(s)
Ratings:
Rate this:
Hi Everyone!

I have seen many time in css file greater than sign ">", but not understand why used it.
Please provide any suitable demo.

Please help me!

Thanks in advance!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: CSS '>' selector; what is it?

    Hi Ankita!

    Greater than sign used for apply css on element

    Syntax:

    element > element

    Example 

    div > p

    Apply on all <p> elements where the parent is a <div> element

    Syntax

    class > element

    Example

    .a > div

    Apply on all <div> elements where the parent is a <div> with a class 

    For example

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .bg > div {
                background-color: #888888;
            }

            div > p {
                color: #600000;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="red" class='bg' style="height: 150px; border: 2px solid #ff0000;">
                <div id="green" style="height: 60px; border: 2px solid #00ff00;">
                    <p>Greater Than sign (>) CSS Selector demo</p>
                </div>
                <br />
                <div id="blue" style="height: 60px; border: 2px solid #0000ff;">
                    <p>Greater Than sign (>) CSS Selector demo</p>
                </div>
            </div>
        </form>
    </body>
    </html>

    From the above example, you can see "bg" class apply on "green","blue" div not on "red", and which <p> element inside on div that are selected.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!