---
title: "sibling selector"
url: https://weworkworldwide.com/tutorials/sibling-selector/
description: "If the target element/s of a CSS style is actually the sibling/s of another element, we can use Sibling Selector in order to find those siblings of the spe"
date: 2026-09-14T09:00:04+00:00
source: https://weworkworldwide.com/llms.txt
---
# sibling selector
``` line-numbers
```
If the target element/s of a CSS style is actually the sibling/s of another element, we can use *Sibling Selector* in order to find those siblings of the specified element and apply the style that we want.
– Adjacent Sibling Selector:
``` line-numbers
```
Example: .class-name+ p { }, #id+ ul { }, div+ p{ } etc. The target of this type of selector is only the *NEXT sibling* element after the specified element.
For example “.class-name + p” means the element that is the sibling of another element that has a class attribute’s value of “class-name”.
Note: this
element should be the *NEXT sibling*.
Example:
``` line-numbers
CSS is fun :)
Un-ordered list
```
In the example above, the first element does not have double border because this element comes BEFORE element. But the element that comes after element has double border (this is what we call NEXT sibling).
– General Sibling Selector:
``` line-numbers
Example: .class-name ~ p { }, #id~ul { }, p~h1 { } etc. the target of this type of selector is all those elements that are NEXT sibling of the specified element (Basically they have to have the same parent as the specified element)
```
Example:
``` line-numbers
CSS is fun :)
Un-ordered list
```