CSS | element+element Selector

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
element_element

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.