Plus sign used for apply CSS on HTML element in optimized way.

With element
Syntax:

element + element    

Example

div + p

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

With class
Syntax

class + element

Example

.a  +  div

 Selects all <div> elements that are placed immediately after “a” class elements

With id
Syntax

Id + element

Example

#a  +  div

Selects all <div> elements that are placed immediately after “a” id elements

For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="idred" class="bg" style="height: 50px; border: 2px solid #ff0000;">
        </div>
        <div id="idgreen" style="height: 50px; border: 2px solid #00ff00;">
        </div>
        <div id="idblue" 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> 
Doctype for IE 8, IE 7 and IE 6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
See Figure:

 CSS Plus Sign (+)

From the above example, you can see "background-color" apply on "idgreen" div that are immediate element of “idred” div and color apply on immediate <p> element only.

  Modified On Nov-30-2017 04:12:07 AM

Leave Comment