Selectoren op verwantschap bij geneste SASS

Laten we bekijken hoe we in SASS bij het nesten verschillende selectoren kunnen toevoegen die elementen op basis van verwantschap selecteren. Bekijk de voorbeelden.

Voorbeeld

Child-selector (direct kind):

styles.scssdiv {
  > p {
    color: red;
  }
}

Compilatieresultaat:

styles.cssdiv > p {
  color: red;
}

Voorbeeld

Adjacent sibling-selector (aangrenzend broertje of zusje)

styles.scssdiv {
  + p {
    color: red;
  }
}

Compilatieresultaat:

styles.cssdiv + p {
  color: red; 
}

Voorbeeld

General sibling-selector (algemeen broertje of zusje):

styles.scssdiv {
  ~ p {
    color: red;
  }
}

Compilatieresultaat:

styles.cssdiv ~ p {
  color: red;
}

Praktische opdrachten

styles.scssul {
  color: red;
  
  > li {
    padding: 20px;
  }
}

styles.scssdiv {
  ul {
    > li {
      padding: 20px;
    }
  }
}