Geek asks and answers

CSS child selector, how to configure only parent elements and child elements

It is a little confusing that I cannot get my hearing around the child selector. How do I target the parent of a list in a list of items? I tried div#container > ul li{color: red;}, but changed the color of the entire list of elements, I was just looking for the color color of the parent elements.

Let's say I want to indicate red for all elements of the parent list and blue for all elements of the list of child elements, how can I do this?

<!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

+3
source share
7 answers

I would do:

 div#container ul li{  
   color: red;  
 }
 div#container ul li ul li{  
   color: blue;  
 }

or even better to assign a class to 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>
+4
source

Try the following:

div#container > ul > li{color: red;}

I'm not sure, but you still have to redefine the child color.

 div#container > ul > li > ul >li{color: black;}
+2

div # container > ul > li {color: red;} .

div # container > ul > li > ul > li {color: blue;} .

,

+1

:

 div#container ul li {  /*parent*/
   color: red;  
 } 
 div#container ul li ul li {  /*children*/
   color: black;  
 }
+1

?

div#container ul li ul li{
    color:black;
}

DEMO

ul

DEMO

0
#container li{ color: black; } /* Default <li> style */

#container > ul > li{ color: red; }
0

div#container > ul > li
{
color: red;
}

, : li, ul, div, id . , . , li, ul li , . .

div#container > ul > li > ul > li
{
color: blue;
}

This selector says, reading from left to right: select li, which is a child of ul, which is a child of li, which is a child of ul, which is a child of div, that has an id attribute with the value container, and set the color to blue. This redefines integrity.

0
source

More articles:


All Articles