CSS element+element Selector

Last Updated : 03 Aug, 2023

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.

html

<!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 fourth paragraph</p>
        <p>This is the fifth paragraph.</p>
    </div>
</body>
   
</html>

Output:

element_element

Example 2:

html

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