How to Select the Next Element in CSS ?

Last Updated : 22 May, 2023

Combinators: When classes are combined, they become more specific. This allows you to target classes further down in your template without affecting other elements. Selectors can be combined into a combinator: Combinator of Descendent, Child, Sibling, and General Sibling. The Descendent Combinator is the most well-known and widely used.

Descendant: A (parent) element and an element in a (few) more nested levels are combined in a single selector. The nested level selector does not have to be a child element of the parent selector’s target element. Through ‘unique’ landmarks within your template, you can skip levels of explicit selectors to get to your target selector.

Child: The child selection returns all elements that are children of a given element.

Adjacent sibling: The CSS adjacent sibling selector is used to find an element’s adjacent sibling. It is used to pick only elements that come shortly after the first selector.

General sibling: The tilde (~) sign is used as a separator between the elements. It chooses the elements that come after the elements of the first selector, and they are both children of the same parent. It can be used to select a group of elements that all have the same parent element.

In this article, we are going to use adjacent sibling combinators to get the next element of CSS.

Syntax:

.parent-class + .sibling-class

Example 1: In this example, we’re using the adjacent sibling combinator give me the font size and color of paragraph text. </p> tag follow the </div> to get value.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>How to Select the Next Element in CSS</title> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        div+p { 
            font-size: 30px; 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;">Geeksforgeeks</h1> 
    <div>This is div text</div> 
    <p>This is paragraph text</p> 
  
    <div>This is another div text</div> 
    <p>Paragraph Content 1</p> 
    <p>Paragraph Content 2</p> 
</body> 
  
</html>

Output:

Example 2: In this example, we’re using the adjacent sibling combinator to move the button element next to the description element in each card. The first three rules style the different elements of the card, while the last rule selects the .cardButton element that immediately follows the .cardDescription element, and applies some CSS properties to move the button to the right of the description.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>How to Select the Next Element in CSS - Example 2</title> 
    <style> 
        /* Style the card titles */ 
        .cardTittle { 
            font-size: 24px; 
            margin-bottom: 10px; 
        } 
  
        /* Style the card descriptions */ 
        .cardDescription { 
            font-size: 16px; 
            margin-bottom: 10px; 
        } 
  
        /* Style the card buttons */ 
        .cardButton { 
            padding: 10px 20px; 
            background-color: #008CBA; 
            color: #FFF; 
            border: none; 
            border-radius: 4px; 
        } 
  
        /* Add a hover effect to the buttons */ 
        .cardButton:hover { 
            background-color: #006B87; 
        } 
  
        /* Move the button next to the description */ 
        .cardDescription+.cardButton { 
            display: inline-block; 
            margin-left: 3rem; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div class="card"> 
        <h2 class="cardTittle">Card Title</h2> 
        <p class="cardDescription"> 
            This is a description of the card. 
        </p> 
        <button class="cardButton">Click Me</button> 
    </div> 
  
    <div class="card"> 
        <h2 class="cardTittle">Another Card Title</h2> 
        <p class="cardDescription"> 
            This is another description of a card. 
        </p> 
        <button class="cardButton">Click Me</button> 
    </div> 
</body> 
  
</html>