EN
CSS - style nested elements on first level only
0
points
In this article, we would like to show you how to style nested elements on first level only using CSS.
Quick solution:
.parent > .child {
background: yellow;
}
Note:
The
>selector is used to select the element with a specific parent.
Practical example
In this example, we use child combinator (>) that selects elements matched by the second selector that are the direct children of elements matched by the first.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.parent > .child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
parent's element body
<div class="child">child's element body</div>
<div class="child">child's element body</div>
</div>
<div class="parent">
parent's element body
<div class="child">child's element body</div>
<div class="child">child's element body</div>
</div>
</body>
</html>