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:
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.
Leave Comment