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/
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.
Try the following:
.parentclass ul.childclass li a
or even:
.parentclass ul li a
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;
}
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>
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.
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>
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;
}