CSS Dahil Etme Seçicileri (&)

Tanım ve Kullanım

CSS Dahil Etme (&) Seçici, bir elementin başka bir elementin bağlamında tarzı uygulamak için kullanılır.

Dahil edilme, ilgili elementler için tekrarlanan seçicilerin gereksinimini azaltır.

Örnek

Örnek 1

Dahil edilmeden önce, her seçiciyi ayrı ayrı açıkça beyan etmek zorundasınız, aşağıdaki gibi:

.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;
}

Kişisel olarak deneyin

Örnek 2

Dahil edilmiş hale getirildikten sonra, seçiciler devam eder ve ilgili stil kuralları ana kurallar içinde gruplanır:

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

Kişisel olarak deneyin

İpucu:Eğer örnekteki .box tarzı projenizden kaldırılmalıysa, ilgili seçicileri aramak zorunda kalmadan tüm grubu silebilirsiniz.

CSS Grameri

parentrule {
  css ifadeleri;
  & childrule {
    css ifadeleri;  } 
}

teknik ayrıntılar

Sürüm: CSS Nesting Modülü

tarayıcı destekler

Chrome Edge Firefox Safari Opera
120 120 117 17.2 106