Create a working HTML/CSS for the following nested list format?
Leaf nodes should be green, Parent nodes should be bold red, Root should be like parent with underlined
Add Comment
HTML Code
<!DOCTYPE html> <html> <head> <title>List</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="list"> <ul id="root"> <li>Root</li> <ul id="child"> <li>Child1</li> <ul id="subchild"> <li>Child11</li> </ul> <li>Child2</li> <ul id="subchild"> <li>Child21</li> <li>Child22</li> </ul> <li>Child3</li> <ul id="subchild"> <li>Child31</li> </ul> </ul> </ul> </div> </body> </html>
CSS Code
#root li{
font-weight::bold;
font-family:Arial, Helvetica, sans-serif;
color:red;
text-decoration:underline;
font-size:18px;
}
#child li{
font-weight::bold;
font-family:Arial, Helvetica, sans-serif;
color:red;
text-decoration:none;
font-size:14px;
}
#subchild li{
font-weight::bold;
font-family:Arial, Helvetica, sans-serif;
color:green;
text-decoration:none;
font-size:12px;
}