Home/ Questions/Q 4565492
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:39:04+00:00

It is a bit embarassing that I cant get my hear round the child

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0