Greater than sign used for apply CSS on HTML element in optimized way.
With element
Syntax:
element > element
Example
div > p
Apply on all <p> elements where the parent is a <div> element.
With class
Syntax
class > element
Example
.a > div
Apply on all <div> elements where the parent is a <div> with a class (.a).
With id
Syntax
id > element
Example
#a > div
Apply on all <div> elements where the parent is a <div> with an id (#a).
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 runat="server">
<title></title>
<style type="text/css">
.bg>div {
background-color: #E5E5E5;
}
div>p {
color: #600000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="idred" class='bg' style="height: 150px; border: 2px solid #ff0000;">
<div id="idgreen" style="height: 60px; border: 2px solid #00ff00;">
<p>Greater Than sign (>) CSS Selector demo</p>
</div>
<br />
<div id="idblue" style="height: 60px; border: 2px solid #0000ff;">
<p>Greater Than sign (>) CSS Selector demo</p>
</div>
</div>
</form>
</body>
</html>
Note: If you do not include or change “doctype” than it not supported by lower version of IE (IE 8, IE 7 and IE 6).
See Figure:
From the above figure, you can see "bg" class applyed on "idgreen","idblue" div not on "idred" div, and which <p> element inside on div on that CSS are applied.
Leave a Comment