CSS 레퍼런스 북

기본 선택자

속성 예시 설명
태그 선택자 div {color: #fff} div 태그를 선택하여 글씨 색을 fff으로 변경합니다.
클래스 선택자 .class {color: #fff} class라는 클래스를 선택하여 글씨 색을 fff으로 변경합니다.
아이디 선택자 #id {color: #fff} id라는 아이디를 선택하여 글씨 색을 fff으로 변경합니다.
그룹 선택자 div, p {color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.
전체 선택자 * {color: #fff} 전체 태그를 선택하여 글씨 색을 fff으로 변경합니다.

계층 선택자

속성 예시 설명
하위 선택자
{Descendant Selector)		 div p {color: #fff} div 태그의 모든 자식 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.
자식 선택자
{Child Selector)		 div > p {color: #fff} div 태그의 바로 아래 자식인 p태그를 선택하여 글씨 색을 fff으로 변경합니다.
형제 선택자
{Sibling Selector)		 div ~ p {color: #fff} div 태그를 뒤따르면서 같은 부모를 공유하는 p태그를 선택하여 글씨 색을 fff으로 변경합니다.
인접형제 선택자
{Adjacent Sibling Selector)		 div + p {color: #fff} div 태그를 바로 뒤에 위치하면서 같은 부모를 공유하는 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.

속성선택자

종류 예시 설명
[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 태그를 첫 번재 라인을 선택하여 글씨 색을 fff으로 변경합니다.
::first-letter p::first-letter {color: #fff;} p 태그의 첫 번째 문자를 선택하여 글씨 색을 fff으로 변경합니다.
::before p::before {content: '시작'} p 태그의 시작 지점에 가상 요소를 생성 및 선택하여 content '시작'를 추가합니다.
::after p::after {content: '끝'} p 태그의 끝 지점에 가상 요소를 생성 및 선택하여 content '끝'를 추가합니다.
::selection p::selection {color:red} p 태그 안에서 드레그 한 영역의 글씨 색깔을 red로 변경합니다.

가상 클래스

속성 예시 설명
:first-child li:first-child {color: #fff;} li의 첫번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:last-child li:last-child {color: #fff;} li의 마지막 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:first-of-type p:first-of-type {color: #fff;} p 태그 중 첫번째 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:last-of-type p:last-of-type {color: #fff;} p 태그 중 마지막 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-child() p:nth-chile(2) {color: #fff;} p 태그의 앞에서 두번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-last-child() p:nth-last-chile(2) {color: #fff;} p 태그의 뒤에서 두번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-of-type() p:nth-of-type(3) {color: #fff;} p 태그 중 앞에서 세번째 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-last-of-type() p:nth-last-of-type(3) {color: #fff;} p 태그 중 뒤에서 세번재 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:only-child p:only-child {color: #fff;} p 태그가 유일한 자식으면 선택하여 글씨 색깔을 fff로 변경합니다.
:only-of-type() p:only-of-type(3) {color: #fff;} p 태그가 유일한 p태그면 선택하여 글씨 색깔을 fff로 변경합니다.
:not() li:not(:nth-child(2)) {color: #fff;} li 태그의 자식 중 앞에서 두번째 자식만 빼고 글씨 색깔을 fff로 변경합니다.
:root :root {color: #fff;} 문서상 최상위 요소(html)을 선택하여 글씨 색깔을 fff로 변경합니다.
:empty :empty {color: #fff;} 텍스트 및 공백을 포함하여 내용이 없는 태그를 선택하여 색깔을 fff로 변경합니다.

링크 가상 선택자

속성 예시 설명
:link a:link {color: #fff} 방문하지 않은 링크를 선택하여 글씨 색깔을 fff로 변경합니다.
:visited a:visited {color: #fff} 방분했던 링크를 선택하여 글씨 색깔을 fff로 변경합니다.
:hover a:hover {color: #fff} 마우스를 a태그 위에 올린 상태일때 글씨 색깔을 fff로 변경합니다.
:active a:active {color: #fff} a태그를 마우스로 클릭한 생태 일때 글씨 색깔을 fff로 변경합니다.

폼 선택자

속성 예시 설명
:checked input:checked {color: #fff} input박스가 체크 되었을 때 글씨 색깔을 fff로 변경합니다.
:focus input:focud {color: #fff} input박스에 초점(커서생성)이 맞춰졌을 때 글씨 색깔을 fff로 변경합니다.
:enabled input:enabled {color: #fff} input박스가 사용 가능 할 때 글씨 색깔을 fff로 설정합니다.
:disabled input:disabled {color: #fff} input박스가 사용 불가능 할 때 글씨 색깔을 fff로 설정합니다.