[CSS] 결합자(combinator)

결합자를 이용하면 여러 선택자를 하나로 합쳐서 원하는 바를 정확히 선택할 수 있음

 

결합자를 사용하면 더 높은 수준의 명시도를 생성하게됨 

 

어떤 결합자를 사용하느냐에 따라 성능이 떨어질 수 있음 (직접 선택자를 사용하는 게 성능 측면에서는 좋음) (클래스와 id는 성능이 뛰어남! -> 이들을 결합하면 성능이 뛰어남!) 

 

정보값이 많은 규칙이 정보값이 적은 규칙보다 우선하게 됨 (아래 이미지 참조) -> 구체적인 규칙일수록 명시도가 올라감

#product-overview h1 > h1

 

 

상속 (자동으로 따라 입력되는 것) 과 혼돈하지 말기 ! 

 

주요 결합자

4개의 주요결합자

 

결합자를 사용하면 규칙을 좀 더 정확히 설명할 수 있고 선택자에 더 많은 정보를 전달함으로써 요소를 선택할 수 잉ㅆ다 

 

2개 이상의 선택자도 결합시킬 수 있다~  (4개의 주요 결합자를 이용해서! ) 

 

 

1. Adjacent Sibling : 인접 형제 결합자 (+로 결합)

 - 이걸 쓰려면 직속 형제여야 함 ! (아래 처럼 h2 p 사이에 h3가 있을 때는 적용x)

 

CSS

h2 + p {
color: red;
}

 

<div>

<h2>Not applied</h2>
<p>CSS applied</p> 

<h2>Not applied</h2> 

<h3>Not applied</h3> 

<p>Not applied</p> 

<h2>Not applied</h2> 

<p>CSS applied</p>
</div>

 

알아야 할것

- elements share the same parent

- second element comes immediately after first element

 

 

2. General sibling : 좀 더 유연함, 

 

CSS

h2 ~ p {
color: red;
}

 

<div>

<h2>Not applied</h2>
<p>CSS applied</p> 

<h2>Not applied</h2> 

<h3>Not applied</h3> 

<p>CSS applied</p>
</div>

 

여기서 h2 형제가 있다는 점 자체가 중요함! p 태그와 h2 요소가 동일한 ㅜㅅ준에 있ㅆ기만 하면 됨 

 

알아야 할것

- elements share the same parent 동일한 부모를 가져야함 

- second element comes after first element (반드시 바로는 아니어도 됨)

 

3. child : 어떤 자식을 대상으로 하는지 정확히 설정할 수 있음 

 

CSS

div > p {
color: red;
}

 

<div>

<div>Not applied</div>
<p>CSS applied</p> 

<div>Not applied</div>

<article>

    <p>Not applied</p>

</article>

<p>CSS applied</p>
</div>

 

 

 div 태그 내 직속 자식인 p 태그에만 해당 스타일을 적용시킴. 물론 둘 이상의 선택자도 결합시킬 수 있음. 

 

결합자와는 다름, 결합자는 직속부모인지 여부가 상관없음  

 

알아야 할것

- Second element is a direct child of first element. 

 

 

4. 자손 결합자 : 수준이 중요하지 않음 (젤 자주 사용할 거임!)

 

CSS

div  p {
color: red;
}

 

<div>

<div>Not applied</div>
<p>CSS applied</p> 

<div>Not applied</div>

<article>

    <p>CSS applied</p>

</article>

<p>CSS applied</p>
</div>

 

모든 p태그가 빨간색으로 나옴 div 태그의 직속 자식 여부에 관계없이 DOM 상에 div 태그가 있기만 하면 됨, 직속 부모일 필요도 없음 

 

알아야 할것

- Second element is a descendant of first element. 

 

 

 

선택자&결합자 퀴즈 

 

규칙 (rule) : 선택자 (스타일링하는 대상)과 선언(스타일링 방법)의 조합

명시도 (specificity) : 여러 css 규칙이 동일한 요소를 대상으로 할 때 발생하는 충돌을 해결하는 것이 핵심