CSS 선택자(SELECTOR)

CSS 선택자

CSS를 작성하기 위해서 선택자가 필요하다고 했습니다. 이에 대해 알아보죠.

기본 선택자

전체 선택자

모든 요소를 선택합니다. 즉, 모든 요소를 대상으로 CSS를 적용하는 것이죠.

*{}

태그 선택자

특정 태그를 선택합니다. 이때는 태그이름만 사용합니다.

div{}

id 선택자

emmet과 같습니다. #을 이용하면 되죠.

#id{}

class 선택자

.을 이용합니다. 해당 클래스를 가진 요소에 적용한다는 의미죠.

.class-name{}

어트리뷰트 선택자

emmet에서 []를 사용하면 속성을 넣은 태그를 생성할 수 있었던 것처럼, []를 사용하면 특정 속성을 가지고 있는 태그를 선택합니다.

a[href]{}
div[class='class-name']{}

익숙해지면 클래스명이 어떤 단어로 끝나는지도 비교할 수 있을 것입니다. 이에 대해선 검색해봐야겠죠?

후손 / 자식 / 형제 선택자

후손 선택자

후손은 하위의 모든 태그들을 말합니다. 자식태그보다 하위도 포함한다는 것이죠.

div p{} // div태그 밑의 모든 p태그

자식 선택자

하위의 모든 태그가 아닌 자식만 선택하는 방법도 있습니다. >을 이요하면 됩니다.

div > p{} // div태그의 자식 중 p 태그

형제 선택자

형제 선택자는 같은 부모를 공유하는 요소이면서 자신보다 나중에 나온 요소입니다. ~를 이용합니다.

<div>
  <ul>
  </ul>
  <span>
  </span>
  <ul>
  </ul>
  <ul>
  </ul>
</div>

span ~ ul{} // span 밑의 모든 ul을 의미합니다.

인접 형제 선택자

모든 형제를 찾는 것이 아니라 바로 다음 형제를 찾고 싶다면 +를 이용하세요

span + ul{} // span 바로 다음 ul을 의미합니다.

기타

이것 이외에도 가상 클래스 선택자, UI요소 상태 선택자, 구조 가상 클래스 선택자가 있습니다. 찾아보는 것도 좋습니다.