CSS PLUS SELECTOR; WHAT IS IT?

Tanuj Kumar

Total Post:134

Points:940
Posted by  Tanuj Kumar
 1888  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!

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: CSS plus selector; what is it?

    Syntax:

    element+element

    Example

    div + p
    Hi Tanuj!

    Selects all <p> elements that are placed immediately after <div> elements

    For example

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

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

    From the above example, you can see "background-color" apply on "green" div and color apply on second <p> element only

Answer

NEWSLETTER

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