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:

 css greater than sign

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.

  Modified On Nov-16-2017 09:57:44 PM

Leave Comment