[CSS]선택자 정리

CSS 선택자란 무엇인가요?

CSS에서 원하는 스타일을 적용시키기 위해서, 요소를 선택해야합니다. CSS에서 요소를 선택하는 방법은 여러가지 방법이 있습니다.

 

CSS를 잘다루는 사람 일수록 선택자를 잘 다뤄서 CSS의 코드의 길이를 짧게 할 수 있습니다.

CSS3 선택자

종류	사용 방법	설명
전체 선택자	* {속성 선언;}	모든 태그에 스타일을 적용합니다.
타입 선택자	태그 {속성 선언;}	지정한 태그에 스타일을 적용합니다.
클래스 선택자	.클래스 이름 {속성 선언;}	지정한 클래스에 스타일을 적용합니다.
아이디 선택자	#아이디 {속성 선언;}	지정한 아이디에 스타일을 적용합니다.

 

CSS3 복합 선택자-작성중

구분	조합 방법	설명
후손 선택자	선택자 A 선택자 B	선택자 B가 선택자 A에 반드시 포함되어 있을 경우에 선택합니다.
자손 선택자	선택자 A > 선택자 B	부모 선택자 A의 직계 자손인 선택자 B를 선택합니다.
인접 형제 선택자	선택자 A + 선택자 B	선택자 A 바로 다음에 위치한 선택자 B를 선택합니다.
일반 형제 선택자	선택자 A ~ 선택자 B	선택자 A 뒤에 인접하여 나타나는 모든 선택자 B를 선택합니다.
그룹 선택자	선택자 A, 선택자 B	선택자 A와 선택자 B를 모두 선택합니다.

후손이란 선택자 A의 모든 자식들을 말합니다.

 

CSS3 가상 선택자(의사 클래스)란 무엇인가요?

가상 선택자는 영어로 Pseudo-class로 MDN(https://developer.mozilla.org/ko/docs/Glossary/Pseudo-class)에서는 의사 클래스로 번역하고 있습니다. 가상 선택자는 실제로 존재하는 요소는 아니고 특정한 상황에서만 나타나는 클래스지만 그런 클래스를 선택자로 선택하는 것입니다.

사용 방법	설명	사용 예
:link 선택자	웹 문서에 사용자가 방문하지 않았던 곳을 표시합니다.	a:link { color:yellow; }
:visited 선택자	웹 문서에 사용자가 방문한 곳을 표시합니다.	a:visited {color:green;}
:active 선택자	웹 문서에서 사용자가 링크를 클릭하는 순간을 나타냅니다.	a:active {color:black;}
:hover 선택자	웹 문서에 사용자가 링크에 마우스 포인터를 올리는 순간을 나타냅니다.특히 메뉴 바에 마우스를 올려서 세부 메뉴를 나타내는 방법에 많이 사용합니다.	a:hover {color:red;}
:focus	해당 요소에 초점이 맞춰졌을 때 적용됩니다. 키보드의 Tab을 눌러서 초점을 맞춰 보시면 동작합니다.	a:focus{color:pink;}

 

선택자	설명
E::after	요소의 내용 뒤에 가상 요소를 생성하고 스타일을 적용합니다.
E::before	요소의 내용 앞에 가상 요소를 생성하고 스타일을 적용합니다.
E:checked	라디오 버튼이나 체크박스 등에서 선택된 상태의 요소를 선택합니다.
E:disabled	비활성화된 상태의 요소를 선택합니다.
E:empty	내용이 없는 요소를 선택합니다.
E:enabled	활성화된 상태의 요소를 선택합니다.
E:first-child	부모 요소의 첫 번째 자식 요소를 선택합니다.
E:last-child	부모 요소의 마지막 자식 요소를 선택합니다.
E:not(selector)	주어진 선택자와 일치하지 않는 요소를 선택합니다.
E:nth-child(n)	부모 요소의 n번째 자식 요소를 선택합니다.
E:nth-last-child(n)	부모 요소의 끝에서부터 n번째 자식 요소를 선택합니다.
E:nth-of-type(n)	부모 요소의 특정 유형에서 n번째 자식 요소를 선택합니다.
E:nth-last-of-type(n)	부모 요소의 특정 유형에서 끝에서부터 n번째 자식 요소를 선택합니다.
E:only-child	부모 요소의 유일한 자식 요소를 선택합니다.
E:only-of-type	부모 요소에서 유일한 특정 유형의 자식 요소를 선택합니다.
:root	문서 트리의 최상위 요소(E)를 선택합니다.
E:target	URL의 fragment 식별자와 일치하는 요소를 선택합니다.

속성 선택자

속성 선택자는 해당 요소가 특정한 속성을 가지고 있을 때만 선택하는 선택자입니다.

h1[test] { color:red}

같은 코드가 있을 경우 h1 태그이면서 h1 태그 안에 속성으로 test가 있는 요소만 글자 색깔이 빨간색으로 변하게 됩니다. 속성이기만 하면 되기에 이를 응용하여 disabled 혹은 required같은 속성을 지정하는 것도 가능합니다.