6.5 Advanced

Nesting

  • Child selector:
    • Example:

      /* Every list's main items */
      ul > li {
        color: green;
      }
      
      /* Nested list's items */
      li > ul > li {
        color: red;
      }
  • Descendant selector:
    • Example:
    /* All items (main or sub) from list */
    ol li {
      font-family: cursive;
    }

Parent selector

  • The CSS tools seen so far allow us to perform a descendant selection based on properties of ancestors, not the other way around.

  • The :has() pseudo-class allows us to perform an ancestor selection based on properties of its descendants.

  • The :has() pseudo-class was added in the year 2022 to most modern browsers.

  • Such recent new feature introduces many posibilities for web design.

  • Examples:

div:has(p:active) {
  outline: 2px dashed limegreen;
}

table:has(td:hover) td:not(:hover) {
  filter: blur(1px);
}