Apakah ada pemilih induk 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 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?

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:

• Selektor Level 3 Spec
• CSS 2.1 Selectors Spec

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.

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.

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.

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");

Iya: :has()

Dukungan browser: tidak ada

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.

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

li.active > a {
    property: value;
}

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: ...
}

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.

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.

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)")

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>

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 :(

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.

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.

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

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>

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.

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; }
 */

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 .

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

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;

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)

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>

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;
}

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

/* ▼ - 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 .

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.

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>

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;
}

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;
}

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."