CSS selector with deep level

user_7611663 0
Viewed 1582

in the following html/css code i want to select all elements "row" only on level 1 and not deeper. But the child selector also selects the nested "row" elements to? How can i select only level 1 "row" elements?

.content > .row
{
  background-color: green;
}
<div class="content">
  <div class="row">Level 1 - Row 1</div>
  <div class="row">Level 1 - Row 2
    <div class="row">Level 2 - Row 1</div>
    <div class="row">Level 2 - Row 2</div>
  </div>
  <div class="row">Level 1 - Row 3</div>
</div>

css-selectors css html
2 Answers

That's the expected behavior. Because it inherits background-color from parent element. But you can change the child element background-color

.content > .row
{
  background-color: green;
}
.content > .row > .row{
  background-color: white
 }
<div class="content">
  <div class="row">Level 1 - Row 1</div>
  <div class="row">Level 1 - Row 2
    <div class="row">Level 2 - Row 1</div>
    <div class="row">Level 2 - Row 2</div>
  </div>
  <div class="row">Level 1 - Row 3</div>
</div>

user_50819180

The selector is working correctly, the green background is applied to only the parent row but the children row elements display it too. You can easily override that.

.content > .row {
  background-color: green;
}
.content > .row .row { background-color: red; }
<div class="content">
  <div class="row">Level 1 - Row 1</div>
  <div class="row">Level 1 - Row 2
    <div class="row">Level 2 - Row 1</div>
    <div class="row">Level 2 - Row 2</div>
  </div>
  <div class="row">Level 1 - Row 3</div>
</div>

user_78678220
Related