0

I have the following link structure for my categories:

<ul>
  <li class="current-cat cat-parent">
    <a href="#">Parent-Cat</a>
    <ul class="children">
      <li class="cat-item cat-item-71">
        <a href="#">Children-Cat</a>
      </li>
    </ul>
   </li>
 </ul>

Now I want only the current-cat class to change the color of it's a element:

#outer-section .outer-div ul .current-cat a {
  color: red;
}

The problem is, that the children (cat-item cat-item-71) gets changed, too. How can I prevent that and change only the parent a of the current-cat?

manifestor
  • 1,352
  • 6
  • 19
  • 34

2 Answers2

3

Use the direct child selector: .foo > .bar

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first.

Documentation

.current-cat > a {
  color: red;
}
 <ul>
  <li class="current-cat cat-parent">
    <a href="#">Parent-Cat</a>
    <ul class="children">
      <li class="cat-item cat-item-71">
        <a href="#">Children-Cat</a>
      </li>
    </ul>
   </li>
 </ul>

Note that I didn't use the whole selector (#outer-section .outer-div ...) for the example since you only provided the HTML structure from the ul element.

Quentin Veron
  • 3,079
  • 1
  • 14
  • 32
-1

You can use the > that will prevent the inheritance:

  #outer-section .outer-div ul .current-cat > a { 
       color: red; 
    }




<ul>
  <li class="current-cat cat-parent">
   <a href="#">Parent-Cat</a>
     <ul class="children">
       <li class="cat-item cat-item-71">
         <a href="#">Children-Cat</a>
       </li>
     </ul>
  </li>
</ul>
Guy Louzon
  • 1,175
  • 9
  • 19