Bertingkat

Menyematkan aturan gaya CSS dapat membuat stylesheet Anda lebih teratur, lebih mudah dibaca, dan lebih mudah dikelola.

Ringkasan

Setelah mempelajari selektor, Anda mungkin bertanya-tanya tentang cara mengatur selektor dengan lebih baik di stylesheet. Bayangkan Anda menerapkan gaya pada item di dalam bagian "fitur" di situs Anda. Dengan penyusunan bertingkat, Anda dapat mengelompokkan gaya ini di dalam aturan .feature seperti ini:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

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

Hal ini akan sama dengan menulis setiap gaya secara terpisah:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

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

Penyusunan bertingkat dapat memiliki banyak lapisan sesuai kebutuhan.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

Mengelompokkan dan menjalin hubungan

Penyusunan bertingkat memungkinkan Anda mengelompokkan dan membuat hubungan antar-aturan gaya dengan lebih ringkas.

Aturan bertingkat secara default akan terkait dengan aturan luar sebagai kombinator turunan. Gunakan pemilih pada aturan bertingkat untuk mengubah hubungan.

/* 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;
  }
}

Menentukan hubungan eksplisit dengan pemilih &

Anda juga dapat menggunakan pemilih & agar lebih eksplisit saat menyusun aturan gaya. Anggap & sebagai simbol yang merepresentasikan pemilih induk.

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

Hal ini setara dengan menulis gaya seperti ini:

.feature button {
  color: blue;
}

Jika & diperlukan

Tanpa &, pemilih bertingkat akan menjadi pemilih turunan dari pemilih induk. Untuk membentuk pemilih gabungan, & diperlukan.

.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 */
  }
}

Anda juga dapat mengubah konteks dan menempatkan pemilih & di akhir pemilih turunan, atau di kedua sisinya.

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

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

Dalam contoh terakhir, kita menambahkan gaya untuk gambar di dalam elemen dengan class .my-component. Hal ini dapat berguna jika Anda sedang mengerjakan project yang tidak memungkinkan Anda menambahkan class atau id ke elemen.

Penyusunan dan spesifisitas

Seperti :is(), selektor bersarang mengambil spesifisitas selektor dengan spesifisitas tertinggi dalam daftar selektor induk.

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

.intro a {
  color: blue;
}

Aturan pertama menargetkan semua link di dalam elemen #main-header dan .intro, sehingga warnanya menjadi hijau.

Aturan kedua mencoba mengganti aturan pertama agar link di dalam elemen .intro berwarna biru.

Kita dapat melihat mengapa hal ini tidak berfungsi jika kita melihat spesifisitas setiap aturan.

/* 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;
}

Karena aturan pertama memiliki id dalam daftar selektornya, dan aturan bertingkat mengambil spesifisitas selektor dengan spesifisitas tertinggi, aturan tersebut memiliki spesifisitas yang lebih tinggi daripada aturan kedua. Link berwarna hijau meskipun untuk elemen a yang tidak berada di dalam elemen dengan pemilih #main-header.

Penyusunan Bertingkat Tidak Valid

Mirip dengan :is(), pemilih bersarang tidak dapat merepresentasikan elemen semu.

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

  & {
    border: 1px solid navy;
  }
}

Anda akan mengharapkan blockquote dan elemen semunya memiliki teks dan batas berwarna navy, tetapi tidak demikian. Karena pemilih & tidak dapat merepresentasikan elemen semu, gaya batas bertingkat hanya akan diterapkan ke blockquote.

Saat membuat pemilih gabungan menggunakan & dan pemilih jenis, pemilih jenis harus didahulukan tanpa spasi di antaranya.

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

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

Aturan ini memungkinkan nesting CSS berfungsi bersama alat pra-pemrosesan seperti Sass. Di Sass, penulisan &p akan menambahkan pemilih induk ke pemilih jenis bertingkat dan hasilnya adalah .featurep.

Menyematkan aturan @

Aturan grup bersyarat CSS seperti @container, @media, @supports, dan @layer juga dapat disusun bertingkat.

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

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

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

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

Periksa pemahaman Anda