Clever Geek Handbook

Can't target a class within a class in CSS

I am trying to target a class within a class but it has no effect.

My attempt:

<style>
.parentclass .childclass ul li a{
    color:red;
    background:black;
}    
</style>

<div class="parentclass">
    <ul class="childclass">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>

However, if I only target the parent class, it works just fine.

.parentclass ul li a{
    color:red;
    background:black;
}

Is there something I am missing?

Here is a JSFiddle link https://jsfiddle.net/74Laypbq/

+3


source to share


6 answers


CSS:

.parentclass .childclass ul li a{
   color:red;
   background:black;
}

What it really means:
select all references ( <a>

) under all elements of the list of items ( <li>

) under all items of the unordered list ( <ul>

) that fall under some element with a class .childclass

that ultimately belongs to some element with a class.parentclass

.

HTML:

<div class="parentclass">
    <ul class="childclass">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>

The problem you are seeing is that there is no element with a class .childclass

that has an unordered list ( <ul>

) element .

Instead, there is an unordered list element ( <ul>

) with the class.childclass

t. <ul class="childclass">



so the correct way is:

.parentclass ul.childclass li a{
   color:red;
   background:black;
 }

OR

.parentclass .childclass li a{
   color:red;
   background:black;
 }

OR

.parentclass ul li a{
   color:red;
   background:black;
 }

one of them might be more appropriate for your use, depending on what other classes and elements the rest of your html is and how they are structured. However, all the right paths.

+5


source


Try the following:

.parentclass ul.childclass li a


or even:

.parentclass ul li a
+5


source


You are targeting ul

as a child .childclass

. Try the following:

.parentclass ul.childclass li a{
  color:red;
  background:black;
}

or simply:

.parentclass .childclass li a{
  color:red;
  background:black;
}
+4


source


Just take ul

off .parentclass .childclass ul li a

and it will work.

.childclass li a {
    color: red;
    background: black;
}    
      

        
        
        
      

    
<div class="parentclass">
    <ul class="childclass">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>
Run codeHide result


Note: I stripped .parentclass

off the code because there is only one instance .childclass

, but you might need it if you have it .childclass

elsewhere and you intend to style them differently.

+2


source


Your css should be

.parentclass  ul.childclass li a{
    color:red;
    background:black;
}

.childclass

tied to ul

With what you have, the DOM looks for a tag before ul

the class childclass

, for example:

<div class="parentclass">
  <div class="childclass">
     <ul>
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
     </ul>
   </div>
</div>
+1


source


the calling class .childclass

is yours ul

already this way

.parentclass ul li a {
  color:red;
  background:black;
}

or

.parentclass .childclass li a {
  color:red;
  background:black;
}
+1


source






More articles:


All Articles