Apply CSS to ul class then li then a
Question
I want to change the color of my footer items using CSS. I want to change the color of all a items as I have given same classes but do not know how to apply CSS. Here is the code:
<div class="col-lg-3 col-md-6 footer-links">
<h4>Our products</h4>
<ul class="footer-items">
<li><a href="#">About trade banner printing</a></li>
<li><a href="#">Delivery options</a></li>
<li><a href="#">Frequently added questions</a></li>
<li><a href="#">What our customer think of us</a></li>
<li><a href="#">Register for trade access</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Promo and Details</h4>
<ul class="footer-items">
<li><a href="#">About trade banner printing</a></li>
<li><a href="#">Delivery options</a></li>
<li><a href="#">Frequently added questions</a></li>
<li><a href="#">What our customer think of us</a></li>
<li><a href="#">Register for trade access</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>About Our Services</h4>
<ul class="footer-items">
<li><a href="#">About trader banner printing</a></li>
<li><a href="#">Delivery options</a></li>
<li><a href="#">Frequently added questions</a></li>
<li><a href="#">What our customer think of us</a></li>
<li><a href="#">Register for trade access</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
3 answers
solution1
1 2021-07-27 10:19:15
You can change the color of the links text like this:
ul.footer-items li a {
color: red;
}
The color is applied to all <a> tags that have parent <li> that have partent <ul> with class footer-items .
solution2
1 ACCPTED 2021-07-27 10:20:21
.footer-items > li > a {
/*Your style here*/
}
with . you get the class. with > you get the immediate child.
You need not write for every item individually, all matching items will get the styles.
solution3
0 2021-07-27 10:27:32
You do not have to give a class to the ul if you want to change all of the text color in ul a rater give the ul a css
ul a { color:green; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <div class="col-lg-3 col-md-6 footer-links"> <h4>Our products</h4> <ul> <li><a href="#">About trade banner printing</a></li> <li><a href="#">Delivery options</a></li> <li><a href="#">Frequently added questions</a></li> <li><a href="#">What our customer think of us</a></li> <li><a href="#">Register for trade access</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links"> <h4>Promo and Details</h4> <ul> <li><a href="#">About trade banner printing</a></li> <li><a href="#">Delivery options</a></li> <li><a href="#">Frequently added questions</a></li> <li><a href="#">What our customer think of us</a></li> <li><a href="#">Register for trade access</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links"> <h4>About Our Services</h4> <ul> <li><a href="#">About trader banner printing</a></li> <li><a href="#">Delivery options</a></li> <li><a href="#">Frequently added questions</a></li> <li><a href="#">What our customer think of us</a></li> <li><a href="#">Register for trade access</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.