Home > DeveloperSection > Articles > CSS Plus Sign (+)

CSS Plus Sign ( )


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

CSS Plus Sign (+)

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.


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

Follow MindStick