Styling parent <li> and not children CSS - html

Question

I am trying to make the title, that has it's own CSS class bold. However, also the children are getting the style. Code:
<ul class="product-categories">
<li class="cat-item cat-parent">
<ul class="children">
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
So i tried to add .cat-parent {font-weight: bold;} however, all children are getting bold too. Same if i tried adding :first-of-type.
1: Why are the children getting the style, even though they don't have the css class "cat-parent"
2: What should I do to make it work?

Answer 1

In CSS the child element gets the style of the parent element until a styling is specified for the child element. Example
.parent{
color: red;
}
<div class='parent'>
Parent
<div class='child'>Hello<div>
</div>
To handle this, you must specify a style for the child; see example below.
.parent{
color: red;
}
.child{
color: blue;
}
<div class='parent'>
Parent
<div class='child'> Child </div>
</div>

Answer 2

There's a couple ways to solve this. You can add styling to the .children class by either doing font-weight: normal; or even font-weight: initial;.
.cat-parent {
font-weight: bold;
}
.children {
font-weight: normal;
font-weight: initial;
}
<ul class="product-categories">
<li class="cat-item cat-parent">parent
<ul class="children">
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>