CSS 부모 선택기가 있습니까?

<li>앵커 요소의 직접 부모 인 요소를 어떻게 선택 합니까?

예를 들어 내 CSS는 다음과 같습니다.

li < a.active {
    property: value;
}

분명히 JavaScript 로이 작업을 수행하는 방법이 있지만 CSS 레벨 2에 고유 한 일종의 해결 방법이 있기를 바랍니다.

스타일을 지정하려는 메뉴가 CMS에 의해 분출되고 있으므로 활성 요소를 요소로 옮길 수 없습니다 <li>...

어떤 아이디어?

현재 CSS에서 요소의 부모를 선택할 수있는 방법이 없습니다.

그렇게 할 수있는 방법이 있다면 현재 CSS 선택기 사양 중 하나에 있습니다.

• 선택기 레벨 3 사양
• CSS 2.1 선택기 사양

즉, Selectors Level 4 실무 초안 에는 :has()이 기능을 제공 할 의사 클래스가 포함되어 있습니다. jQuery 구현 과 비슷하다 .

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

그러나 2020 년 5 월부터는 여전히 모든 브라우저에서 지원되지 않습니다 .

그 동안 부모 요소를 선택해야하는 경우 JavaScript를 사용해야합니다.

CSS에서만 부모를 선택할 수 있다고 생각하지 않습니다.

그러나 이미 .active수업 이있는 것처럼 보이 므로 해당 수업을 li(대신)으로 이동하는 것이 더 쉽습니다 a. 그렇게하면 CSS li와 avia 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 선택기“ General Sibling Combinator ”는 원하는 용도로 사용될 수 있습니다.

E ~ F {
    property: value;
}

이것은 F요소가 앞에 오는 요소 와 일치합니다 E.

내가 아는 한 CSS 2에는 없습니다. CSS 3에는 더 강력한 선택기가 있지만 모든 브라우저에서 일관되게 구현되지는 않습니다. 개선 된 선택기조차도 귀하의 예제에서 지정한 것을 정확하게 달성 할 것이라고는 생각하지 않습니다.

OP가 CSS 솔루션을 찾고 있었지만 jQuery를 사용하는 것은 간단합니다. 내 경우 에는 자식에 포함 된 태그 의 <ul>부모 태그 를 찾아야했습니다 . jQuery에는 선택기가 있으므로 포함 된 자식으로 부모를 식별 할 수 있습니다.<span><li>:has

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

ulID가 someId 인 자식 요소가있는 요소를 선택합니다 . 또는 원래 질문에 대답하려면 다음과 같은 방법으로 트릭을 수행해야합니다 (예상되지 않음).

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

의사 요소 :focus-within는 하위 항목에 포커스가있는 경우 부모를 선택할 수 있습니다.

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를 평가하는 방법을 이해해야합니다.

여기에 많은 기술적 인 설명이 있습니다.

Jonathan Snook는 CSS 평가 방법을 설명합니다 .

Chris Coyier는 부모 선택기의 대화에 대해 설명 합니다.

Harry Roberts는 다시 효율적인 CSS 선택기를 작성합니다 .

그러나 Nicole Sullivan은 긍정적 인 경향에 대한 흥미로운 사실을 가지고 있습니다 .

이 사람들은 모두 프론트 엔드 개발 분야에서 최고 수준입니다.

가로 메뉴에 대한 아이디어 ...

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

업데이트 된 데모 및 나머지 코드

텍스트 입력과 함께 사용하는 또 다른 예 -부모 필드 세트 선택

다음 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참조 점이 있기 때문에 의미가 있습니다. 브라우저는 parentNodeJavaScript 와 매우 유사하므로 부모를 찾을 수 있습니다 .

여기의 데모입니다$parent 및 다른 $parent인터넷 익스플로러 8에서 작동한다는 데모 뿐만 아니라, 경우에 스크린 샷이 당신이 테스트 주위에 인터넷 익스플로러 8이 없습니다 .

EQCSS도 포함 메타 선택기 : $prev요소의 선택된 요소 전에 $this많은 요소 쿼리와 일치하고, 요소 만합니다.

현재 2019 년이며 CSS Nesting Module 의 최신 초안에는 실제로 이와 같은 것이 있습니다. @nestat-rules 소개 .

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 selectorCSS에서이 단계에서,하지만 당신은 어쨌든 요소 또는 클래스를 교체 할 필요가없는 경우, 두 번째 옵션은 자바 스크립트를 사용하고 있습니다. 이 같은:

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에는 부모 선택기가 없지만 , 7 개의 새로운 선택자 중 다음 두 가지를 모두 포함하는 ax ( 개인화 된 CSS 선택기 구문 / ACSSSS ) 프로젝트를 진행 하고 있습니다.

1. 바로 위 부모 셀렉터 <(에 반대 선택을 할 수 있습니다 >)
2. 모든 조상 선택기 ^ (에 대향 선택 가능 [SPACE])

도끼 는 현재 비교적 초기 베타 개발 단계에 있습니다.

여기 데모를보십시오 :

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

(표준 선택기로 스타일이 지정된 왼쪽의 두 목록과 도끼 선택기로 스타일이 지정된 오른쪽의 두 목록 비교)

적어도 CSS 3 이하를 포함하면 선택할 수 없습니다. 그러나 오늘날 JavaScript에서는 쉽게 수행 할 수 있습니다. 바닐라 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는 거꾸로 걸어 갈 때 약간의 고리 를 추가하면 환상적 입니다. 그때까지이 (비록 수 없는 것이 좋습니다)를 사용 및 / 또는 이야 하는 휴식 도 CSS가 정상 범위의 외부에서 작동 할 수 있도록 일들이 연결되어 일반적인 방법을, 그 통해 ...checkboxradio input

/* 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에 고유 한 일종의 해결 방법이 있기를 바랍니다.

다른 :셀렉터 에 대해서는 잘 모르겠지만 :checkedCSS 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와 avia 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;
}

그렇게하기 위해 JavaScript 코드를 고용했습니다. 예를 들어, 배열을 반복 할 때 React에서 다른 클래스를 부모 구성 요소에 추가하면 자식이 포함되어 있음을 나타냅니다.

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

그리고 간단히 :

.parent {
    color: #000;
}

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

"CSS 워킹 그룹이 CSS 작업 그룹이 이전에 부모 선택기에 대한 제안을 거부 한 주요 이유는 브라우저 성능 및 증분 렌더링 문제와 관련이 있기 때문에"CSS 전처리기에는 부모 선택기가 없습니다.