CSS Selector

프로젝트를 진행할 때 전체적인 디자인을 bootstrap이나 ant-design와 같은 라이브러리를 이용해서 개발했습니다. 커스텀이 필요한 상황에 css를 사용해야 했었는데, 기초가 부족한 것 같아 css를 공부해야겠다고 다짐했습니다.

Selector (선택자)

선택자는 말 그대로 내가 스타일을 지정하고 싶은 곳을 선택하는 것을 말합니다. 태그를 선택할 수도 있고, 태그의 id를 선택할 수도 있으며, 태그의 class, 태그의 속성을 이용해 아래와 같이 선택이 가능합니다.

div { /* 태그 선택 */ }
#hello { /* id가 hello인 태그 선택*/ }
.world { /* class가 world인 태그 선택 */ }

저는 위에만 사용해서 요소들을 선택을 했었는데 중첩되는 태그들은 class명을 이용했었습니다. class의 이름을 짓는 것에도 중첩되는 class명이 생겼기에 이름을 고민하는데 불편함을 겪었습니다.

선택자를 공부하면서 구글링 중 css로 게임을 할 수 있는 CSS Diner를 발견했고, 선택자에 알기 쉽게 그래픽으로 되어있어 공부하는데 많은 도움이 되었습니다.

아래의 글은 공부한 선택자입니다.

A + B : A태그 다음으로 오는 B태그 선택
A ~ B : A태그 다음으로 오는 B태그들 선택
A* : A안에 있는 모든 태그들 선택
A > B : A태그 안에 있는 B태그 선택
A :first-child : A태그 중 첫 번째 태그 선택
A :only-child: A 태그 안에 오직 하나의 자식 요소 선택
A :last-child: A태그의 마지막 자식 요소 선택
:nth-child(A) : 요소 중 A번 째 태그 선택
:nth-last-child(A) : 마지막 요소 인덱스를 1번으로 지정해 거꾸로 선택
:first-of-type : 해당 태그의 첫번 째 요소를 선택
:nth-of-type(A) : 모든 A번째 요소 선택 (An+b, odd : 홀수, even: 짝수를 이용해 여러 요소도 선택 가능)
A:only-of-type : A타입이 한 개 있는 요소 선택
A:last-of-type: A타입 마지막 요소 선택
A:empty : A태그에 비어져 있는 요소 선택
A:not(B) : A태그 안에 B요소가 아닌 요소들을 선택
A[attribute] : A태그에 attribute 속성이 들어 있는 태그들을 선택
[attribute=“value”] : attribute 속성 중 value인 태그들을 선택
[attribute^=“value”] : attribute 속성 중 value로 시작하는 태그들을 선택
[attribute$=“value”] : attribute 속성 중 value로 끝나는 태그들을 선택
[attribute*=“value”] : attribute 속성 중 value가 포함되는 태그들을 선택