Selectoren op verwantschap bij genesting LESS

Laten we bekijken hoe we in LESS bij genesting verschillende selectoren kunnen toevoegen die elementen selecteren op basis van verwantschap. Zie de voorbeelden.

Voorbeeld

Child selector:

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

Resultaat van compilatie:

styles.cssdiv > p {

}

Voorbeeld

Adjacent sibling selector

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

Resultaat van compilatie:

styles.cssdiv + p {

}

Voorbeeld

General sibling selector:

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

Resultaat van compilatie:

styles.cssdiv ~ p {

}

Praktische opdrachten

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

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