How to Use the Child Combinator in CSS
How to target exactly the elements you want with CSS combinators!
nanadwumor
- > 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 immediately following siblings (e.g., div + p)
RECOMMENDED ARTICLES
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. The [crayon-69b0cf085c249094992791-i/] selector styles elements that come later in the same parent. Elements...
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...
nth-of-type Pseudo-class
Learn how to use the nth-of-type() pseudo-class to style specific elements with precision and simplicity. The [crayon-69b0cf085cbbb009484979-i/] pseudo-class selects elements by their position among siblings of the same type. It uses the formula...
Child Combinator
The child combinator is used to select a child of a specified parent. The child combinator sign is the “greater than” sign. For example, h2 > em means <em> element that’s a child of <h2>.
|
1 2 3 4 5 6 7 8 9 |
<style>h2 > em { color: red; } </style> <body> <h2>This is an <em>important</em> heading with <span><em>additional</em></span> emphasis</h2> <p>This is some text.</p> </body> |
Output
This styles only the <em> directly within the <h2> but not the <em> that’s within the <span> within <h2>. That is, the word ‘important‘ is colored red.
Note that a space combinator would have styled both <em> elements. That’s
|
1 2 3 |
h2 em { color: red; } |
This selects any <em> element irrespective of where it exists in the food chain — whether it’s directly under <em> or first or second etc grandchild.
Note that the symbol can be surrounded by whitespace or not. That’s h2>em gives same results as h2 > em.
Combining Space and Child Combinator
We can combine a space and a child combinator. For example, we could write the style
For example,
|
1 2 3 |
div.sale p > em { font-decoration : underline; } |
which will target any <em> tag that is a child of <p> element which is a descendant (whether direct or not) of a <div> element which has a class called “sale”.
Adjacent-sibling Combinator
The adjacent-sibling combinator is used to select elements that quickly follow another element or are adjacent to it. For example, the style
|
1 2 3 |
div + p { color: red; } |
will affect only the first <p> element that immediately follows the <div> because it’s adjacent to it.
The above style reads that, select any <p> element that immediately follows a <div> element and make the content red.
The HTML is,
|
1 2 3 |
<div>This is a div element.</div> <p>This is a paragraph immediately following the div element.</p> <p>This is another paragraph.</p> |
Recent Comments