Ejemplo de selectores anidados en CSS

ejemplo-de-selectores-anidados-en-css.markdown

Ejemplo de selectores anidados en CSS

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<nav class="menu">
  <ul>
    <li class="opcion">
      <a target="_blank" href="#">Opción 1</a>
    </li>
    <li class="opcion">
      <a href="#">Opción 2</a>
    </li>
    <li class="opcion">
      <a href="#">Opción 3</a>
    </li>
    <li class="opcion">
      <a target="_blank" href="#">Opción 4</a>
    </li>
    <li class="opcion">
      <a class="menu__opcion__enlace" href="#">Opción 5</a>
    </li>
  </ul>
</nav>

style.css

/* Restricciones de CSS */
nav.menu .opcion > a[target="_blank"] {
  color: red;
}

/* BEM (Block / Element / Modifier) */
.menu__opcion__enlace {
  color: red;
}