상위 선택기의 사용 사례

CSS에 "부모 선택기"가있는 것은 CSS가 실제로 사용할 수있는 것으로 정기적으로 언급됩니다. 나는 그 생각을 많이 생각한 것 같은 느낌이 들지만, 뇌에 유스 케이스를 요청할 때, 나는 하나를 생각하기가 어렵다는 것을 알게됩니다. 글쎄, 나는 단지 하나를 가지고 있었기 때문에 여기서 문서화 할 것이라고 생각했습니다.

고전적인 부모/자녀 :

 <div>
  <div> </div>
</div>

이 부모가 숨겨진 오버플로와 아이가 절대적인 포지셔닝을 사용하는 것이 의미가 있다고 말합니다.

 .parent {
   오버플로 : 숨겨진;
   위치 : 상대;
}

.어린이 {
   위치 : 절대; 
}

이제 자녀가 부모 외부에 위치하고 여전히 눈에 띄는 특별한 상황이 있다고 가정 해 봅시다. 숨겨진 오버플로는 여전히 대부분의 상황에서 여전히 좋은 기본값이므로 해당 규칙을 제자리에 두는 것이 가장 좋습니다. 그러나이 매우 구체적인 상황에서는 오버플로를 무시해야합니다.

 .special-Child {
   위치 : 절대; 
   하단 : -20px; / * 약간 외부에 있어야합니다 */
}

/ * 실제는 아니지만 포인트를 만들기 위해 */
.Special-Child : Parent (.parent) {
   오버플로 : 가시;
}

위의 선택기는 가짜이지만“.special-Child의 부모를 선택하십시오. 어쩌면 다음과 같을 수도 있습니다.

 .parent <.special-child><p> … 오른쪽이 아닌 왼쪽의 요소를 선택합니다. 누가 알아? 아마도 두 가지 둘 다 문제가 어떻게 든 문제가되고 최종 구문은 다른 것이 될 것입니다. 아니면 우리는 그것을 얻지 못할 것입니다. 나는 모른다. 내가 가진 실제 유스 케이스를 문서화하는 것.</p>
<p> “부모에게 다른 특별 수업을 사용하지 않는 이유는 무엇입니까?”라고 생각할 수도 있습니다. 나는 그럴 것입니다. 그러나 부모는 내가 선택한 클래스를 추가하지 않은 API를 통해 타사 라이브러리에 주입되었습니다. 궁극적으로, 나는 dom을 쿼리하여 .Special-Child를 찾아 부모를 찾은 다음 수업을 추가하여 DOM을 쿼리 한 사용자 정의 JavaScript를 작성하여 부모에게 클래스를 추가해야했습니다.</p>
<p> 부모 선택자를위한 다른 사용 사례가 있습니까?</p>
<p> 다음은 Uzair Hayat의 것입니다.</p>
<blockquote>
<p> 내 프로젝트에는 <input>가 </p>
<div>에 싸여 있습니다. <div>에는 <input>가 들어 오면 적용 해야하는 몇 가지 설계 요소가 있습니다. 나는 pseudo-elements 이후에 :: 이전에 :: 이전에 ::를 사용할 수 있었지만, 입력은 요소를 대체 할 때 그것을 지원하지 않습니다. 지금, 나는 입력이 초점을 맞추고 있는지 여부를 감지하고 부모 div에 클래스를 적용하기 위해 JavaScript. 내가 할 수 있으면 좋겠어…<pre rel="CSS" data-line=""> 입력 : 초점 : 부모 (div) : {이후 {
    디스플레이 : 블록;
    / * 집중시 디자인 변경 */
}