웹솔루션개발 22년 노하우! 해피CGI의 모든것

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

웹프로그램밍 자료실/HTML 자료

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

해피CGI윤실장 2017. 1. 17. 09:22
 
태그 유형 설명 버전
. .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/

 

홈페이지바로가기 

Comments