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 every element that is placed immediately after (not inside) the first specified element.

Syntax:

element + element {
    //CSS Property

Example 1: In the below program the “p + p” selector selects and styles every pair of consecutive paragraph elements. If there are more than 2 consecutive p elements then it styles the last two.




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS | element+element Selector
        </title>
        <style>
            p + p {
                color:white;
                background: green;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
        <h2>
            CSS | element+element Selector
  
        </h2>
          
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph</p>
        <p>This is the third paragraph</p>
          
        <div>
          <p>This is the forth paragraph</p>
          <p>This is the fifth paragraph.</p>
        </div>
</body>
</html>

Output:
element_element

Example 2:




<!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:
element_element2

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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :