Samuraisoulification Samuraisoulification - 23 days ago 13
CSS Question

CSS change color of li if it's in the div class

I have a class of div's with the class footer-list, and I need to change all the text of the li to be white.

The html looks like:

<div id="footer-middle-left-right">
<div class="footer-list">
<ul>
<li>FAFSA Guide</li>
<li>Scholarship Finder</li>
<li>State Education</li>
<li>Ready UP</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>Terms of Service</li>
<li>Privacy Settings</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>How it Works</li>
<li>Submit a School</li>
<li>Submit a Professor</li>
<li>Report a Misspelling</li>
</ul>
</div>
</div>


Obviously adding another class element to all the li is overkill, and not maintainable really. Im pretty new to css and can't figure out the correct way to select all the li in the classes.

I tried something like:

.footer-list.li{
color: white;
}


to no avail. Any help about this, suggested reading, or any other css advice would be greatly appreciated! Im more of a back-end guy so this is the first I've really had to worry about css part of this, so it's gotten me a bit lost!

Answer

Actually you are adding a . before li which makes it a class so try this

.footer-list li { /* This selects li inside the class .footer-list */
    color: #fff;   /* Even white is fine */
 }

Or better be specific and use

.footer-list ul li { /* Will apply to li which are inside ul which is inside .footer-list only */
    color: #fff;
 }
Comments