Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Styling parent <li> and not children CSS – Woocommerce

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?

Tags:

2

Answers


  1. 0

    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. 0

    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