">"(보다 큼 기호) 가 CSS에서 의미하는 것

질문 : ">"(보다 큼 기호) CSS 선택기는 무엇을 의미합니까?

---

예를 들면 :

div > p.some_class {
  /* Some declarations */
}

> 기호는 정확히 무엇을 의미합니까?

답변

---

> 는 자식 결합 자 이며, 때때로 직계 후손 결합 자라고 잘못 불립니다. ¹

즉, 선택기 div > p.some_class 는 div 내부에 직접 중첩 된 .some_class 단락 만 일치 하고 더 내부에 중첩 된 단락은 일치하지 않습니다. div > p.some_class 와 일치하는 모든 요소가 div p.some_class 와 하위 결합 자 (공백)와 일치하므로 두 가지가 종종 혼동되는 것을 의미합니다.

하위 결합 자와 하위 결합자를 비교하는 그림 :

 

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

어떤 요소가 어떤 선택자와 일치합니까?

1. div > p.some_class 및 div p.some_class 모두와 일치
   이 p.some_class div 내부에 직접 위치하므로 두 요소간에 부모-자식 관계가 설정됩니다. "child"는 "descendant"유형이므로 모든 자식 요소는 정의상 하위 요소이기도합니다. 따라서 두 규칙이 모두 적용됩니다.
2. div p.some_class 일치
   이 p.some_class a로 포함되어 blockquote 내에서 div 보다는 div 자체. 이 p.some_class div 의 자손이지만 자식은 아닙니다. 손자입니다. 따라서 선택기에 하위 조합자가있는 규칙 만 적용됩니다.

 

¹ _{많은 사람들이 그것을 "직접 자식"또는 "직접 자식"이라고 부르기 위해 더 나아가지만, 그것은 완전히 불필요합니다 (그리고 저에게 엄청나게 짜증이납니다). 왜냐하면 자식 요소 는 어쨌든 정의상 즉각적이기 때문에 똑같은 것을 의미하기 때문입니다. "간접적 인 아이"는 없습니다.}

출처 : https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean