CSS 레퍼런스 북

기본 선택자

속성 예시 설명
태그 선택자 div {color: #fff} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
태그 선택자 p {color: #fff} p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
클래스 선택자 .class {color: #fff} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다.
ID 선택자 #id {color: #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다.
그룹 선택자 div, p, .class {color: #fff} 쉼표 (,)로 그룹화 시켜서 글씨 색을 하얀색으로 변경합니다.
전체 선택자 * {color: #fff} 전체 요소를 선택하여 글씨 색을 하얀색으로 변경합니다.

계층 선택자

속성 예시 설명
하위 선택자
(Descendent Selector)		 div p {color: #fff} div 태그의 모든 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
자식 선택자
(Child Selector)		 div > p {color: #fff} div 태그의 첫번째 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
형제 선택자
(Sibling Selector)		 div ~ p {color: #fff} div태그 뒤에 오는 p태그의 글씨 색을 하얀색으로 변경합니다. (같은 부모를 가지고 있습니다.)
인접 형제 선택자
(Adjacent Sibling Selector)		 div + p {color: #fff} div태그 바로 뒤에 오는 p태그에만 글씨 색을 하얀색으로 변경합니다. (같은 부모를 가지고 있습니다.)

속성 선택자

종류 예시 설명
[name] a[href] a 태그 속성 중에 href가 있으면 선택합니다.
[name="value"] a[href="#header"] a 태그 href 속성의 값이 '#header'이면 선택합니다.
[name~="value"] a[href~="web"] a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다.
[name|="value"] a[href|="web"] a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다.
[name^="value"] a[href^="web"] a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다.
[name*="value"] a[href*="web"] a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다.
[name$="value"] a[href$="com"] a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다.

가상 요소

속성 예시 설명
::first-line p::first-line {color: #fff;} p 태그의 첫 번째 줄을 선택합니다.
::first-letter p::first-letter {color: #fff;} p태그의 첫 번째 글자를 선택합니다.
::before p::before {content: '시작'} p태그의 내용 바로 앞에 '시작'이라는 텍스트가 추가됩니다.
::after p::after {content: '끝'} p태그의 내용 바로 뒤에 '끝'이라는 텍스트가 추가됩니다.
::selection p::selection {color: #red;} p 태그의 내용 중 선택한 부분을 빨간색으로 변경합니다.

가상 클래스

속성 예시 설명
:first-child li:first-child {color: #fff;} li 태그의 첫 번째 자식의 글씨 색을 하얀색으로 변경합니다.
:last-child li:last-child {color: #fff;} li 태그의 마지막 자식의 글씨 색을 하얀색으로 변경합니다.
:first-of-type li:first-of-type {color: #fff;} 형제 관계인 li태그들 중 첫 번째 태그의 글씨 색을 하얀색으로 변경합니다.
:last-of-type li:last-of-type {color: #fff;} 형제 관계인 li태그들 중 마지막 태그의 글씨 색을 하얀색으로 변경합니다.
:nth-child() li:nth-child(2) {color: #fff;} li태그의 두 번째 자식의 글씨 색을 하얀색으로 변경합니다.
:nth-last-child() li:nth-last-child(2) {color: #fff;} li태그의 끝에서 부터 두 번째의 글씨 색을 하얀색으로 변경합니다.
:nth-of-type() li:nth-of-type(2) {color: #fff;} 같은 유형인 li태그의 두 번째 태그의 글씨 색을 하얀색으로 변경합니다.
:nth-last-of-type() li:nth-last-of-type(2) {color: #fff;} 같은 유형인 li태그의 끝에서 두 번째 태그의 글씨 색을 하얀색으로 변경합니다.
:only-child li:only-child {color: #fff;} 부모 요소안에 자식 태그li가 유일하게 하나일 때 글씨 색을 하얀색으로 변경합니다.
:only-of-type() li:only-of-type() {color: #fff;} 같은 유형의 형제가 없고 li 하나만 있을 때 글씨 색을 하얀색으로 변경합니다.
:not() li:not(nth-child(2)) {color: #fff;} li태그의 2 번째 자식만 제외하고, 글씨 색을 하얀색으로 변경합니다.
:root :root {color: #fff;} 웹 문서 구조에서 가장 상위 요소를 선택하며 모든 요소의 글씨 색을 하얀색으로 변경합니다.
:empty :empty {color: #fff;} 자식이 전혀 없는 요소의 글씨 색을 하얀색으로 변경합니다. 공백이 있으면 적용되지 않습니다.

링크 가상 선택자

속성 예시 설명
:link a:link {color: #fff} 링크가 걸려있으면 글씨 색을 하얀색으로 변경합니다.
:visited a:visited {color: #fff} 방문했던 사이트 링크의 글씨 색을 하얀색으로 변경합니다.
:hover a:hover {color: #fff} 링크에 마우스를 올리면 글씨 색을 하얀색으로 변경합니다.
:active a:active {color: #fff} 링크가 활성화 되었을 때 글씨 색을 하얀색으로 변경합니다.

폼 선택자

속성 예시 설명
:checked input:checked {color: #fff} input 요소가 선택 상태일 때 글씨 색을 하얀색으로 변경합니다.
:focus input:focus {color: #fff} input의 기본값 상태(focus)일 때 글씨 색을 하얀색으로 변경합니다.
:enalbed input:enabled {color: #fff} input 요소가 활성화 상태일 때 글씨 색을 하얀색으로 변경합니다.
:disalbed input:disabled {color: #fff} input 요소가 비활성화 상태일 때 글씨 색을 하얀색으로 변경합니다.