Skip to content
Related Articles

Related Articles

Improve Article

CSS | element > element Selector

  • Last Updated : 03 Jan, 2019

The element > element selector in CSS is used to style only those elements which are the children of specific parent.

The operand on the left of > is the parent and the operand on the right is the children element.

Note: Elements that are not directly a child of the specified parent, are not selected.

Syntax:

element1 > element2 {
    //CSS Property
}

Example 1:






<!DOCTYPE html>
<html>
    <head>
        <title>
        CSS element>element Selector
        </title>
        <style>
            div > p {
                color:white;
                background: green;
                padding:2px;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <div>
            <h2 style = "color:green;">
                CSS element > element Selector
            </h2>
              
            <p>
                A computer science portal for geeks.
            </p>
        </div>
          
        <p>Geeks Classes is a quick course to cover 
        algorithms questions.</p>
          
        <p>This paragraph will not be styled.</p>
    </body>
</html>

Output:
ele-ele
Example 2:




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS element > element Selector
        </title>
        <style>
            p > span {
                color:white;
                background: green;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
        <h2>
            CSS element > element Selector
  
        </h2>
          
        <p>A computer science <span>portal for geeks.</span></p>
</body>
</html>

Output:
ele-ele2

Supported Browsers: The browser supported by element > element selector are listed below:

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer 7.0

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up