Relacion jerárquica entre clases CSS

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:

<ul class="main-nav">
	<li class="main-nav__item"><a href="./pathToPage">Item 1 de lista</a></li>
	<li class="main-nav__item"><a href="./pathToPage">Item 1 de lista</a></li>
	<li class="main-nav__item"><a href="./pathToPage">Item 1 de lista</a></li>
	<li class="main-nav__item"><a href="./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.