skip to Main Content

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?

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search