CSS selector - 주어진 자식이 있는 요소

CSS selector - 주어진 자식이 있는 요소

이 질문에는 이미 다음과 같은 답변이 있습니다.

CSS 부모 선택기가 있습니까? (33개 답변)

닫힘9년 전에.

특정 자식 요소가 있으면 모든 요소를 선택할 수 있는 선택기를 만들려고 합니다.예를 들어, 모두 선택<div>아이를 데리고<span>.

가능할까요?

특정 자식 요소가 포함된 경우 요소를 선택할 수 있습니까?

아쉽게도 아직.

CSS2 및 CSS3 셀렉터 사양은 어떤 종류의 부모 선택도 허용하지 않습니다.

---

사양 변경 사항에 대한 참고 사항

이것은 지금부터 이 게시물의 정확성에 대한 고지 사항입니다.CSS의 부모 선택자는 수년간 논의되어 왔습니다.합의점을 찾지 못했기 때문에 변화가 계속 일어나고 있습니다.이 답변을 최신 상태로 유지하도록 노력하겠지만, 사양 변경으로 인해 오류가 발생할 수 있음을 유의하겠습니다.

---

오래된 "Selectors Level 4 Working Draft"에서는 선택자의 "Subject"를 지정하는 기능을 설명했습니다.이 기능은 삭제되었으며 CSS 구현에는 사용할 수 없습니다.

제목은 셀렉터 체인에 적용되는 스타일을 갖는 요소입니다.

_{예제 HTML}

<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

이 선택기는 다음과 같이 스타일을 지정합니다.span요소

p span {
    color: red;
}

이 선택기는 다음과 같이 스타일을 지정합니다.p요소

!p span {
    color: red;
}

---

보다 최근의 "Selectors Level 4 Editor's Draft"에는 "관계형 유사 클래스::has()"

:has()작성자는 내용에 따라 요소를 선택할 수 있습니다.jQuery의 커스텀 의사 선택기*와의 호환성을 제공하기 위해 선택한 것으로 알고 있습니다.

어떤 경우든 위에서 예제를 계속 진행하여 다음을 선택합니다.p가 포함된 요소span다음을 사용할 수 있습니다.

p:has(span) {
    color: red;
}

---

_{* 이것은 jQuery가 selector selector selector selector selector selector selectors를 구현했는지 의문이 들게 합니다.}

2022년 12월 업데이트 - Firefox만 지원하지 않음has()

의사 선택기는 CSS Selectors 4 사양에서 제안되며, 구현되면 이 사용 사례를 다룰 것입니다.

이를 사용하기 위해 다음과 같은 내용을 적습니다.

.foo > .bar:has(> .baz) { /* style here */ }

다음과 같은 구조로:

<div class="foo">
  <div class="bar">
    <div class="baz">Baz!</div>
  </div>
</div>

이 CSS는 다음을 대상으로 합니다..bardiv - 둘 다 부모가 있기 때문에 .foo고 DOM.> .baz를 유효한 요소 대상으로 해결합니다.

---

원본 답변(역사적 용도로 남겨짐) - 이 부분은 더 이상 정확하지 않습니다.

완성도를 위해 Selectors 4 사양(현재 제안 중)에서 이것이 가능해질 것이라는 점을 지적하고 싶었습니다.구체적으로 다음과 같은 형식으로 사용되는 Subject Selectors(주제 선택기)를 가져옵니다.

!div > span { /* style here */

! 전에div다가 .span. 불행히도 CSS 지원의 일부로 이를 구현한 최신 브라우저는 없습니다.그러나 탐색의 길을 더 걷고 싶다면 Sel이라는 자바스크립트 라이브러리를 통해 지원할 수 있습니다.

나는 그것이 일반적으로 불가능하다는 것에 동의합니다.

CSS3가 할 수 있는 유일한 방법은 자식이 없는 요소를 선택하는 것입니다.

table td:empty
{
   background-color: white;
}

또는 자녀(텍스트 포함)가 있는 경우:

table td:not(:empty)
{
   background-color: white;
}

언급URL : https://stackoverflow.com/questions/4220327/css-selector-element-with-a-given-child