Hola amigos! Veremos unos detallitos en este mini-tutorial. La jerarquía de clases se aplica directamente en HTML, independientemente de los estilos que apliquemos en CSS. Miremos un poco de código:
En HTML:
<ulclass="main-nav"><liclass="main-nav__item"><ahref="./pathToPage">Item 1 de lista</a></li><liclass="main-nav__item"><ahref="./pathToPage">Item 1 de lista</a></li><liclass="main-nav__item"><ahref="./pathToPage">Item 1 de lista</a></li><liclass="main-nav__item"><ahref="./pathToPage">Item 1 de lista</a></li></ul>En CSS:
.main-nav {
margin-top: 10px;
list-style: none;
padding-left: 0; /*Alineacion de nav hacia la izquierda*/background-color: aqua;
}
.main-nav__item {
display: inline-block;
}
La clase “main-nav” se encuentra dentro del elemento contenedor padre <ul>, por ende todos los estilos aplicados en esa clase aplican a todas las etiquetas que esten dentro de <ul>
La clase “main-nav__item” aplica únicamente al las etiquetas <li> en donde esta contenido como atributo.
