CSS-sisäkkäisvalitsimet (&)

Määrittely ja käyttö

CSS-sisäkkäisyys (&) Valitsin käytetään elementin tyylejä sovellettavaksi toisen elementin kontekstissa.

Sisäkkäisyys vähentää tarvetta toistaa valitsimia liittyville elementeille.

Esimerkki

Esimerkki 1

Ennen sisäkkäisyyttä sinun täytyy nimenomaisesti ilmoittaa jokainen valitsin, kuten seuraavassa esimerkissä näkyy:

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

Kokeile itse

Esimerkki 2

Sisäkkäisyyden jälkeen valitsin jatketaan, ja liittyvät tyyliohjeet ryhmitellään isäohjeen mukaisesti:

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

Kokeile itse

Vinkki:Jos esimerkissä oleva .box-tyyli on poistettava projektistasi, voit poistaa koko ryhmän ilman, että sinun täytyy etsiä liittyviä valitsimia.

CSS-grammatiikka

vanhemprule {
  css-deklaratiot;
  & lapsirule {
    css-deklaratiot;  } 
}

Tekninen yksityiskohta

Selaintuki