Open In App

How to style every element that have adjacent item right before it ?

Improve
Improve
Like Article
Like
Save
Share
Report

You can easily style every element which has an adjacent item right before it using the Adjacent Sibling Selector (+). The adjacent sibling selector is used to select the element that is adjacent or the element that is next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

Note: Selectors are used for selecting the HTML elements in the attributes and the adjacent sibling selector (+) is one type of selector. The syntax is straightforward, just two or more selectors separated by a plus (+) symbol.

Prerequisite:  Good understanding of combinator

Syntax:

former_element + target_element { style properties }  

Example 1: The adjacent sibling selector will only select sibling elements directly following another sibling element. Both elements share the same parent ( center ).

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        /* styling the paragraph just after
           image tag p elements directly
           following after img elements
           will be selected Both share
           same parent */
        img+p {
            color: red;
        }
 
        img+p+p {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <img src=
            alt="GeeksforGeeks logo" />
 
        <p>I'm 1st paragraph after Image</p>
 
        <p>I'm 2nd paragraph after Image</p>
 
        <p>I'm 3rd paragraph after Image</p>
    </center>
</body>
</html>


Output:

Example 2: In this example, we are using combinator property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
     
    <style>
        h1 {
            color: green;
        }
 
        div+p {
            color: #009900;
            font-size: 32px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
 
        div {
            text-align: center;
        }
 
        p {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>Welcome to GeeksforGeeks</h1>
        <div>Adjacent sibling selector property</div>
        <p>GeeksforGeeks</p>
 
        <div>
            <div>child div content</div>
            <p>G4G</p>
        </div>
 
        <p>Geeks</p>
        <p>Hello</p>
    </center>
</body>
</html>


Output:



Last Updated : 31 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads