(CSS 선택자 2편) combinator, attribute란?

 

 

이전에 css 선택자 중 pseudo selector를 설명한 적이 있다. 

 

이전 포스팅에서도 언급했지만 html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다.

 

이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다.

 

css selector 종류는 아래와 같다. 

 

• id와 class
• pseudo selector
• combinator
• attribute

이중 id와 class, 그리고 pseudo selector는 이전에 다루었고, 이번 포스팅에서는 combinator와 attribute를 다룬다.

 

 

 

combinator

combinator는 결합자라고 불리는데, 선택자를 결합하는 형태로 선택을 하기 때문이다.

 

• 부모 자식 : 부모 아래에 있는 모든 자식이 선택됨
  • 예) div span : div 자식의 모든 span이 선택됨
• 부모 > 자식 :  부모 바로 아래에 있는 자식 한 개만 선택됨
  • 예) div > span : div 자식중 가장 첫 번째 span이 선택됨
• 요소1 + 요소2 : 요소1의 뒤에 있는 요소중 가장 먼저 조건에 해당하는 첫번째 요소 한개만 선택됨
  • 예) p + img : p 뒤에 있는 요소중 가장 먼저 오는 img 요소 하나만 선택됨
• 요소1 ~ 요소2 : 요소1 뒤에 있는 요소 중 조건에 해당하는 모든 요소가 선택됨 
  • 예) p ~ img : p 뒤에 있는 img 요소 모두가 선택됨

 

attribute

특정 속성을 갖고 있는 요소를 선택할 때 attribute를 사용한다.

• 요소[속성="값"] : 속성값이 정확히 일치하는 요소 선택
  • 예) img[src="a"] 일 때 <img src="a" / >요소가 선택될 수 있음
• 요소[속성^="값"] :  해당 값으로 시작하는 요소 선택
  • 예) img[src="a"]일 때 <img src="ab" / >요소가 선택될 수 있음
• 요소[속성~="값"] : 공백으로 구분된 값 목록 중에 해당 값이 포함된 요소 선택
  • 예) img[src~="a"]일 때 <img src="a b" / >요소가 선택될 수 있음
• 요소[속성*="값"] : 해당 값을 포함하는 요소 선택
  • 예) img[src*="ab"] 일 때 <img src="cabd" / >요소가 선택될 수 있음
• 요소[속성$="값"] : 해당 값이 끝에 오는 요소 선택
  
  • 예) img[src$="ab"] 일 때 <img src="cdab" / >요소가 선택될 수 있음