Combinators

Combinator

여러가지 selectors를 선택할 수 있음. 무엇을 선택할지 더 자세히 정할 수 있음

combinator를 쓰면 우선순위가 높아짐

 

Combinator의 종류

• Adjacent sibiling
• General sibiling
• Child
• Descendant

 

Adjacent sibiling

2개 이상일 수 있음

h2의 '바로' 다음에 오는 p 태그에 적용

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>

 

General sibiling

바로 앞에 올 필요 없고, 같은 레벨에만 있으면 적용됨

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>

Child

바로 내려오는 자식에게만 적용

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>

Descendant

직접 자식이냐 아니냐는 중요하지 않음. 모든 자식은 다 적용

많이 사용되는 combinator

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>