Pertanyaan Apakah ada pemilih orangtua CSS?


Bagaimana cara memilih <li> elemen yang merupakan induk langsung dari elemen anchor?

Sebagai contoh, CSS saya akan menjadi seperti ini:

li < a.active {
    property: value;
}

Jelas ada cara melakukan ini dengan JavaScript tapi saya berharap ada semacam solusi yang ada asli untuk CSS Level 2.

Menu yang saya coba gaya sedang dimuntahkan oleh CMS sehingga saya tidak bisa memindahkan elemen aktif ke <li> elemen ... (kecuali saya tema modul pembuatan menu yang saya lebih suka tidak melakukannya).

Ada ide?


2507
2018-06-18 19:59


asal


Jawaban:


Saat ini tidak ada cara untuk memilih induk dari suatu elemen dalam CSS.

Jika ada cara untuk melakukannya, itu akan berada di salah satu spesifikasi pemilih CSS saat ini:

Sementara itu, Anda harus menggunakan JavaScript jika Anda perlu memilih elemen induk.


Itu Selectors Level 4 Working Draft termasuk a :has() pseudo-class yang berfungsi sama dengan implementasi jQuery. Pada 2018, ini masih belum didukung oleh browser apa pun.

Menggunakan :has() pertanyaan aslinya bisa diselesaikan dengan ini:

li:has(> a.active) { /* styles to apply to the li tag */ }

2007
2018-06-18 20:16



Saya pikir Anda tidak dapat memilih induk hanya dalam css.

Tetapi karena Anda sudah tampaknya memiliki .active kelas, bukankah lebih mudah untuk memindahkan kelas itu ke kelas li (bukan a)? Dengan begitu Anda dapat mengakses keduanya li dan a via css saja.


119
2018-06-18 20:08



Anda bisa menggunakan ini naskah.

*! > input[type=text] { background: #000; }

Ini akan memilih orang tua manapun dari input teks. Tapi tunggu, masih banyak lagi. Jika Anda mau, Anda dapat memilih orang tua yang ditentukan:

.input-wrap! > input[type=text] { background: #000; }

atau pilih saat aktif:

.input-wrap! > input[type=text]:focus { background: #000; }

Lihat HTML ini:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

Anda dapat memilih itu span.help ketika input aktif dan tunjukkan:

.input-wrap! .help > input[type=text]:focus { display: block; }

Ada banyak kemampuan lainnya; cukup periksa dokumentasi plugin.

BTW, ia bekerja di IE.


99
2017-08-13 10:13



Seperti yang disebutkan oleh beberapa orang lain, tidak ada cara untuk mendesain elemen induk / s hanya menggunakan CSS tetapi bekerja dengan berikut jQuery:

$("a.active").parents('li').css("property", "value");

74
2017-12-14 14:51



Tidak ada pemilih orangtua; hanya jalan tidak ada pemilih saudara sebelumnya. Satu alasan bagus untuk tidak memiliki pemilih ini adalah karena peramban harus melewati semua elemen anak-anak untuk menentukan apakah kelas harus diterapkan atau tidak. Misalnya jika Anda menulis:

body:contains-selector(a.active) { background: red; }

Maka browser akan harus menunggu sampai ia memuat dan mem-parsing semuanya sampai </body> untuk menentukan apakah halaman harus merah atau tidak.

Artikel ini Mengapa kita tidak memiliki pemilih orangtua menjelaskannya secara detail.


44
2018-01-21 08:43



tidak ada cara untuk melakukan ini di css2. Anda bisa menambahkan kelas ke li dan referensi a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



Pemilih CSS “General Sibling Combinator"Mungkin bisa digunakan untuk apa yang Anda inginkan:

E ~ F {
    property: value;
}

Ini cocok dengan apapun F elemen yang didahului oleh E elemen.


26
2018-06-30 14:00



Cobalah untuk beralih a untuk block tampilkan, lalu gunakan gaya apa pun yang Anda inginkan. aelemen akan terisi li elemen dan Anda akan dapat memodifikasi tampilan seperti yang Anda inginkan. Jangan lupa untuk mengatur li padding ke 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03



Tidak dalam CSS 2 sejauh yang saya ketahui. CSS 3 memiliki pemilih yang lebih kuat tetapi tidak diterapkan secara konsisten di semua browser. Bahkan dengan pemilih yang lebih baik, saya tidak percaya itu akan mencapai persis apa yang telah Anda tetapkan dalam contoh Anda.


19
2018-06-18 20:09



Saya tahu OP sedang mencari solusi CSS tetapi mudah untuk menggunakan jQuery. Dalam kasus saya, saya perlu menemukan <ul> tag orang tua untuk a <span> tag yang ada pada anak <li>. jQuery memiliki :has pemilih sehingga memungkinkan untuk mengidentifikasi orang tua oleh anak-anak yang dikandungnya:

$("ul:has(#someId)")

akan memilih ul elemen yang memiliki elemen anak dengan id someId. Atau untuk menjawab pertanyaan asli, sesuatu seperti berikut ini harus melakukan trik (belum diuji):

$("li:has(.active)")

17
2018-05-16 22:04



Ini adalah aspek yang paling didiskusikan Pemilih Tingkat 4 spesifikasi. Dengan pemilih ini akan dapat mengatur elemen sesuai dengan anaknya dengan menggunakan tanda seru setelah pemilih yang diberikan (!).

Sebagai contoh:

body! a:hover{
   background: red;
}

akan mengatur warna latar merah jika pengguna melayang di atas jangkar apa pun.

Tapi kita harus menunggu implementasi browser :(


15
2018-05-05 18:24