İç içe yerleştirme

CSS stil kurallarını iç içe yerleştirmek, stil sayfalarınızı daha düzenli, okunması daha kolay ve bakımı daha kolay hale getirebilir.

Genel Bakış

Seçiciler hakkında bilgi edindiğinize göre artık bunları stil sayfalarınızda daha iyi düzenlemenin bir yolunu merak ediyor olabilirsiniz. Sitenizdeki bir "özellik" bölümündeki öğelere stil uyguladığınızı düşünün. İç içe yerleştirme ile bu stilleri .feature kuralı içinde şu şekilde gruplandırabilirsiniz:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

Bu, her stili ayrı ayrı yazmaya eşdeğerdir:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

İç içe yerleştirme, gerektiği kadar derin olabilir.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

Gruplandırma ve ilişki oluşturma

İç içe yerleştirme, stil kurallarını daha kısa ve öz bir şekilde gruplandırmanıza ve aralarında ilişki kurmanıza olanak tanır.

İç içe yerleştirilmiş kural, varsayılan olarak alt öğe birleştiricisi olarak dıştaki kurala bağlanır. İlişkileri değiştirmek için iç içe yerleştirilmiş kurallardaki seçicileri kullanın.

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

& seçiciyle açık ilişkiler tanımlama

Stil kurallarını iç içe yerleştirirken daha açık olmak için & seçiciyi de kullanabilirsiniz. & simgesini üst öğe seçiciyi temsil eden bir sembol olarak düşünebilirsiniz.

.feature {
 & button {
    color: blue;
  }
}

Bu, stilleri aşağıdaki gibi yazmaya eşdeğerdir:

.feature button {
  color: blue;
}

& gerektiğinde

& olmadan, iç içe yerleştirilmiş seçiciler üst seçicinin alt seçicileri olur. Bileşik seçiciler oluşturmak için & gereklidir.

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

Bağlamı da değiştirebilir ve & seçiciyi alt öğe seçicinin sonuna veya her iki tarafına da yerleştirebilirsiniz.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

Son örnekte, .my-component sınıfına sahip bir öğenin içindeki resimlere stil ekliyoruz. Bir öğeye class veya id ekleyemediğiniz bir proje üzerinde çalışıyorsanız bu özellik yararlı olabilir.

İç içe yerleştirme ve özgüllük

:is() gibi, iç içe yerleştirme seçicisi de üst öğenin seçici listesindeki en yüksek özgüllüğe sahip seçicinin özgüllüğünü alır.

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

İlk kural, #main-header ve .intro öğelerinin içindeki tüm bağlantıları hedefleyerek bu bağlantılara yeşil renk verir.

İkinci kural, .intro öğesindeki bağlantıları mavi yapmak için bunu geçersiz kılmaya çalışır.

Her kuralın özgüllüğüne baktığımızda bu durumun neden işe yaramadığını görebiliriz.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

İlk kuralın seçici listesinde id olduğu ve iç içe yerleştirilmiş kurallar en yüksek özgüllüğe sahip seçicinin özgüllüğünü kullandığı için bu kuralın özgüllüğü ikinci kuraldan daha yüksektir. Bağlantılar, #main-header seçicisi olan bir öğenin içinde olmayan a öğeleri için bile yeşildir.

Geçersiz iç içe yerleştirme

:is()'ya benzer şekilde, iç içe yerleştirme seçicisi sözde öğeleri temsil edemez.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

blockquote ve sahte öğelerinin her ikisinde de navy renkli metin ve kenarlıklar olmasını beklersiniz ancak durum böyle değildir. & seçicisi sözde öğeleri temsil edemediğinden, iç içe kenarlık stilleri yalnızca alıntı bloğuna uygulanır.

& ve tür seçicileri kullanarak bileşik seçiciler oluştururken tür seçici, aralarında boşluk olmadan önce gelmelidir.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

Bu kural, CSS iç içe yerleştirmenin Sass gibi ön işleme araçlarıyla birlikte çalışmasına olanak tanır. Sass'ta &p yazıldığında üst seçici, iç içe yerleştirilmiş tür seçiciye eklenir ve sonuç .featurep olur.

Nesting at-rules

@container, @media, @supports ve @layer gibi CSS koşullu grup kuralları da iç içe yerleştirilebilir.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

Anlayıp anlamadığınızı kontrol etme