Menu
It is a bit embarassing that I cant get my hear round the child selector.How do I target the parent list items in an items-list? I tried div#container > ul li{color: red;} but it changed the color of the entire item list,I was just looking to change the color of the parent items.
Say I want to specify a red color for all the parent list items and blue for all the child list items,how do i go about doing it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#container > ul li{
color: red;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> Parent List Item
<ul>
<li> Child List Item </li>
</ul>
</li>
<li> Parent List Item </li>
<li> Parent List Item </li>
<li> Parent List Item </li>
</ul>
</div>
</body>
</html>
Thank You
730
I would do:
div#container ul li{
color: red;
}
div#container ul li ul li{
color: blue;
}
or even better, assign a class to the ul:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.parentList li{
color: red;
}
ul.childList li{
color: blue;
}
</style>
</head>
<body>
<div id="container">
<ul class='parentList'>
<li> Parent List Item
<ul class='childList'>
<li> Child List Item </li>
</ul>
</li>
<li> Parent List Item </li>
<li> Parent List Item </li>
<li> Parent List Item </li>
</ul>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
