0

¡Hola Comunidad! :)

Tengo una lista no ordenada < ul > con la siguiente estructura:

- Frutas
    * Manzana
    * Cereza
- Vegetales
    * Espinaca
    * Apio
    * Cebolla
- Lácteos

Quiero aplicar un estilo (font-weight / color) únicamente a los < li > principales (Frutas / Vegetales / Lácteos) sin afectar a los < li > anidados (Manzana / Cereza / Espinaca / Apio / Cebolla). Aquí el HTML que estoy usando:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link href="miestilo.css" rel="stylesheet"/>
        <title>LISTAS</title>
    </head>
    <body>
        <ul id="principal">
            <li>Frutas
                <ul>
                    <li>Manzana</li>
                    <li>Cereza</li>
                </ul>
            </li>
            <li>Vegetales
                <ul>
                    <li>Espinaca</li>
                    <li>Apio</li>
                    <li>Cebolla</li>
                </ul>
            </li>
            <li>Lácteos</li>
        </ul>
    </body>
</html>

Esto en el archivo css ("miestilo.css")

body {
    background-color: #444;
    font-family: sans-serif;
    color: #fff;
}

ul#principal > li{
    font-weight:bold;
    color: #EE91AA;
}

Al verlo en el navegador el estilo aparece aplicado a todos los < li > incluyendo los que están anidados, hice la prueba en diferentes navegadores y se visualiza igual; también intente agregando un id a los < ul > anidados ya que mi regla css hace referencia al id=principal y con esto esperaba que excluyera a los < ul > anidados pero el resultados no cambió. vi este caso en el siguiente video: https://www.youtube.com/watch?v=5iotayt_CC0 (00:46)

¿Les ha ocurrido algo similar usando listas anidadas y el child selector?¿Cómo lo resolvieron? ¡Muchas gracias desde ya! :D

introducir la descripción de la imagen aquí

1 respuesta 1

0

Con este código indicas que se agregue estas propiedades a todos los "ul" y los hijos que este contenga.

Esta parte del codigo que aplicas "ul#principal > li" se esta realizando una duplicidad en la seleccion, primero le indicas que busque los ul de todo el html y luego que encuentre el id llamado "principal" que tenga hijos "li", lo cual realmente no existe en el html, por eso CSS solo toma el ul y aplica las propiedades a todos indiscriminadamente.

ul#principal > li{
font-weight:bold;
color: #EE91AA;
}

Recomiendo seas muy especifico en tu CSS con el uso de .clases o #ID

Investiga sobre la metodología BEM (Block, Element, Modifier) te ayudará mucho a tener un CSS ordenado y sin problemas, espero te sea de ayuda.

Para lograr lo que requieres el código deberías de quedar de esta forma:

body {
    background-color: #444;
    font-family: sans-serif;
    color: #fff;
}

.principal_headerList {
    font-weight:bold;
    color: #EE91AA;
}

.principal__elementList {
    color: #ffffff;
    font-weight: 100;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link href="miestilo.css" rel="stylesheet"/>
        <title>LISTAS</title>
        <link rel="stylesheet" href="./stackoverflow.css">
    </head>
    <body>
        <ul id="principal">
            <li class="principal_headerList">Frutas
                <ul class="principal__elementList">
                    <li>Manzana</li>
                    <li>Cereza</li>
                </ul>
            </li>
            <li class="principal_headerList">Vegetales
                <ul class="principal__elementList">
                    <li>Espinaca</li>
                    <li>Apio</li>
                    <li>Cebolla</li>
                </ul>
            </li>
            <li class="principal_headerList">Lácteos</li>
        </ul>
        <script src="./stackoverflow.js"></script>
    </body>
</html>

1
  • ¡Mil gracias @joseluis18vs! :D Investigaré sobre la metodología BEM como me indicas, me ha sido de mucha ayuda, gracias.
    – gabs
    Commented el 28 ago. 2022 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.