[해피CGI][cgimall] CSS Selector 다양하게 활용가능한 CSS 선택자 알아보기

 

태그	유형	설명	버전
.	.class {color:#fff;}	클래스 선택자	CSS1
#	.id {color:#fff;}	아이디 선택자	CSS1
*	* {color:#fff;}	전체 선택자	CSS2
element	p {color:#fff;}	요소 선택자	CSS1
element, element	p, div {color:#fff;}	그룹 선택자	CSS1
element element	div p {color:#fff;}	후손 선택자	CSS1
element > element	div > p {color:#fff;}	이웃 선택자	CSS2
element + element	div > p {color:#fff;}	자식 선택자	CSS2
element ~ element	div ~ p {color:#fff;}	형제 선택자	CSS3
[attribute]	p [class] {color:#fff;}	속성 선택자	CSS2
[attribute=value]	p [class="white"] {color:#fff;}	속성 선택자	CSS2
[attribute~=value]	p [class~="white"] {color:#fff;}	속성 선택자	CSS2
[attribute^=value]	p [attr^="w"] {color:#fff;}	속성 선택자	CSS3
[attribute*=value]	p [attr*="white"] {color:#fff;}	속성 선택자	CSS3
[attribute$=value]	p [attr$="w"] {color:#fff;}	속성 선택자	CSS3
:link	a:link {color:#fff;}	방문하지 않은 링크	CSS1
:visited	a:visited {color:#fff;}	방문한 링크	CSS1
:hover	a:hover {color:#fff;}	마우스 오버 링크	CSS1
:active	a:active {color:#fff;}	활성화된 링크	CSS1
:focus	a:focus {color:#fff;}	포커스된 링크	CSS2
:root	a:root {color:#fff;}	문서의 루트 요소	CSS3
:nth-child(n)	p:nth-child(3) {color:#fff;}	n번째 스타일 적용	CSS3
:nth-last-child(n)	p:nth-last-child(n) {color:#fff;}	끝에서 n번째 스타일 적용	CSS3
:nth-of-type(n)	p:nth-of-type(n) {color:#fff;}	n번째 스타일 적용	CSS3
:nth-last-of-type(n)	p:nth-last-of-type(n) {color:#fff;}	끝에서 n번째 스타일 적용	CSS3
::first-letter	p::first-letter {color:#fff;}	첫 번째 문장	CSS1
::first-line	p::first-line {color:#fff;}	첫 번째 줄	CSS1
:first-of-type	p:first-of-type {color:#fff;}	첫 번째 요소의 선택자	CSS3
:last-of-type	p:last-of-type {color:#fff;}	마지막 번째 요소의 선택자	CSS3
:only-of-type	p:only-of-type {color:#fff;}	해당 요소가 유일한 요소의 선택자	CSS3
:first-child	p:first-child {color:#fff;}	첫 번째 자식요소	CSS3
:last-child	p:last-child {color:#fff;}	마지막 자식요소	CSS3
:only-child	p:only-child {color:#fff;}	자식요소가 유일하게 하나일 때	CSS3
:only-of-child	p:only-of-child {color:#fff;}	해당 요소가 유일한 요소 일 때	CSS3
:target	:target {color:#fff;}	연결	CSS3
:enabled	input[type="text"]:enabled {color:#fff;}	사용할 수 있는 상태	CSS3
:disabled	input[type="text"]:disabled {color:#fff;}	사용할 수 없는 상태	CSS3
:checked	input:checked {color:#fff;}	체크된 상태	CSS3
:in-range	input:in-range {color:#fff;}	인풋 요소의 라인을 설정합니다.	CSS3
:out-of-range	input:out-of-range {color:#fff;}	인풋 요소의 아웃라인을 설정합니다.	CSS3
:valid	input:valid {color:#fff;}	인풋 요소가 유효할 때 설정됩니다.	CSS3
:invalid	input:invalid {color:#fff;}	인풋 요소가 유효하지 않을 때 설정됩니다.	CSS3
:optional	input:optional {color:#fff;}	인풋 요소의 옵션에 설정됩니다.	CSS3
:read-only	input:read-only {color:#fff;}	인풋 요소를 읽었을 때 설정됩니다.	CSS3
:read-write	input:read-write {color:#fff;}	인풋 요소를 쓸 때 설정됩니다.	CSS3
:input:required	input:required {color:#fff;}	인풋 요소가 필수 일 때 설정됩니다.	CSS3
:lang(language)	p:lang(it) {color:#fff;}	언어설정에 따라 설정됩니다.	CSS2
:empty	p:empty {color:#fff;}	빈 상태	CSS3
::before	p::before {content: "content";}	요소 앞에 내용 추가	CSS3
::after	p::after {content: "content";}	요소 뒤에 내용 추가	CSS3
::selection	::selection {color:#fff;}	마우스로 선택했을 때	CSS3
:not(seletor)	:not(p) {color:#fff;}	제외한	CSS3

출처 : http://coderap.tistory.com/