Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Aplicacion del estilo en el padre

Hola, buenas noches. Este es el código propuesto en la clase:

<ul>
          <li class="items">Atención personalizada a los clientes</li>
          <li class="items">Espacio diferenciado</li>
          <li class="items">Localización</li>
          <li class="items">Profesionales calificados</li>
</ul>

Es totalmente correcto o más correcto sería esto?

<ul class="items">
        <li>Atención personalizada a los clientes</li>
        <li>Espacio diferenciado</li>
        <li>Localización</li>
        <li>Profesionales calificados</li>
 </ul>

Consulto para saber y seguir buenas prácticas. Gracias.

3 respuestas

Lo correcto es el de la clase, ya que li -> list item, se refiere a cada uno de los items de una lista, mientras que ul -> unorder list hace referencia a una lista no ordenada.

La clase que se crea como "items" es para editar el estilo de cada uno de los items de una lista, si le aplicas la clase al ul, cambiarías el estilo del espacio de la lista ul , pero no el de sus items.

Hola Santiago, gracias por la respuesta.

Te comento que si aplicas el 'class="items"' al ul, sí, funciona para sus items li.

Ambos códigos que puse arriba funcionan.

La consulta era, saber cual de los dos se considera el adecuado.

Yo te recomiendo que le des clase a cada uno,

<ul class='items__container'>
    <li class='items'>Atención personalizada a los clientes</li>
    <li class='items'>Espacio diferenciado</li>
    <li class='items'>Localización</li>
    <li class='items'>Profesionales calificados</li>
</ul>

De esta manera puedes darle estilos al contenedor de la lista el cual seria el padre y también le di la misma clase a cada item, para que hagas una configuracion global, si necesitas un hijo en especifico, usamos una pseudo clase la cual es :nth-child()

/*Asi le das estilos a todos los elementos de la lista y no creas una clase individual para cada uno*/
.items{
    color: red;
    text-align: center;
}

/* Si necesitas modificar el elemento 2 de la lista haces lo siguiente*/
.items:nth-child(2){
    color: blue;
    text-align: start;
}