CODEWITHSUNDEEP
htmlcss
Amy
Amy

Reputation: 946

Unable to target a class within a class in CSS

I'm attempting to target a class within a class but it is having 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 target only the parent class it works just fine. 

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

Is there something I'm missing?

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

Upvotes: 3

Views: 2703

Answers (6)

Ashesh
Ashesh

Reputation: 3599

The CSS:

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

What this actually means:
select all links (<a>) under all list-item elements (<li>) under all unordered-list elements(<ul>) which comes under some element with class .childclass which ultimately belongs to some element with class .parentclass.

The 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 as you can see is that there is no element with class .childclass having the unordered-list element(<ul>).

Instead there is a unordered-list element (<ul>) with class .childclass

ie. <ul class="childclass">

therefore 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 these may be more appropriate for your use, depending on what other classes and elements the rest of your html has and how they are structured. However all are correct ways.

Upvotes: 5

Sleek Geek
Sleek Geek

Reputation: 4686

Just take off the ul from .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>

Note: I took off .parentclass from the code because there is only one instance of .childclass but you may need it if you have .childclass in other locations and you intend to style them differently.

Upvotes: 2

Seth McClaine
Seth McClaine

Reputation: 10040

Your css needs to be

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

The .childclass is attached to the ul

With what you have, the DOM is looking for a tag before the ul with the class childclass such as: 

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

Upvotes: 1

tojowe
tojowe

Reputation: 101

calling class .childclass is your ul already so do

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

or 

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

Upvotes: 1

Jeff Clarke
Jeff Clarke

Reputation: 1397

You're targeting the ul as a child element of .childclass. Try this:

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

or just:

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

Upvotes: 4

Jarno
Jarno

Reputation: 653

Try this:

.parentclass ul.childclass li a

or even:

.parentclass ul li a

Upvotes: 5

Related Questions