0

I want the first element to be bold and to affect that I used nth:child(1). But for some reason the elements in the <ul> are becoming bold too. Why is that happening and how to fix this bug?

.sub-box1 :nth-child(1) {
  font-weight: bold;
}
<div class="sub-box1">
  <a>Lorem ipsum dolor sit<i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
  <p>Lorem ipsum dolor sit</p>
  <ul>
    <li><a>Lorem ipsum dolor sit</a></li>
    <li><a>Lorem ipsum dolor sit</a></li>
  </ul>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
gamer beast
  • 123
  • 5

1 Answers1

2

You have to add the nth-child pseudo-class to the li element like this:

li:nth-child(1) {
  font-weight: bold;
}
<div class="sub-box1">
  <a>Lorem ipsum dolor sit<i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
  <p>Lorem ipsum dolor sit</p>
  <ul>
    <li><a>Lorem ipsum dolor sit</a></li>
    <li><a>Lorem ipsum dolor sit</a></li>
  </ul>
</div>

The :nth-child pseudo-class should be read as "An element that is the nth-child of its parent"

PiFanatic
  • 233
  • 1
  • 4
  • 14