Select sibling elements using CSS

If we want to match elements that appear immediately after the first selector, we can use the adjacent sibling selector ( ). Here, both selectors are children of the same parent element.

The syntax of CSS adjacent sibling combinator is as follows:

Selector + Selector{ attribute: /*value*/ }

If we want to select sibling elements under the same parent element, regardless of the position of the second selected element, we can use CSS Universal sibling selector.

The syntax of CSS universal sibling selector is as follows:

Selector ~ Selector{ attribute: /*value*/ }

The following example demonstrates CSS adjacent and general sibling selector properties.

Example

Demonstration

    
  
  
 
Check this
 
Some text in section
 hello 
 
Selected
 
  

Output

This will produce the following results -

Example

Live Demonstration

    
  
  
 
Random text 1
 
Some text in section
 hello 
Selected
 
  
  

Output

This will produce the following results−

The above is the detailed content of Select sibling elements using CSS. For more information, please follow other related articles on the PHP Chinese website!