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
Types of Elements in CSS
A CSS element may look simple, but knowing whether it is replaced or nonreplaced helps you understand how the browser displays and styles it. CSS elements are broadly divided into replaced and nonreplaced elements. Replaced elements display...
Understanding HTML Elements in CSS
Before you can style a webpage with CSS, you first need to understand the elements that CSS is designed to style. Elements are the building blocks of webpages. Examples include headings, paragraphs, images, links, and buttons. HTML elements are...
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...
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