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
The @import Element – When Is It Used In CSS?
Discover how the [crayon-6acedb8bb953a442426624-i/] rule lets you modularize and combine your CSS files like a pro! Function: The [crayon-6acedb8bb9569556496304-i/] rule loads one stylesheet inside another. Placement: It must always appear before...
The Style Element in CSS
Learn how to quickly add CSS directly to your HTML using the [crayon-6acedb8bba3cd064416786-i/] element without any external files required! Definition: The [crayon-6acedb8bba3ef197368659-i/] element adds embedded CSS directly inside an HTML...
Alternate Stylesheets in CSS
Discover how native HTML and CSS allow users to switch website themes effortlessly without JavaScript! Persistent Stylesheets: Have no [crayon-6acedb8bbb135523859081-i/] and are always active. Preferred Stylesheets: Have a...
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