Kes penggunaan untuk pemilih ibu bapa

Mempunyai "pemilih induk" dalam CSS disebut secara teratur sebagai sesuatu yang benar -benar boleh digunakan CSS. Saya rasa saya mempunyai pemikiran yang banyak kali, tetapi ketika saya meminta otak saya untuk menggunakan kes, saya merasa sukar untuk memikirkannya. Nah, saya hanya mempunyai satu jadi saya fikir saya akan mendokumentasikannya di sini.

Ibu bapa/anak klasik:

 <dana>
  <div> </div>
</dana>

Katakanlah ia membuat banyak akal untuk ibu bapa ini mempunyai limpahan yang tersembunyi dan juga untuk kanak -kanak menggunakan kedudukan mutlak.

 .paren {
   Limpahan: Tersembunyi;
   Kedudukan: Relatif;
}

. anak {
   Kedudukan: Mutlak; 
}

Sekarang katakan ada satu keadaan istimewa di mana kanak -kanak perlu diletakkan di luar ibu bapa dan masih dapat dilihat. Limpahan tersembunyi masih menjadi lalai yang baik untuk sebahagian besar situasi, jadi sebaiknya meninggalkan peraturan itu, tetapi dalam situasi yang sangat spesifik ini, kita perlu mengatasi limpahan itu.

 .special-child {
   Kedudukan: Mutlak; 
   Bawah: -20px; / * perlu sedikit di luar ibu bapa */
}

/ * Tidak nyata, tetapi hanya untuk membuat titik */
.special-child: ibu bapa (.parent) {
   Limpahan: Terlihat;
}

Pemilih di atas adalah palsu tetapi ia berkata, "Pilih ibu bapa. Kekecohan-anak," yang akan membolehkannya menimpa yang diperlukan. Mungkin seperti ini:

 .parent <.special-child><p> ... yang memilih elemen di sebelah kiri dan bukannya kanan. Siapa tahu? Mungkin kedua -dua mereka bermasalah entah bagaimana dan sintaks terakhir akan menjadi sesuatu yang lain. Atau mungkin kita tidak akan mendapatnya. Saya tidak mempunyai idea. Hanya mendokumentasikan kes penggunaan sebenar yang saya ada.</p>
<p> Anda mungkin berfikir, "Mengapa tidak hanya menggunakan kelas khas lain pada ibu bapa?" Saya akan mempunyai, tetapi ibu bapa disuntik oleh perpustakaan pihak ketiga melalui API yang tidak menawarkan untuk menambah kelas pilihan saya. Akhirnya, saya perlu menambah kelas kepada ibu bapa dengan menulis beberapa JavaScript tersuai yang menanyakan DOM untuk mencari anak-anak tertentu, cari ibu bapa, kemudian tambah kelas di sana.</p>
<p> Adakah anda mempunyai beberapa kes penggunaan lain untuk pemilih ibu bapa?</p>
<p> Inilah satu dari Uzair Hayat:</p>
<blockquote><p> Projek saya mempunyai <putin> yang dibalut dengan <div>. The <div> mempunyai beberapa elemen reka bentuk yang perlu berkuatkuasa sebaik sahaja <putpal> berada dalam: fokus. Saya boleh menggunakan :: Sebelum dan :: Selepas unsur-unsur pseudo, tetapi input tidak menyokong mereka kerana mereka diganti unsur-unsur. Sekarang, saya jus JavaScript untuk mengesan jika input berada dalam fokus dan memohon kelas kepada div induk. Saya harap saya dapat ...<pre rel="CSS" data-line=""> Input: Fokus: Ibu Bapa (Div): Selepas {
    paparan: blok;
    / * Perubahan reka bentuk paparan apabila fokus */
}