Apakah ada pemilih induk CSS?


3176

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 untuk melakukan ini dengan JavaScript, tapi saya berharap ada semacam solusi yang ada asli untuk CSS Level 2.

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

Ada ide?

Jawaban:


2535

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

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

Yang mengatakan, Selektor Level 4 Bekerja Draft termasuk :has()pseudo-class yang akan menyediakan kemampuan ini. Ini akan mirip dengan implementasi jQuery .

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

Namun, pada Mei 2020, ini masih belum didukung oleh browser apa pun .

Sementara itu, Anda harus beralih ke JavaScript jika Anda harus memilih elemen induk.


68
Tampaknya sudah disarankan dan ditolak: stackoverflow.com/questions/45004/…
RobM

14
Sepertinya pemilih subjek telah ditinjau kembali, kecuali dengan menggunakan yang !sekarang:The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
animuson

13
Yang prepended $tampak lebih baik untuk saya ... yang terlampir !dapat diabaikan dengan lebih mudah.
Christoph

51
Twist plot utama! Selectors 4 WD baru saja diperbarui hari ini untuk mengecualikan indikator subjek dari profil cepat, yang akan digunakan oleh implementasi CSS. Jika perubahan ini tetap, itu berarti Anda tidak akan dapat menggunakan indikator subjek dalam stylesheet lagi (kecuali jika Anda menggunakan menambahkan semacam polyfill seperti yang dijelaskan dalam jawaban lain ) - Anda hanya dapat menggunakannya dengan Selectors API dan di mana saja selain itu profil lengkap dapat diterapkan.
BoltClock

55
Pembaruan besar lainnya: sepertinya mereka sedang mempertimbangkan untuk tidak menggunakan sintaks pemilih subjek dan menggantinya dengan :has()semu yang diketahui dan dicintai semua orang dari jQuery. ED terbaru telah menghapus semua referensi ke indikator subjek, dan menggantinya dengan :has()pseudo. Saya tidak tahu alasan pastinya, tetapi CSSWG mengadakan polling beberapa waktu lalu dan hasilnya pasti mempengaruhi keputusan ini. Kemungkinan besar kompatibilitas dengan jQuery (sehingga dapat meningkatkan qSA tanpa modifikasi), dan karena sintaks indikator subjek terbukti terlalu membingungkan.
BoltClock

152

Saya tidak berpikir Anda dapat memilih induk hanya di CSS.

Tetapi karena Anda tampaknya sudah memiliki .activekelas, akan lebih mudah untuk memindahkan kelas itu ke li(bukan ke a). Dengan begitu Anda dapat mengakses keduanya lidan amelalui CSS saja.


4
Anda tidak dapat menggeser pemilih semu ke item daftar, karena itu bukan elemen yang bisa fokus. Dia menggunakan: pemilih aktif, jadi ketika jangkar aktif dia ingin item daftar terpengaruh. Daftar item tidak akan pernah dalam keadaan aktif. Selain itu, sangat disayangkan bahwa pemilih seperti itu tidak ada. Mendapatkan menu CSS murni agar dapat diakses sepenuhnya dari papan ketik tampaknya tidak mungkin tanpanya (menggunakan penyeleksi saudara Anda dapat membuat submenu dibuat menggunakan daftar bersarang untuk ditampilkan, tetapi begitu daftar mendapatkan fokus, ia menjadi tersembunyi lagi). Jika ada solusi khusus CSS untuk conun ini

12
@Dominic Aquilina Lihatlah pertanyaannya, OP menggunakan kelas, bukan pemilih semu.
Jeroen

125

Anda dapat menggunakan skrip ini :

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

Ini akan memilih induk dari input teks. Tapi tunggu, masih banyak lagi. Jika mau, Anda dapat memilih induk 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.helpketika inputaktif dan menunjukkannya:

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

Ada banyak lagi kemampuan; cukup periksa dokumentasi plugin.

BTW, ia bekerja di Internet Explorer.


5
misalkan menggunakan jquery patent()akan lebih cepat. Ini perlu pengujian, namun
Dan

2
@Idered Gagal ketika Anda memiliki deklarasi CSS tentang Subjek Selektor tanpa selector anak ( #a!sendirian melempar kesalahan, #a! pberfungsi), dan yang lainnya tidak akan berfungsi karena Uncaught TypeError: Cannot call method 'split' of undefined: lihat jsfiddle.net/HerrSerker/VkVPs
yunzen

3
@HerrSerker saya pikir #a! itu pemilih yang tidak valid, apa yang harus dipilih?
Idered

2
@ Aku tidak tahu. Spec tidak mengatakan itu ilegal. #Sebuah! harus memilih sendiri. Setidaknya mereka seharusnya tidak ada kesalahan dalam JavaScript
yunzen

5
Per komentar saya pada jawaban yang diterima, sepertinya polyfill mungkin diperlukan bahkan dalam waktu dekat, karena indikator subjek mungkin tidak pernah diimplementasikan oleh browser di CSS.
BoltClock

108

Seperti yang disebutkan oleh beberapa orang lain, tidak ada cara untuk gaya orangtua elemen / s hanya menggunakan CSS tetapi berikut ini berfungsi dengan jQuery :

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

21
The <pemilih tidak ada (diverifikasi menggunakan jQuery 1.7.1).
Rob W

6
Mungkin itu <-syntax bekerja pada tahun 2009 tetapi saya telah memperbaruinya (untuk 2013).
Alastair

5
Bahkan lebih baik, menggunakan jQuery built-in :has()pemilih : $("li:has(a.active)").css("property", "value");. Bunyinya mirip dengan !pemilih yang diusulkan CSS 4 . Lihat juga: :parentpemilih , .parents()metode , .parent()metode .
Rory O'Kane

7
Dan daripada menggunakan .css("property", "value")untuk menata elemen yang dipilih, Anda biasanya .addClass("someClass")dan harus memiliki dalam CSS Anda .someClass { property: value }( via ). Dengan begitu, Anda dapat memberi tahu gaya dengan kekuatan penuh CSS dan preprosesor apa pun yang Anda gunakan.
Rory O'Kane


69

Tidak ada pemilih induk; hanya saja tidak ada pemilih saudara sebelumnya. Salah satu alasan bagus untuk tidak memiliki penyeleksi ini adalah karena browser harus menelusuri semua anak dari suatu elemen untuk menentukan apakah suatu kelas harus diterapkan atau tidak. Misalnya, jika Anda menulis:

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

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

Artikel Mengapa kami tidak memiliki pemilih induk menjelaskannya secara rinci.


11
jadi buat browser lebih cepat. internet itu sendiri lebih cepat. pemilih ini sangat dibutuhkan, dan alasan untuk tidak menerapkannya, sayangnya, karena kita hidup di dunia yang lambat, primitif.
vsync

11
sebenarnya, pemilih akan membuat browser yang sangat cepat terlihat lambat.
Salman A

5
Saya percaya bahwa pengembang peramban akan membuat implementasi yang (setidaknya) secepat versi javascript, yang akhirnya digunakan oleh banyak orang.
Marc.2377

"Kita hidup di dunia yang lambat, primitif" batuk batuk apel baru menonton batuk
Marvin

@ Marc.2377 Jika Anda mencoba contoh di atas dalam JS di situs web Anda, saya tidak akan pernah mengunjunginya. Di sisi lain, saya akan mengatakan bahwa sebagian besar waktu, Anda hanya peduli pada anak-anak langsung, jadi jika itu hanya terbatas pada anak-anak langsung, itu akan menjadi tambahan yang baik tanpa terlalu banyak dampak.
xryl669

54

Tidak ada cara untuk melakukan ini di CSS 2. Anda bisa menambahkan kelas ke lidan referensi a:

li.active > a {
    property: value;
}

3
dengan membuat tampilan elemen: blok Anda bisa mengaturnya agar sesuai dengan seluruh area li. jika Anda bisa menjelaskan gaya apa yang Anda cari mungkin saya bisa membantu dengan solusi.
Josh

ini sebenarnya solusi sederhana dan elegan dan, dalam banyak kasus, masuk akal untuk mengatur kelas pada orang tua.
Ricardo

35

Cobalah beralih ake blocktampilan, lalu gunakan gaya apa pun yang Anda inginkan. The aelemen akan mengisi lielemen, dan Anda akan dapat mengubah tampilan nya seperti yang Anda inginkan. Jangan lupa untuk mengatur lipadding ke 0.

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

31

Selektor CSS " General Sibling Combinator " mungkin dapat digunakan untuk apa yang Anda inginkan:

E ~ F {
    property: value;
}

Ini cocok dengan Felemen apa pun yang didahului oleh suatu Eelemen.


24
Ini hanya pemilih saudara, ini bukan anak-anak, orang tua ... tidak benar-benar menjawab pasangan pertanyaan
Alireza

26

Tidak dalam CSS 2 sejauh yang saya ketahui. CSS 3 memiliki lebih banyak penyeleksi yang kuat tetapi tidak diterapkan secara konsisten di semua browser. Bahkan dengan penyeleksi yang ditingkatkan, saya tidak percaya itu akan mencapai apa yang Anda tentukan dalam contoh Anda.


24

Saya tahu OP sedang mencari solusi CSS tetapi mudah dicapai menggunakan jQuery. Dalam kasus saya, saya perlu menemukan <ul>tag induk untuk <span>tag yang terkandung dalam anak <li>. jQuery memiliki :haspemilih sehingga dimungkinkan untuk mengidentifikasi orang tua oleh anak-anak di dalamnya:

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

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

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

3
Atau gunakan $yourSpan.closest("ul")dan Anda akan mendapatkan UL induk dari elemen rentang Anda. Namun demikian jawaban Anda sepenuhnya imo offtopic. Kami dapat menjawab semua pertanyaan dengan tag CSS dengan solusi jQuery.
Robin van Baalen

1
Seperti yang diidentifikasi dalam jawaban lain, tidak ada cara untuk melakukan ini menggunakan CSS 2. Mengingat kendala itu, jawaban yang saya berikan adalah yang saya tahu efektif dan merupakan cara paling sederhana untuk menjawab pertanyaan menggunakan javascript imho.
David Clarke

Mengingat upvotes Anda, beberapa orang setuju dengan Anda. Tetapi satu-satunya jawaban tetap yang diterima; sederhana dan sederhana "itu tidak bisa dilakukan dengan cara yang Anda inginkan". Jika pertanyaannya adalah bagaimana cara mengarsipkan 60mph di atas sepeda dan Anda menjawabnya dengan "sederhana; naik mobil dan menabrak bensin.", Itu masih bukan jawaban. Demikian komentar saya.
Robin van Baalen

1
Pendekatan itu akan membuat SO hampir sepenuhnya tidak berguna. Saya mencari SO untuk menyelesaikan masalah, bukan untuk menemukan "satu-satunya jawaban" yang tidak mengatasi masalah tersebut. Itulah sebabnya SO sangat mengagumkan, karena selalu ada lebih dari satu cara untuk menguliti kucing.
David Clarke

23

Elemen pseudo :focus-withinmemungkinkan orang tua untuk dipilih jika keturunan memiliki fokus.

Suatu elemen dapat difokuskan jika memiliki tabindexatribut.

Dukungan browser untuk fokus-dalam

Tabindex

Contoh

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>


2
Ini berfungsi dengan baik dalam kasus saya, terima kasih! Hanya tidak, contohnya akan lebih ilustratif jika Anda mengubah warna ke orang tua, bukan ke saudara kandung, ini diganti .color:focus-within .changedengan .color:focus-within. Dalam kasus saya, saya menggunakan bootstrap nav-bar yang menambahkan kelas ke anak-anak saat aktif dan saya ingin menambahkan kelas ke induk .nav-bar. Saya pikir ini adalah skenario yang cukup umum di mana saya memiliki markup tetapi komponen css + js adalah bootstrap (atau lainnya) jadi saya tidak dapat mengubah perilaku. Meskipun saya bisa menambahkan tabindex dan menggunakan css ini. Terima kasih!
cancerbero

22

Ini adalah aspek yang paling banyak dibahas dari spesifikasi Selectors Level 4 . Dengan ini, pemilih akan dapat mendesain elemen sesuai dengan anaknya dengan menggunakan tanda seru setelah pemilih yang diberikan (!).

Sebagai contoh:

body! a:hover{
   background: red;
}

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

Tapi kita harus menunggu implementasi browser :(


21

Anda mungkin mencoba menggunakan hyperlink sebagai induknya, dan kemudian mengubah elemen dalam saat melayang. Seperti ini:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

Dengan cara ini Anda dapat mengubah gaya dalam beberapa tag bagian dalam, berdasarkan rollover dari elemen induk.


1
Itu benar, tetapi membatasi kode markup di dalam atag hanya untuk elemen tertentu, jika Anda ingin menyesuaikan dengan standar XHTML. Misalnya, Anda tidak dapat menggunakan bagian divdalam a, tanpa mendapat peringatan akan melanggar skema.
Ivaylo Slavov

2
Ivylo benar benar! "a" adalah elemen non-blok, jadi tidak dapat menggunakan elemen blok di dalamnya.
riverstorm

1
Dalam HTML5 sangat baik untuk menempatkan elemen blok di dalam tautan.
Matthew James Taylor

2
... jika secara semantik salah, mereka tidak akan mengizinkannya di HTML5 yang sebelumnya tidak.
BoltClock

14

Saat ini tidak ada pemilih induk & bahkan tidak sedang dibahas dalam pembicaraan W3C. Anda perlu memahami bagaimana CSS dievaluasi oleh browser untuk benar-benar memahami apakah kita membutuhkannya atau tidak.

Ada banyak penjelasan teknis di sini.

Jonathan Snook menjelaskan bagaimana CSS dievaluasi .

Chris Coyier pada pembicaraan pemilih Induk .

Harry Roberts lagi dalam menulis penyeleksi CSS yang efisien .

Namun Nicole Sullivan memiliki beberapa fakta menarik tentang tren positif .

Orang-orang ini semua kelas atas di bidang pengembangan front end.


12
Ini needditentukan oleh persyaratan pengembang web, apakah akan memilikinya dalam spesifikasi ditentukan oleh faktor lain.
nicodemus13

14

Hanya ide untuk menu horizontal ...

Bagian dari HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

Bagian dari CSS

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Demo yang diperbarui dan kode lainnya

Contoh lain bagaimana menggunakannya dengan input teks - pilih fieldset induk


3
Sama sekali tidak jelas bagi saya bagaimana Anda bermaksud menggeneralisasi ini ke beberapa / banyak / sebagian besar kasus penggunaan pemilih orangtua, atau bahkan bagian mana dari CSS ini melakukan apa. Bisakah Anda menambahkan penjelasan yang menyeluruh?
Nathan Tuggy

2
Saya tidak mencoba menerapkan ini pada skenario dunia nyata, itulah mengapa saya mengatakan "Tidak untuk produksi". Tapi saya pikir itu bisa diterapkan ke menu 2-level hanya dengan lebar item tetap. "bagian mana dari CSS ini yang melakukan apa" - .test-sibling di sini sebenarnya adalah latar belakang dari item induk (baris terakhir CSS).
Ilya B.

2
Menambahkan penjelasan (bagian css dari jsfiddle, mulai dari "BAGIAN UTAMA") ... Dan saya salah - mungkin ada sejumlah sublevel.
Ilya B.

13

Inilah hack yang digunakan pointer-eventsdengan hover:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>


12

Ada plugin yang memperluas CSS untuk memasukkan beberapa fitur non-standar yang benar-benar dapat membantu ketika merancang situs web. Ini disebut EQCSS .

Salah satu hal yang EQCSS tambahkan adalah pemilih induk. Ini bekerja di semua browser, Internet Explorer 8 dan yang lebih tinggi. Berikut formatnya:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Jadi di sini kami telah membuka kueri elemen pada setiap elemen a.active, dan untuk gaya di dalam kueri itu, hal-hal seperti $parentmasuk akal, karena ada titik referensi. Peramban dapat menemukan induknya, karena sangat mirip dengan parentNodedi JavaScript.

Berikut adalah demo$parent dan demo lain $parentyang berfungsi di Internet Explorer 8 , serta tangkapan layar jika Anda tidak memiliki Internet Explorer 8 untuk mengujinya .

EQCSS juga mencakup meta-selektor : $prevuntuk elemen sebelum elemen yang dipilih dan $thishanya elemen yang cocok dengan kueri elemen, dan lainnya.


11

Sekarang tahun 2019, dan draft terbaru Modul Nesting CSS sebenarnya memiliki sesuatu seperti ini. Memperkenalkan @nestat-rules.

3.2. The Nesting At-Rule: @nest

Sementara bersarang langsung terlihat bagus, ini agak rapuh. Beberapa penyeleksi yang valid untuk bersarang, seperti .foo &, tidak diizinkan, dan mengedit pemilih dengan cara tertentu dapat membuat aturan tidak valid secara tak terduga. Juga, beberapa orang menemukan tantangan bersarang untuk membedakan secara visual dari deklarasi sekitarnya.

Untuk membantu dalam semua masalah ini, spesifikasi ini mendefinisikan aturan @nest, yang memberikan batasan lebih sedikit tentang bagaimana aturan gaya sarang secara valid. Sintaksnya adalah:

@nest = @nest <selector> { <declaration-list> }

Aturan @nest berfungsi secara identik dengan aturan gaya: dimulai dengan pemilih, dan berisi deklarasi yang berlaku untuk elemen yang cocok dengan pemilih. Satu-satunya perbedaan adalah bahwa pemilih yang digunakan dalam aturan @nest harus mengandung sarang, yang berarti mengandung pemilih bersarang di suatu tempat. Daftar penyeleksi mengandung sarang jika semua penyeleksi kompleks individualnya mengandung sarang.

(Salin dan tempel dari URL di atas).

Contoh penyeleksi yang valid berdasarkan spesifikasi ini:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

10

Secara teknis tidak ada cara langsung untuk melakukan ini. Namun, Anda dapat mengatasinya dengan jQuery atau JavaScript.

Namun, Anda dapat melakukan hal seperti ini juga.

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

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

Jika Anda ingin mencapai ini menggunakan jQuery di sini adalah referensi untuk pemilih induk jQuery .


9

W3C mengecualikan pemilih seperti itu karena dampak kinerja yang sangat besar pada browser.


27
Salah. karena DOM adalah pohon, mereka harus pergi ke orang tua sebelum sampai ke anak, jadi cukup kembali satu simpul saja. oo
NullVoxPopuli

9
Selektor CSS adalah antrian sehingga urutan pemilih dievaluasi daripada dokumen XPath atau hierarki DOM.
Paul Sweatte

3
@ rgb Setidaknya itulah yang mereka katakan kepada kami.
yunzen

9

Jawaban singkatnya adalah TIDAK ; kami tidak memiliki parent selectorpada tahap ini dalam CSS, tetapi jika Anda tidak harus menukar elemen atau kelas, opsi kedua menggunakan JavaScript. Sesuatu seperti ini:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});

Atau cara yang lebih singkat jika Anda menggunakan jQuery di aplikasi Anda:

$('a.active').parents('li').css('color', 'red'); // Your property: value;

5

Meskipun tidak ada pemilih induk dalam CSS standar saat ini, saya sedang mengerjakan proyek (pribadi) yang disebut kapak (mis. Augmented CSS Selector Syntax / ACSSSS ) yang, di antara 7 penyeleksi baru, mencakup keduanya:

  1. sebuah induk langsung pemilih <(yang memungkinkan pemilihan berlawanan dengan >)
  2. sebuah setiap nenek moyang pemilih ^ (yang memungkinkan pemilihan berlawanan dengan [SPACE])

kapak saat ini dalam tahap pengembangan BETA yang relatif awal.

Lihat demo di sini:

http://rounin.co.uk/projects/axe/axe2.html

(bandingkan dua daftar di sebelah kiri dengan gaya selektor standar dan dua daftar di sebelah kanan dengan gaya selektor)


3
Proyek ini dalam tahap Beta awal saat ini. Anda dapat (setidaknya saat ini) mengaktifkan penyeleksi kapak dalam gaya CSS Anda dengan memasukkan <script src="https://rouninmedia.github.io/axe/axe.js"></script>di bagian paling akhir dokumen html Anda, tepat sebelumnya </body>.
Rounin

4

Setidaknya hingga dan termasuk CSS 3 Anda tidak dapat memilih seperti itu. Tetapi ini dapat dilakukan dengan cukup mudah di JavaScript saat ini, Anda hanya perlu menambahkan sedikit vanilla JavaScript, perhatikan bahwa kodenya cukup pendek.

cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
    //console.log(el.nodeName)
    if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
        console.log(el)
    };
});
<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>


4

Ada ide?

CSS 4 akan lebih bagus jika menambahkan beberapa kait dalam berjalan mundur . Hingga saat itu dimungkinkan (walaupun tidak disarankan) untuk menggunakan checkboxdan / atau radio inputs untuk mematahkan cara yang biasa hal-hal yang terhubung, dan melalui itu juga memungkinkan CSS untuk beroperasi di luar ruang lingkup normal ...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... cukup kasar , tetapi hanya dengan CSS dan HTML dimungkinkan untuk menyentuh dan menyentuh kembali apa pun kecuali dari bodydan :rootdari mana saja dengan menautkan iddan forproperti radio/ checkbox inputs dan label pemicu ; kemungkinan seseorang akan menunjukkan cara menyentuh kembali mereka di beberapa titik.

Satu peringatan tambahan adalah bahwa hanya satu input dari yang spesifik yang idmungkin digunakan, pertama checkbox/ radio memenangkan keadaan berganti -ganti dengan kata lain ... Tetapi beberapa label semuanya dapat mengarah ke yang sama input, meskipun itu akan membuat HTML dan CSS terlihat lebih kotor.


... Saya berharap ada semacam solusi yang ada asli untuk CSS Level 2 ...

Saya tidak yakin dengan :penyeleksi lain , tetapi saya :checkeduntuk pra-CSS 3. Jika saya ingat dengan benar, itu adalah sesuatu [checked]yang mengapa Anda dapat menemukannya dalam kode di atas, misalnya,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... tetapi untuk hal-hal seperti ::afterdan :hover, saya sama sekali tidak yakin di mana versi CSS yang pertama kali muncul.

Itu semua menyatakan, tolong jangan pernah menggunakan ini dalam produksi, bahkan tidak dalam kemarahan. Sebagai lelucon tentu saja, atau dengan kata lain hanya karena sesuatu dapat dilakukan tidak selalu berarti harus demikian .


3

Tidak, Anda tidak dapat memilih induk hanya di CSS.

Tetapi karena Anda tampaknya sudah memiliki .activekelas, akan lebih mudah untuk memindahkan kelas itu ke li(bukan ke a). Dengan begitu Anda dapat mengakses keduanya lidan amelalui CSS saja.


1

Mengubah elemen induk berdasarkan elemen anak saat ini hanya dapat terjadi ketika kita memiliki <input>elemen di dalam elemen induk. Saat input mendapatkan fokus, elemen induk yang terkait dapat terpengaruh menggunakan CSS.

Contoh berikut akan membantu Anda memahami penggunaan :focus-withindalam CSS.

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}
<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>


1

Mungkin dengan ampersand di Sass :

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

Output CSS:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

2
itu benar, tetapi hanya jika Anda tahu pemilih sebelumnya.
Shahar

11
Ini tidak memilih h3induk, yang merupakan tujuannya. Ini akan memilih h3s yang merupakan keturunan .some-parent-selector.
Jacob Ford

1

Saya akan menyewa beberapa kode JavaScript untuk melakukan itu. Misalnya, dalam Bereaksi saat Anda mengulangi array, tambahkan kelas lain ke komponen induk, yang menunjukkannya berisi anak-anak Anda:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

Dan kemudian secara sederhana:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

0

Tidak ada pemilih induk css (dan karenanya dalam preprosesor css) karena "Alasan utama Kelompok Kerja CSS sebelumnya menolak proposal untuk penyeleksi induk terkait dengan kinerja browser dan masalah render tambahan."

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.