Saludos expertos, mi duda es sobre algo talvez sencillo...
el asunto esta en que estoy tratando de realizar estilos css para mi web de forma lo mas generica posible, pero me encontre con un problemita...cuando utilizo el comando :nth-child() para definir el estilo en el hijo N de un elemento, lo que pasa es que al anidar mas elementos de ese tipo ocurre que cada hijo N de los elementos anidados tambien heredan este estilo...como evito esto? solo quiero que se erede al primer nivel....
en ejemplo...
ul.padre li:nth-child(1){
color:red;
text-transform:uppercase;
}
hasta ahi todo bien, pero en el anidado ocurre lo siguiente:
<ul>
<li> 1ER HIJO COLOR ROJO
<ul>
<li>1ER HIJO ANIDADO HEREDA EL ESTILO</li>
<li>2DO HIJO ANIDADO HEREDA EL ESTILO</li>
<li>3ER HIJO ANIDADO HEREDA EL ESTILO</li>
</ul>
</li>
<li> Segundo Hijo</li>
<li> Tercer Hijo </li>
</ul>
lo que busco es que unicamente el 1er hijo herede ese estilo y no asi los que esten anidados algo asi:
<ul>
<li> 1ER HIJO COLOR ROJO
<ul>
<li>1er hijo anidado sin estili</li>
<li>2di hijo anidado sin estili</li>
<li>3er hijo anidado sin estili</li>
</ul>
</li>
<li> Segundo Hijo</li>
<li> Tercer Hijo </li>
</ul>
como lo hago?
Gracias por cualquier ayuda que puedan ofrecerme.
