Home > DeveloperSection > Articles > css greater than sign

css greater than sign


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 3077  View(s)
Rate this:

CSS Greater Than Sign

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.


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

Follow MindStick