> is the child combinator in CSS. That means the selector div, span, p, h1 etc. > .my-class only selects the requested .my-class objects that are nested directly inside a div, span, p, etc. and not any objects that are nested further within.
Here is an illustration:
|
1 2 3 4 5 6 |
<div class="my-div"> <span class="my-class">Some text here</span> <!-- selected class --> <div class="my-div2"> <span class="my-class">More text here</span> <!-- not selected --> </div> </div> |
What’s selected and what’s not:
- Selected – .my-class is located directly inside .my-div – a parent-child relationship is established between both elements.
- Not selected – .my-class (2) is contained by a second div with another class (.my-div2) within the div, rather than the div itself. Although this is a descendant of the div, it’s not a child; it’s a grandchild.
Here is the CSS that modifies the background-color of .my-class(parent-child) to red and leaves the same class unchanged even if they have the same class name (.my-class).
|
1 |
.my-div > .my-class { background-color: red; } |
Let’s take a look at a more complex example to see how it works:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="my-div"> <span class="my-class">Some text here</span> <div class="my-div2"> <span class="my-class">More text here</span> <div class="my-div3"> <p> Sample paragraph </p> <div class="my-div4"> My fourth div <div id="my-id1"> My id goes here... </div> </div> </div> </div> </div> |
|
1 |
.my-div > .my-div2 > .my-div3 > .my-div4 > #my-id1 { background-color: yellow; } |