Induk pemilih css yang memiliki anak

Question

Sudah lama menjadi impian para pengembang front-end untuk memiliki cara menerapkan CSS ke elemen berdasarkan apa yang terjadi di dalam elemen tersebut

Table of Contents Show

Dasar-dasar cara menggunakan. has() sebagai pemilih induk
Contoh praktis menggunakan. has() dengan CSS Grid
Menggunakan. has() dengan penggabung anak
Menggunakan. has() dengan kombinator saudara
Menata status formulir tanpa JS
Beralih mode gelap tanpa JS
Dan banyak lagi
Itu. memiliki() revolusi
Bagaimana cara menerapkan CSS pada orang tua yang memiliki anak?
Bagaimana cara memilih elemen induk dari anak di CSS?
Bagaimana Anda menambahkan gaya ke elemen induk saat mengarahkan elemen anak?
Apa itu pemilih orang tua/anak?

Mungkin kita ingin menerapkan satu tata letak ke elemen artikel jika ada gambar pahlawan di bagian atas, dan tata letak yang berbeda jika tidak ada gambar pahlawan. Atau mungkin kami ingin menerapkan gaya yang berbeda ke formulir tergantung pada status salah satu kolom inputnya. Bagaimana dengan memberi sidebar satu warna latar belakang jika ada komponen tertentu di sidebar itu, dan warna latar berbeda jika komponen itu tidak ada?

Selama dua puluh tahun terakhir, Kelompok Kerja CSS membahas kemungkinan itu berkali-kali. Kebutuhannya jelas dan dipahami dengan baik. Mendefinisikan sintaks adalah tugas yang bisa dilakukan. Tetapi mencari tahu bagaimana mesin browser dapat menangani pola lingkaran yang berpotensi sangat kompleks, dan menyelesaikan perhitungan dengan cukup cepat sepertinya tidak mungkin. Versi awal pemilih induk dirancang untuk CSS3, hanya untuk ditangguhkan. Akhirnya, pseudo-class

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 secara resmi ditetapkan. Tetapi memiliki standar web saja tidak membuat

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 menjadi kenyataan. Kami masih membutuhkan tim browser untuk mengetahui tantangan kinerja yang sebenarnya. Sementara itu, komputer terus menjadi lebih kuat dan lebih cepat dari tahun ke tahun

Pada tahun 2021, Igalia mulai mengadvokasi

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 di antara tim pembuat browser, membuat prototipe ide mereka, dan mendokumentasikan temuan mereka terkait performa. Perhatian baru pada

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 menarik perhatian para insinyur yang mengerjakan WebKit di Apple. Kami mulai menerapkan kelas semu, memikirkan kemungkinan peningkatan kinerja yang diperlukan untuk membuat ini berfungsi. Kami memperdebatkan apakah akan memulai dengan versi yang lebih cepat dengan cakupan yang sangat terbatas dan sempit dari apa yang dapat dilakukannya, lalu mencoba menghapus batasan tersebut jika memungkinkan… atau memulai dengan sesuatu yang tidak memiliki batasan, dan hanya menerapkan batasan sesuai kebutuhan. Kami melakukannya, dan menerapkan versi yang lebih kuat. Kami mengembangkan sejumlah pengoptimalan caching dan pemfilteran khusus

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_1 baru, dan memanfaatkan strategi pengoptimalan lanjutan yang ada dari mesin CSS kami. Dan pendekatan kami berhasil, membuktikan bahwa setelah dua dekade menunggu, akhirnya mungkin untuk mengimplementasikan pemilih seperti itu dengan kinerja yang fantastis, bahkan dengan adanya pohon DOM besar dan sejumlah besar

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 pemilih

Tim WebKit mengirimkan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 di Safari Technology Preview 137 pada Desember 2021, dan di Safari 15. 4 pada 14 Maret 2022. Igalia melakukan pekerjaan teknis untuk mengimplementasikan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 di Chromium, yang akan dikirimkan di Chrome 105 pada 30 Agustus 2022. Agaknya browser lain yang dibangun di atas Chromium tidak akan jauh ketinggalan. Mozilla saat ini sedang mengerjakan implementasi Firefox

Jadi, mari kita lihat langkah demi langkah apa yang dapat dilakukan pengembang web dengan alat ini. Ternyata, kelas semu

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 bukan hanya "pemilih orang tua". Setelah beberapa dekade jalan buntu, pemilih ini dapat melakukan lebih banyak lagi

Dasar-dasar cara menggunakan. has() sebagai pemilih induk

Mari kita mulai dengan dasar-dasarnya. Bayangkan kita ingin menata elemen

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_6 berdasarkan jenis konten pada gambar. Terkadang sosok kita hanya membungkus sebuah gambar

<figure>
  <img src="flowers.jpg" alt="spring flowers">
</figure>

Sementara di lain waktu ada gambar dengan keterangan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

Sekarang mari terapkan beberapa gaya ke

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 yang hanya akan diterapkan jika ada

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8 di dalam gambar

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

Pemilih ini berarti apa yang dikatakan — elemen

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 yang memiliki

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8 di dalamnya akan dipilih

Ini demonya, jika Anda ingin mengubah kode dan lihat apa yang terjadi. Pastikan untuk menggunakan browser yang mendukung

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 — mulai hari ini, itu adalah Safari

Lihat Pena
has() demo — Variasi gambar oleh Jen Simmons (@jensimmons)
di CodePen

Dalam demo ini, saya juga menargetkan

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_7 yang berisi elemen

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

3 dengan menggunakan

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

4

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_

Dan saya menggunakan Kueri Fitur Pemilih untuk menyembunyikan pengingat tentang dukungan browser setiap kali browser saat ini mendukung

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

Aturan

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

_6 itu sendiri didukung dengan sangat baik. Ini bisa sangat berguna kapan pun Anda ingin menggunakan kueri fitur untuk menguji dukungan browser dari pemilih tertentu

Dan terakhir, di demo pertama ini, saya juga menulis pemilih kompleks menggunakan

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

7. Saya ingin menerapkan

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

_8 pada gambar — tetapi hanya jika gambar adalah satu-satunya konten. Flexbox membuat gambar membentang untuk mengisi semua ruang yang tersedia

Saya menggunakan pemilih untuk menargetkan

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_7 yang tidak memiliki elemen apa pun yang bukan gambar. Jika

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

_7 memiliki

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8,

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

3,

figure:not(:has(:not(img))) {
  display: flex;
}

3, atau

figure:not(:has(:not(img))) {
  display: flex;
}

4 — atau elemen apa pun selain

figure:not(:has(:not(img))) {
  display: flex;
}

5 — maka pemilih tidak berlaku

figure:not(:has(:not(img))) {
  display: flex;
}

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 adalah hal yang kuat

Contoh praktis menggunakan. has() dengan CSS Grid

Mari kita lihat demo kedua di mana saya menggunakan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 sebagai pemilih induk untuk menyelesaikan kebutuhan yang sangat praktis dengan mudah

Saya memiliki beberapa kartu penggoda artikel yang ditata menggunakan CSS Grid. Beberapa kartu hanya berisi judul dan teks, sementara yang lain juga memiliki gambar. Saya ingin kartu dengan gambar mengambil lebih banyak ruang di kisi daripada kartu tanpa gambar

Saya tidak ingin melakukan pekerjaan ekstra untuk membuat sistem manajemen konten saya menerapkan kelas atau menggunakan JavaScript untuk tata letak. Saya hanya ingin menulis pemilih sederhana di CSS yang akan memberi tahu browser untuk membuat kartu penggoda dengan gambar untuk mengambil dua baris dan dua kolom di kisi

Kelas semu

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 membuat ini sederhana

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

Lihat Pena
has() demo — kartu penggoda oleh Jen Simmons (@jensimmons)
di CodePen

Dua demo pertama ini menggunakan pemilih elemen sederhana sejak awal CSS, tetapi semua pemilih dapat digabungkan dengan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7, termasuk pemilih kelas, pemilih ID, pemilih atribut — dan penggabung yang kuat

Menggunakan. has() dengan penggabung anak

Pertama, tinjauan singkat tentang perbedaan antara dan (

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

0)

Penggabung turunan sudah ada sejak awal CSS. Itu adalah nama yang bagus ketika kita memberi spasi di antara dua penyeleksi sederhana. Seperti ini

a img { .. }

Ini menargetkan semua

figure:not(:has(:not(img))) {
  display: flex;
}

5 elemen yang terkandung dalam elemen

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, tidak peduli seberapa jauh jarak

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2 dan

figure:not(:has(:not(img))) {
  display: flex;
}

5 berada di pohon DOM HTML

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

Penggabung anak adalah nama saat kita meletakkan

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

0 di antara dua pemilih — yang memberi tahu browser untuk menargetkan apa pun yang cocok dengan pemilih kedua, tetapi hanya jika pemilih kedua adalah anak langsung dari yang pertama

a > img { .. }

Misalnya, pemilih ini menargetkan semua elemen

figure:not(:has(:not(img))) {
  display: flex;
}

_5 yang dibungkus oleh elemen

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, tetapi hanya jika

figure:not(:has(:not(img))) {
  display: flex;
}

5 tepat setelah

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2 di HTML

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_0

Dengan mengingat hal itu, mari pertimbangkan perbedaan antara dua contoh berikut. Keduanya memilih elemen

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, bukan

figure:not(:has(:not(img))) {
  display: flex;
}

5, karena kita menggunakan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

1

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

2

Yang pertama memilih elemen

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

_2 dengan

figure:not(:has(:not(img))) {
  display: flex;
}

5 di dalamnya — setiap tempat dalam struktur HTML. Sedangkan yang kedua memilih elemen hanya jika

figure:not(:has(:not(img))) {
  display: flex;
}

5 adalah anak langsung dari

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2

Keduanya bisa bermanfaat;

Lihat Pena
has() — penggabung keturunan vs penggabung anak oleh Jen Simmons (@jensimmons)
di CodePen

Ada dua jenis penggabung tambahan — keduanya bersaudara. Dan melalui inilah

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 menjadi lebih dari sekadar pemilih orang tua

Menggunakan. has() dengan kombinator saudara

Mari kita tinjau dua penyeleksi dengan hubungan saudara kandung. Ada (

a img { .. }

_8) dan (

a img { .. }

9)

Penggabung saudara berikutnya (

a img { .. }

8) hanya memilih paragraf yang datang langsung setelah elemen

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

1

________11

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_11_______4

Penggabung saudara berikutnya (

a img { .. }

9) memilih semua paragraf yang muncul setelah elemen

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

1. Mereka harus bersaudara, tetapi bisa ada sejumlah elemen HTML lain di antaranya

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

5

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

6

Perhatikan bahwa

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

4 dan

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

5 memilih elemen paragraf, dan bukan

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

1 judul. Seperti pemilih lainnya (pikirkan

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

7), ini adalah elemen terakhir yang terdaftar yang ditargetkan oleh pemilih. Tapi bagaimana jika kita ingin menargetkan

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

1?

Seberapa sering Anda ingin menyesuaikan margin pada judul berdasarkan elemen yang mengikutinya? . Kode ini memungkinkan kita untuk memilih

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  </figure>
</a>

1 dengan

figure:not(:has(:not(img))) {
  display: flex;
}

3 segera setelahnya

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_7

Luar biasa

Bagaimana jika kita ingin melakukan ini untuk keenam elemen judul, tanpa menuliskan enam salinan pemilih. Kita dapat menggunakan

a > img { .. }

_2 untuk menyederhanakan kode kita

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_8

Atau bagaimana jika kita ingin menulis kode ini untuk elemen lebih dari sekedar paragrapah?

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_9

Menggabungkan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 dengan , (

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

0), (

a img { .. }

8), dan (

a img { .. }

9) membuka banyak kemungkinan. Tapi oh, ini masih baru permulaan

Menata status formulir tanpa JS

Ada banyak pseudo-class fantastis yang bisa digunakan di dalam

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Faktanya, ini merevolusi apa yang bisa dilakukan oleh kelas semu. Sebelumnya, pseudo-class hanya digunakan untuk menata elemen berdasarkan status khusus — atau menata salah satu anaknya. Sekarang, pseudo-class dapat digunakan untuk menangkap status, tanpa JavaScript, dan mengatur gaya apa pun di DOM berdasarkan status tersebut

Bidang input formulir menyediakan cara yang ampuh untuk menangkap keadaan seperti itu. Form-specific pseudo-classes include

a > img { .. }

8,

a > img { .. }

9,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

00,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

01,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

02,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

03,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

04,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

05,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

06,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

07,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

08,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

09,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

10,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

11 and

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

12

Mari selesaikan salah satu kasus penggunaan yang saya jelaskan di pendahuluan — kebutuhan lama untuk memberi gaya pada label formulir berdasarkan status bidang input. Mari kita mulai dengan bentuk dasar

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

0

Saya ingin menerapkan latar belakang ke seluruh formulir setiap kali salah satu bidang menjadi fokus

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_1

Sekarang saya bisa menggunakan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_13 sebagai gantinya, tetapi akan berperilaku seperti

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

14. Kelas semu

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_15 selalu menerapkan CSS setiap kali sebuah bidang menjadi fokus. Kelas semu

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_16 menyediakan cara yang andal untuk mendesain indikator fokus hanya ketika browser akan menggambarnya secara asli, menggunakan heuristik kompleks yang sama yang digunakan browser untuk menentukan apakah akan menerapkan cincin fokus atau tidak

Sekarang, bayangkan saya ingin menata bidang lain, bidang yang tidak fokus — mengubah warna teks label dan warna batas masukan. Sebelum

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7, ini membutuhkan JavaScript. Sekarang kita bisa menggunakan CSS ini

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_2

Apa yang pemilih itu katakan? . Dan ubah batas bidang input menjadi

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

19

Anda dapat melihat kode ini beraksi di demo berikut dengan mengklik di dalam salah satu kolom teks. Latar belakang formulir berubah, seperti yang saya jelaskan sebelumnya. Dan warna batas label dan input bidang yang tidak fokus juga berubah

Lihat Pena
has() demo. Formulir oleh Jen Simmons (@jensimmons)
di CodePen

Dalam demo yang sama ini, saya juga ingin meningkatkan peringatan kepada pengguna ketika ada kesalahan dalam cara mereka mengisi formulir. Selama bertahun-tahun, kami dapat dengan mudah memberi kotak merah di sekitar input yang tidak valid dengan CSS ini

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_3

Sekarang dengan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7, kita juga dapat mengubah teks label menjadi merah

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_4

Anda dapat melihat hasilnya dengan mengetikkan sesuatu di bidang situs web atau email yang bukan URL atau alamat email lengkap. Keduanya tidak valid, sehingga keduanya akan memicu batas merah dan label merah, dengan "X"

Beralih mode gelap tanpa JS

Dan terakhir, dalam demo yang sama ini saya menggunakan kotak centang untuk memungkinkan pengguna beralih antara tema terang dan gelap

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

5

Saya telah menata kotak centang mode gelap menggunakan gaya khusus, tetapi masih terlihat seperti kotak centang. Dengan gaya yang lebih kompleks, saya bisa membuat toggle di CSS

Dengan cara yang sama, saya dapat menggunakan menu pilihan untuk menyediakan beberapa tema bagi pengguna untuk situs saya

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_6

Lihat Pena
has() Demo #5 — Pemilih tema melalui Select oleh Jen Simmons (@jensimmons)
di CodePen

Setiap kali ada kesempatan untuk menggunakan CSS daripada JavaScript, saya akan menerimanya. Ini menghasilkan pengalaman yang lebih cepat dan situs web yang lebih kuat. JavaScript dapat melakukan hal-hal luar biasa, dan kita harus menggunakannya saat itu adalah alat yang tepat untuk pekerjaan itu. Tetapi jika kita dapat mencapai hasil yang sama hanya dalam HTML dan CSS, itu lebih baik

Dan banyak lagi

Melihat melalui pseudo-class lain, ada begitu banyak yang bisa digabungkan dengan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Bayangkan kemungkinan dengan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

22,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

23,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

24,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

25,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

26,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

27,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

28,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

29, ________11______3. Kelas pseudo

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

32 baru dipicu ketika

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

33 dalam keadaan terbuka. Dengan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_34 Anda dapat mengatur gaya apa pun di DOM berdasarkan apakah

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

33 terbuka atau tertutup

Namun, tidak semua pseudo-class saat ini didukung di dalam

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 di setiap browser, jadi cobalah kode Anda di beberapa browser. Saat ini kelas semu media dinamis tidak berfungsi — seperti

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

37,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

38,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

39, dll. Mereka mungkin bekerja dengan sangat baik di masa depan, jadi jika Anda membaca ini di masa depan, ujilah mereka. Selain itu, dukungan pembatalan formulir saat ini tidak ada dalam situasi spesifik tertentu, sehingga perubahan status dinamis ke kelas semu tersebut mungkin tidak diperbarui dengan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

Safari 16 akan menambahkan dukungan untuk

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_41 membuka kemungkinan menarik untuk menulis kode yang melihat fragmen URL saat ini yang cocok dengan ID elemen tertentu. Misalnya, jika pengguna mengklik daftar isi di bagian atas dokumen, dan melompat ke bawah ke bagian halaman yang cocok dengan tautan tersebut,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

42 menyediakan cara untuk menata konten tersebut secara unik, berdasarkan fakta bahwa pengguna mengklik . Dan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 membuka apa yang bisa dilakukan gaya seperti itu

Sesuatu yang perlu diperhatikan — Kelompok Kerja CSS memutuskan untuk melarang semua elemen semu yang ada di dalam

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Misalnya,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

45 dan ________11______46 tidak akan berfungsi. Sama dengan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

_47 dan

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>

48

Itu. memiliki() revolusi

Ini terasa seperti revolusi dalam cara kita menulis pemilih CSS, membuka dunia kemungkinan yang sebelumnya tidak mungkin atau seringkali tidak sepadan dengan usaha. Rasanya sementara kita mungkin langsung mengenali betapa bergunanya

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 nanti, kita juga tidak tahu apa yang benar-benar mungkin. Selama beberapa tahun ke depan, orang-orang yang membuat demo dan mendalami apa yang dapat dilakukan CSS akan menghasilkan ide-ide luar biasa, memperluas

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 hingga batasnya

Michelle Barker membuat demo fantastis yang memicu animasi ukuran trek Grid melalui penggunaan

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 dan hover status. Baca lebih lanjut tentang itu di posting blognya. Dukungan untuk trek kisi animasi akan dikirimkan di Safari 16. Anda dapat mencoba demo ini hari ini di Pratinjau Teknologi Safari atau Safari 16 beta

Bagian tersulit dari

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

_7 adalah membuka pikiran kita terhadap kemungkinannya. Kami sudah terbiasa dengan batasan yang dikenakan pada kami dengan tidak memiliki pemilih orang tua. Sekarang, kita harus menghentikan kebiasaan itu

Itulah lebih banyak alasan untuk menggunakan vanilla CSS, dan tidak membatasi diri Anda pada kelas yang ditentukan dalam kerangka kerja. Dengan menulis CSS Anda sendiri, khusus untuk proyek Anda, Anda dapat sepenuhnya memanfaatkan semua kemampuan hebat dari browser saat ini

Apa yang akan Anda gunakan untuk

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7? . Saya tidak sabar untuk melihat milik Anda

Bagaimana cara menerapkan CSS pada orang tua yang memiliki anak?

Menerapkan gaya ke elemen turunan itu mudah, tetapi jika Anda ingin menerapkan gaya ke kelas induk yang sudah memiliki elemen turunan, Anda dapat menggunakan kombinator anak pemilih CSS ( . Misalnya, div > p memilih semua elemen . For example, div > p selects all

elements where the parent is a

element.

Bagaimana cara memilih elemen induk dari anak di CSS?

Elemen>pemilih elemen digunakan untuk memilih elemen dengan induk tertentu. Catatan. Elemen yang bukan anak langsung dari induk yang ditentukan, tidak dipilih.