Salah satu pertanyaan CSS yang paling sering dicari Stack overflow Dengan 4.283 suara dan 3,7 juta tampilan adalah “Apakah ada pemilih induk CSS?” (Gambar 1).
Sejak Stack overflow Jawaban biasanya hanya membahas kasus penggunaan spesifik yang disajikan dan tidak harus teknik atau alasan menyeluruh, mari kita gali pertanyaan itu sedikit lebih jauh. Apakah ada pemilih induk di CSS? Secara teknis tidak, tidak ada cara dari elemen anak untuk merangkak kembali ke pohon DOM untuk menemukan elemen induk. Namun, itu tidak berarti kita tidak dapat mencapai hasil yang sama dalam latihan dengan menggeser sudut pandang kita.
Yang bisa kita lakukan adalah menggunakan pemilih yang memeriksa apakah elemen berisi saudara kandung atau anak tertentu menggunakan :has() kelas semu, dan kemudian menata elemen awal, saudara kandung, atau anak yang sesuai. Telah mencapai Baseline kompatibilitas pada tahun 2023, :has() sekarang tersedia di semua browser utama, dengan caniuse melaporkannya tersedia untuk 93,9% pengguna secara global.2
Mari kita lihat case penggunaan beton untuk melihat bagaimana kita bisa menggunakan :has() dalam konteks suatu bentuk. Untuk contoh ini kami akan menggunakan formulir kontak yang sangat umum yang meminta nama orang, email, dan (opsional) orang tersebut, dan berisi a textarea bagi pengguna untuk menggambarkan sifat pertanyaan mereka (Listing 1).
<form>
<div class="input-container">
<label for="name">Your Name</label>
<input name="name" id="name" type="text" required maxlength="100">
</div>
<div class="input-container">
<label for="email">Your Email Address</label>
<input name="email" id="email" type="email" required maxlength="100">
</div>
<div class="input-container">
<label for="tel">Your Phone Number</label>
<input name="tel" id="tel" type="tel" maxlength="25">
</div>
<div class="input-container">
<label for="message">How can we help you?</label>
<textarea name="message" id="message" required maxlength="1000">
</textarea>
</div>
<div class="actions">
<button type="submit">Send</button>
<button type="clear">Clear</button>
</div>
</form>
Secara visual, dengan beberapa gaya tema dasar ditambahkan, bentuk kami terlihat sebagai berikut (Gambar 2). Apa yang ingin kami lakukan, secara terprogram melalui CSS, adalah menampilkan tanda bintang merah
Formulir Kontak div Setiap bidang kami dibungkus dengan a input-containerdengan kelas div.input-container Jadi kami ingin memilih label yang ada di a yang berisi elemen yang ditandai sebagai diperlukan ::before seperti yang terlihat di Listing 2. Kami kemudian menggunakan content elemen semu ditambah dengan
div.input-container:has(:required) label::before {
content: "* ";
color: var(--danger);
}
Rincian pemilih label elemen yang diperlukan
Bentuk dengan tanda bintang di depan label bidang yang diperlukan optional Dengan mengendalikan perbedaan ini di CSS, jika mengubah pikiran kami dan memutuskan kami ingin menyoroti bidang opsional alih -alih yang diperlukan (Gambar 5) dengan menambahkan kata tersebut
div.input-container:has(:where(input, textarea):not(:required)) label::after {
content: " (optional)";
font-style: italic;
}
Menata label lapangan opsional divUntuk menata label opsional, kami memulai dengan cara yang sama seperti yang sebelumnya kami lakukan dengan mencari anak -anak input-container s dengan kelas input Namun, kali ini kami harus menentukan bahwa kami mencari secara khusus textarea Dan div elemen tanpa atribut yang diperlukan. Untuk menghindari secara tidak sengaja menandai semua bidang sebagai opsional, kami menentukan elemen mana yang tidak memiliki atribut yang diperlukan yang kami targetkan, karena kami juga memiliki label di dalam wadah kami required yang tidak memiliki file
Rincian Pemilih Label Elemen Opsional
Setelah label bidang yang opsional Kode yang disajikan dalam artikel ini dapat ditemukan di bawah atau diCodepen
. Sekarang Anda tahu cara membangun pemilih yang memeriksa elemen tanpa memilih elemen itu. Beri tahu saya
Barang keren apa yang Anda bangun dengan teknik ini.
Happy Coding! Stack Exchange Inc. “sering 'pertanyaan CSS'.” Stack overflow,https://stackoverflow.com/questions/tagged/css?tab=frequent
. Diakses 9 Februari 2025. Deveria, Alexis. “Dapatkah saya menggunakan: Have?” caniuse,https://caniuse.com/?search=%3ahas