Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 04 Aug, 2021

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 adjacent sibling selector (+) is one type of selector. The syntax is straightforward, just two or more selectors separated by a plus (+) symbol.

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

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 after 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :