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
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-697b39760bfaf685200954-i/] pseudo-class selects elements by their position among siblings of the same type. It uses the formula...
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
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