Home > DeveloperSection > Forums > CSS plus selector; what is it?
Tanuj Kumar

Total Post:134

Points:940
Posted on    April-16-2013 3:17 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1412  View(s)
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!



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-16-2013 8:29 AM

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


Don't want to miss updates? Please click the below button!

Follow MindStick