Selektor wcięcia CSS (&)

Definicja i użycie

CSS wcięcie (&) Selektor używany do aplikowania stylu do elementu w kontekście innego elementu.

Wcięcie zmniejsza potrzebę powtarzania selektorów dla związanych elementów.

Przykład

Przykład 1

Przed wcięciem, musisz wyraźnie deklarować każdy selektor osobno, jak pokazano poniżej:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

Spróbuj sam

Przykład 2

Po wcięciu, selektor jest przedłużony, a związane reguły stylu są grupowane w regule rodzicielskiej:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

Spróbuj sam

Wskazówka:Jeśli styl .box z przykładu powyżej powinien być usunięty z projektu, możesz usunąć całą grupę, bez konieczności wyszukiwania związanych selektorów.

Gramatyka CSS

parentrule {
  deklaracje CSS;
  & childrule {
    deklaracje CSS;  } 
}

Szczegóły techniczne

Przeglądarka obsługuje