How to Select Following Siblings in CSS
What if you want to style a paragraph that is far away from a heading but still inside the same container? CSS has a neat trick for that.
nanadwumor
-
The ~ selector styles elements that come later in the same parent.
-
Elements do not need to be placed right next to each other.
-
It targets “following siblings” in the document structure.
-
Think of it as styling items that appear behind another item in the same group.
RECOMMENDED ARTICLES
How to Use the Child Combinator in CSS
How to target exactly the elements you want with CSS combinators! > selects direct children only (e.g., h2 > em) Space selects all descendants, any depth (e.g., h2 em) Combinators can be combined (e.g., div.sale p > em) + selects...
Descendant Selectors in CSS
Unlock the power of CSS by learning how HTML’s hierarchy shapes every style you apply! HTML elements form nested parent-child structures. Parents are directly above children; ancestors can be higher up. Descendant selectors style elements inside a...
identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...
The general sibling selector is used when you want to style an element that comes after another element, as long as both elements are inside the same parent container. In CSS, this selector is written using the tilde symbol (~).
Think of it like sitting in a classroom: if a teacher tells you that any student who sits after the class monitor can wear a badge, it does not matter whether the student is the next seat or the third seat — as long as the student is somewhere behind the monitor in the same row.
For example, suppose you want to make every <ul> list that appears after an <h2> heading look slanted (italic). You can write:
|
1 2 3 |
h2 ~ ul { font-style: italic; } |
Here, the <h2> and <ul> must both be inside the same container, but the list does not need to be placed immediately after the heading. It can be separated by other elements and still be selected.
Consider this HTML structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <h2>Types of Learning</h2> <p>Not all learning is the same. Some learning is more important than others. Examples include:</p> <ul> <li>Skills that help you solve problems</li> <li>Knowledge that supports your career</li> <li>Ideas that improve daily life</li> </ul> <p>Let us summarize this idea again:</p> </div> |
In this case, the list will be styled because it comes after the heading and shares the same parent <div>. The list does not have to be directly next to the heading — just like how a child sitting three seats behind a parent in a bus is still in the same vehicle.
In simple terms, the general sibling selector says:
“Find elements that come later in the same family group.”
For example,
Recent Comments