มีตัวเลือกพาเรนต์ CSS หรือไม่

ฉันจะเลือก<li>องค์ประกอบที่เป็น parent โดยตรงขององค์ประกอบ anchor ได้อย่างไร

เป็นตัวอย่าง CSS ของฉันจะเป็นดังนี้:

li < a.active {
    property: value;
}

เห็นได้ชัดว่ามีวิธีการทำเช่นนี้กับ JavaScript แต่ฉันหวังว่าจะมีวิธีการแก้ปัญหาบางอย่างที่มีอยู่ใน CSS ระดับ 2

เมนูที่ฉันพยายามจัดแต่งสไตล์นั้นถูกพ่นออกมาโดย CMS ดังนั้นฉันจึงไม่สามารถย้ายองค์ประกอบที่ใช้งานอยู่ไปยัง<li>องค์ประกอบ ... (เว้นแต่ฉันจะกำหนดธีมของโมดูลการสร้างเมนู

ความคิดใด ๆ

ขณะนี้ยังไม่มีวิธีในการเลือกพาเรนต์ขององค์ประกอบใน CSS

หากมีวิธีที่จะทำมันจะอยู่ในรายละเอียดตัวเลือก CSS ปัจจุบันอย่างใดอย่างหนึ่ง:

• Selectors ระดับ 3 Spec
• CSS 2.1 Selectors Spec

ที่กล่าวมาร่างการทำงานของ Selectors ระดับ 4 นั้นมี:has()คลาสหลอกที่จะให้ความสามารถนี้ มันจะคล้ายกับการดำเนินงาน jQuery

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

อย่างไรก็ตามเมื่อเดือนพฤษภาคมปี 2020 นี้ยังคงไม่ได้รับการสนับสนุนจากเบราว์เซอร์

ในระหว่างนี้คุณจะต้องใช้ JavaScript หากคุณต้องการเลือกองค์ประกอบหลัก

ฉันไม่คิดว่าคุณสามารถเลือกผู้ปกครองใน CSS เท่านั้น

แต่เมื่อคุณมี.activeคลาสแล้วมันจะง่ายกว่าถ้าจะย้ายคลาสนั้นไปที่li(แทนที่จะเป็นa) ด้วยวิธีนี้คุณสามารถเข้าถึงได้ทั้งCSS liและaผ่าน CSS เท่านั้น

คุณสามารถใช้สคริปต์นี้ :

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

นี่จะเป็นการเลือกพาเรนต์ของการป้อนข้อความใด ๆ แต่เดี๋ยวก่อนยังมีอีกมาก หากคุณต้องการคุณสามารถเลือกผู้ปกครองที่ระบุ:

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

หรือเลือกเมื่อมีการใช้งาน:

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

ลองดู HTML นี้:

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

คุณสามารถเลือกว่าspan.helpเมื่อinputมีการใช้งานและแสดงมัน:

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

มีความสามารถอื่น ๆ อีกมากมาย; เพียงตรวจสอบเอกสารของปลั๊กอิน

BTW ใช้งานได้ใน Internet Explorer

ดังที่ได้รับการกล่าวถึงจากคนอื่น ๆ สองสามคนไม่มีวิธีในการจัดวางองค์ประกอบขององค์ประกอบโดยใช้ CSS เพียงอย่างเดียว แต่การทำงานต่อไปนี้กับjQuery :

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

ใช่: :has()

รองรับเบราว์เซอร์: ไม่มี

ไม่มีตัวเลือกหลัก ในแบบที่ไม่มีตัวเลือกพี่น้องก่อนหน้า เหตุผลที่ดีอย่างหนึ่งที่ไม่มีตัวเลือกเหล่านี้คือเนื่องจากเบราว์เซอร์ต้องผ่านลูกหลานขององค์ประกอบทั้งหมดเพื่อพิจารณาว่าควรใช้คลาสหรือไม่ ตัวอย่างเช่นถ้าคุณเขียนว่า:

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

จากนั้นเบราว์เซอร์จะต้องรอจนกว่าจะมีการโหลดและแยกวิเคราะห์ทุกอย่างจนกว่าจะมี</body>การตรวจสอบว่าหน้าควรจะเป็นสีแดงหรือไม่

บทความสาเหตุที่เราไม่มีตัวเลือกพาเรนต์อธิบายในรายละเอียด

ไม่มีวิธีการทำเช่นนี้ใน CSS 2 คุณสามารถเพิ่มคลาสไปที่liและอ้างอิงถึงa:

li.active > a {
    property: value;
}

ลองสลับaเป็นblockจอแสดงผลแล้วใช้สไตล์ที่คุณต้องการ aองค์ประกอบจะเติมliองค์ประกอบและคุณจะสามารถที่จะปรับเปลี่ยนรูปลักษณ์ของตนตามที่คุณต้องการ อย่าลืมตั้งค่าliช่องว่างภายในเป็น 0

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

ตัวเลือก CSS“ อาจใช้Combibator ทั่วไป ” สำหรับสิ่งที่คุณต้องการ:

E ~ F {
    property: value;
}

สิ่งนี้ตรงกับFองค์ประกอบใด ๆที่นำหน้าด้วยEองค์ประกอบ

ไม่ได้อยู่ใน CSS 2 เท่าที่ฉันทราบ CSS 3 มีตัวเลือกที่แข็งแกร่งกว่า แต่ไม่ได้ใช้งานอย่างสม่ำเสมอในเบราว์เซอร์ทั้งหมด แม้จะมีตัวเลือกที่ปรับปรุงแล้ว แต่ฉันก็ไม่เชื่อว่ามันจะสำเร็จตามที่คุณระบุในตัวอย่างของคุณ

ฉันรู้ว่า OP กำลังมองหาโซลูชัน CSS แต่มันง่ายที่จะบรรลุโดยใช้ jQuery ในกรณีของฉันฉันต้องการที่จะหาสิ่งที่<ul>แท็กหลักสำหรับแท็กที่มีอยู่ในเด็ก<span> <li>jQuery มี:hasตัวเลือกดังนั้นจึงเป็นไปได้ที่จะระบุผู้ปกครองโดยเด็ก ๆ ที่มี:

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

จะเลือกulองค์ประกอบที่มีองค์ประกอบของเด็กที่มี ID someId หรือเพื่อตอบคำถามเดิมสิ่งต่อไปนี้ควรทำเคล็ดลับ (ยังไม่ทดลอง):

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

องค์ประกอบหลอก:focus-withinอนุญาตให้ผู้ปกครองที่จะเลือกถ้าผู้สืบทอดมีโฟกัส

องค์ประกอบสามารถเน้นถ้ามีtabindexแอตทริบิวต์

การสนับสนุนเบราว์เซอร์สำหรับการโฟกัสภายใน

TabIndex

ตัวอย่าง

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

นี่คือแง่มุมที่กล่าวถึงมากที่สุดของข้อมูลจำเพาะSelectors Level 4 ด้วยสิ่งนี้ผู้เลือกจะสามารถจัดองค์ประกอบตามลูกของมันโดยใช้เครื่องหมายอัศเจรีย์หลังจากตัวเลือกที่กำหนด (!)

ตัวอย่างเช่น:

body! a:hover{
   background: red;
}

จะตั้งค่าสีพื้นหลังสีแดงหากผู้ใช้เลื่อนผ่านจุดยึดใด ๆ

แต่เราต้องรอการติดตั้งของเบราว์เซอร์ :(

คุณอาจลองใช้ไฮเปอร์ลิงก์เป็นพาเรนต์จากนั้นเปลี่ยนองค์ประกอบภายในในโฮเวอร์ แบบนี้:

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

วิธีนี้คุณสามารถเปลี่ยนสไตล์ในแท็กด้านในหลาย ๆ แท็กโดยยึดตามโรลโอเวอร์ขององค์ประกอบหลัก

ขณะนี้ไม่มีตัวเลือกหลักและไม่มีการกล่าวถึงในการพูดคุยของ W3C คุณต้องเข้าใจว่า CSS ได้รับการประเมินโดยเบราว์เซอร์อย่างไรเพื่อให้เข้าใจจริง ๆ ว่าเราต้องการหรือไม่

มีคำอธิบายทางเทคนิคมากมายที่นี่

โจนาธานสตึอธิบายถึงวิธีการประเมิน CSS

คริส Coyier ในการเจรจาของตัวเลือกสำหรับผู้ปกครอง

แฮร์รี่โรเบิร์ตอีกครั้งเกี่ยวกับการเขียนที่มีประสิทธิภาพตัวเลือก CSS

แต่นิโคลซัลลิแวนมีข้อเท็จจริงที่น่าสนใจบางอย่างเกี่ยวกับแนวโน้มในเชิงบวก

คนเหล่านี้ล้วนเป็นชนชั้นสูงในด้านการพัฒนาส่วนหน้า

แค่ไอเดียสำหรับเมนูแนวนอน ...

ส่วนหนึ่งของ HTML

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

ส่วนหนึ่งของ 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%; }

อัปเดตการสาธิตและรหัสที่เหลือ

อีกตัวอย่างวิธีใช้กับอินพุตข้อความ - เลือก parentset fieldset

นี่คือแฮ็คที่ใช้pointer-eventsกับ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>

มีปลั๊กอินที่ขยาย CSS เพื่อรวมคุณสมบัติที่ไม่ได้มาตรฐานซึ่งสามารถช่วยได้จริงๆเมื่อออกแบบเว็บไซต์ มันเรียกว่าEQCSS

หนึ่งในสิ่งที่ EQCSS เพิ่มคือตัวเลือกหลัก ใช้งานได้กับเบราว์เซอร์ทั้งหมด, Internet Explorer 8 ขึ้นไป นี่คือรูปแบบ:

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

ดังนั้นที่นี่เราได้เปิดการสืบค้นองค์ประกอบในทุกองค์ประกอบa.activeและสำหรับสไตล์ภายในแบบสอบถามนั้นสิ่งต่าง ๆ ที่$parentสมเหตุสมผลเนื่องจากมีจุดอ้างอิง เบราว์เซอร์สามารถค้นหาพาเรนต์ได้เพราะมันคล้ายกันมากparentNodeใน JavaScript

นี่คือตัวอย่าง$parentและอีก$parentตัวอย่างที่ทำงานใน Internet Explorer 8เช่นเดียวกับภาพหน้าจอในกรณีที่คุณไม่มี Internet Explorer 8 อยู่รอบ ๆ เพื่อทดสอบด้วยรอบในการทดสอบด้วย

EQCSS ยังมีตัวเลือกเมตา : $prevสำหรับองค์ประกอบก่อนองค์ประกอบที่เลือกและ$thisสำหรับองค์ประกอบเหล่านั้นที่ตรงกับแบบสอบถามองค์ประกอบและอื่น ๆ

ตอนนี้เป็นปี 2019 และร่างล่าสุดของ CSS Nesting Moduleจริง ๆ แล้วมีอะไรทำนองนี้ แนะนำ@nestกฎ

3.2 กฎการทำรัง: @nest

ในขณะที่การทำรังโดยตรงดูดีมันค่อนข้างบอบบาง ตัวเลือกการซ้อนที่ถูกต้องบางตัวเช่น. foo &, ไม่ได้รับอนุญาตและการแก้ไขตัวเลือกในบางวิธีอาจทำให้กฎไม่ถูกต้องโดยไม่คาดคิด เช่นกันบางคนพบว่าการทำรังที่ท้าทายเพื่อแยกความแตกต่างจากการประกาศโดยรอบ

เพื่อช่วยในปัญหาทั้งหมดเหล่านี้ข้อมูลจำเพาะนี้กำหนดกฎ @nest ซึ่งมีข้อ จำกัด น้อยลงเกี่ยวกับวิธีการทำรังกฎสไตล์ที่ถูกต้อง ไวยากรณ์ของมันคือ:

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

ฟังก์ชัน @nest กฎเหมือนกับกฎสไตล์: เริ่มต้นด้วยตัวเลือกและมีการประกาศที่ใช้กับองค์ประกอบที่ตัวเลือกตรงกับ ข้อแตกต่างเพียงอย่างเดียวคือตัวเลือกที่ใช้ในกฎ @nest จะต้องประกอบด้วยที่ซ้อนกันซึ่งหมายความว่ามีตัวเลือกการซ้อนอยู่ภายใน รายการของตัวเลือกจะมีการซ้อนกันหากตัวเลือกที่ซับซ้อนแต่ละรายการนั้นมีการซ้อนกันอยู่

(คัดลอกและวางจาก URL ด้านบน)

ตัวอย่างตัวเลือกที่ใช้ได้ภายใต้ข้อกำหนดนี้:

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

ในทางเทคนิคไม่มีวิธีการทำเช่นนี้โดยตรง อย่างไรก็ตามคุณสามารถเรียงลำดับนั้นด้วย jQuery หรือ JavaScript

อย่างไรก็ตามคุณสามารถทำสิ่งนี้ได้เช่นกัน

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

jQuery

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

ถ้าคุณต้องการเพื่อให้บรรลุนี้ใช้ jQuery นี่คือการอ้างอิงสำหรับการเลือกผู้ปกครอง jQuery

W3C ไม่รวมตัวเลือกดังกล่าวเนื่องจากมีผลกระทบอย่างมากต่อการทำงานของเบราว์เซอร์

คำตอบสั้น ๆ คือไม่ ; เราไม่ได้parent selectorอยู่ในขั้นตอนนี้ใน CSS แต่ถ้าคุณไม่ต้องสลับองค์ประกอบหรือคลาสอย่างไรก็ตามตัวเลือกที่สองคือการใช้ JavaScript บางสิ่งเช่นนี้

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

หรือวิธีที่สั้นกว่านี้หากคุณใช้jQueryในแอปพลิเคชันของคุณ:

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

แม้ว่าจะไม่มีตัวเลือกหลักใน CSS มาตรฐานในปัจจุบัน แต่ฉันกำลังทำงานในโครงการ (ส่วนบุคคล) ที่เรียกว่าax (เช่นAugmented CSS Selector Syntax / ACSSSS ) ซึ่งมี 7 ตัวเลือกใหม่รวมถึง:

1. ผู้ปกครองทันทีเลือก<(ซึ่งจะช่วยให้การเลือกตรงกันข้ามกับ>)
2. ใด ๆ เลือกบรรพบุรุษ ^ (ซึ่งจะช่วยให้การเลือกตรงกันข้ามกับ[SPACE])

ขวานปัจจุบันอยู่ในช่วงพัฒนาเบต้าค่อนข้างเร็ว

ดูตัวอย่างได้ที่นี่:

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

(เปรียบเทียบทั้งสองรายการทางด้านซ้ายสไตล์กับตัวเลือกมาตรฐานและทั้งสองรายการทางด้านขวาสไตล์ด้วยตัวเลือกขวาน)

อย่างน้อยที่สุดและรวมถึง CSS 3 คุณไม่สามารถเลือกเช่นนั้นได้ แต่ก็สามารถทำได้ง่ายๆในปัจจุบันใน JavaScript คุณเพียงแค่ต้องเพิ่มเล็กน้อยของ vanilla JavaScript โปรดสังเกตว่ารหัสนั้นค่อนข้างสั้น

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>

ความคิดใด ๆ

CSS 4 จะเป็นแฟนซีถ้าจะเพิ่มบางตะขอเข้าไปข้างหลังเดิน จนกว่าจะมีความเป็นไปได้ (แม้ว่าจะไม่แนะนำก็ตาม) ในการใช้checkboxและ / หรือradio inputsเพื่อทำลายวิธีปกติที่สิ่งต่าง ๆ เชื่อมต่อกันและผ่านทางที่อนุญาตให้ CSS ทำงานนอกขอบเขตปกติ ...

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

... ขั้นต้นสวยแต่มีเพียง CSS และ HTML เป็นไปได้ที่จะสัมผัสและแตะต้องอะไรก็ได้นอกจากbodyและ:rootจากที่ใดก็ได้โดยการเชื่อมโยงidและforคุณสมบัติของradio/ checkbox inputsและlabel ทริกเกอร์ ; คนที่มีแนวโน้มว่าจะแสดงวิธีการสัมผัสพวกเขาอีกครั้งในบางจุด

หนึ่งข้อแม้เพิ่มเติมว่ามีเพียงหนึ่ง inputของที่เฉพาะเจาะจงidอาจจะนำมาใช้เป็นครั้งแรกcheckbox/ radio ชนะรัฐสลับในคำอื่น ๆ ... แต่หลายป้ายสามารถชี้ไปที่เดียวกันinputแต่ที่จะทำให้ทั้ง HTML และ CSS ดูแม้เร่อร่า

---

... ฉันหวังว่าจะมีวิธีแก้ปัญหาบางอย่างที่มีอยู่ใน CSS ระดับ 2 ...

ฉันไม่แน่ใจเกี่ยวกับ:ตัวเลือกอื่น ๆแต่:checkedสำหรับ pre-CSS 3 ถ้าฉันจำได้อย่างถูกต้องมันเป็นสิ่ง[checked]ที่เป็นสาเหตุที่คุณอาจพบมันในรหัสข้างต้นตัวอย่างเช่น

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

... แต่สำหรับสิ่งที่ชอบ::afterและ:hoverฉันไม่แน่ใจเลยว่า CSS เวอร์ชันไหนจะปรากฏครั้งแรก

โปรดระบุว่าอย่าใช้สิ่งนี้ในการผลิตแม้แต่ในความโกรธ เป็นเรื่องตลกแน่ใจหรือในคำอื่น ๆ เพียงเพราะสิ่งที่สามารถทำได้ไม่ได้หมายความว่ามันควรจะเป็น

ไม่คุณไม่สามารถเลือกพาเรนต์ใน CSS เท่านั้น

แต่เมื่อคุณมี.activeคลาสแล้วมันจะง่ายกว่าถ้าจะย้ายคลาสนั้นไปที่li(แทนที่จะเป็นa) ด้วยวิธีนี้คุณสามารถเข้าถึงได้ทั้งCSS liและaผ่าน CSS เท่านั้น

การเปลี่ยนองค์ประกอบหลักตามองค์ประกอบลูกสามารถเกิดขึ้นได้เมื่อเรามี <input>องค์ประกอบภายในองค์ประกอบหลักเท่านั้น เมื่ออินพุตได้รับโฟกัสอิลิเมนต์พาเรนต์ที่เกี่ยวข้องจะได้รับผลกระทบโดยใช้ CSS

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้งาน:focus-withinCSS

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

เป็นไปได้ด้วยเครื่องหมายในSass :

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

เอาต์พุต CSS:

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

ฉันจะจ้างจาวาสคริปต์เพื่อทำเช่นนั้น ตัวอย่างเช่นในการตอบสนองเมื่อคุณวนซ้ำแถวอื่นให้เพิ่มคลาสอื่นลงในคอมโพเนนต์พาเรนต์ซึ่งระบุว่ามันมีลูก ๆ ของคุณ:

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

แล้วก็:

.parent {
    color: #000;
}

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

ไม่มีตัวเลือกพาเรนต์ css (และใน css preprocessors) เนื่องจาก "สาเหตุหลักที่ทำให้กลุ่มการทำงาน CSS ก่อนหน้านี้ปฏิเสธข้อเสนอสำหรับตัวเลือกพาเรนต์จะเกี่ยวข้องกับประสิทธิภาพของเบราว์เซอร์และปัญหาการเรนเดอร์เพิ่มเติม"