CSS 레퍼런스 북

기본 선택자

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

계층 선택자

속성 예시 설명
하위 선택자
(Descendant 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 요소 중 첫번째 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-line {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 요소 중 첫번째 li 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
첫번째 요소가 li가 아닐 경우 인식X
:last-child li:last-child {color: #fff;} li 요소 중 마지막 li 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
마지막 요소가 li가 아닐 경우 인식X
:first-of-type p:first-of-type {color: #fff;} p 요소 중 첫번째 p 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
첫번째 요소가 p가 아닌 경우 첫번째 p를 찾아서 적용
:last-of-type p:last-of-type {color: #fff;} p 요소 중 마지막 p 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
마지막 요소가 p가 아닌 경우 마지막 p를 찾아서 적용
:nth-child() li:nth-child(2) {color: #fff;} li 요소 중 2번째 li 요소의 글씨 색을 하얀색으로 변경합니다.
두번째 요소가 li가 아닌 경우 인식X
:nth-last-child() li:nth-last-child(2) {color: #fff;} li 요소 중 뒤에서 2번째 li 요소의 글씨 색을 하얀색으로 변경합니다.
뒤에서 두번째 요소가 li가 아닌 경우 인식X
:nth-of-type() p:nth-of-type(3) {color: #fff;} p 요소 중 3번째 p 요소의 글씨 색을 하얀색으로 변경합니다.
p 요소만 카운트해서 3번째 p를 찾음
:nth-last-of-type() p:nth-last-of-type(3) {color: #fff;} p 요소 중 뒤에서 3번째 p 요소의 글씨 색을 하얀색으로 변경합니다.
p 요소만 카운트해서 뒤에서 3번째 p를 찾음
:only-child p:only-child {color: #fff;} 형제가 없는 p 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
p 가 아닌 다른 유형이라도 형제 요소가 있으면 인식X
:only-of-type p:only-of-child {color: #fff;} 형제 중 같은 유형의 형제가 없는 p 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
형제 요소가 있더라도 다른 유형이면 p 요소에 적용
:not() li:not(:nth-child(2)) {color: #fff;} li 요소 중 두번째 li 요소를 제외한 li 요소의 글씨 색을 하얀색으로 변경합니다.
:root :root {color: #fff;} 웹 문서 구조에서 가장 상위 요소를 하얀색으로 변경합니다.
HTML에선 항상 html을 가리킨다.
:empty :empty {color: #fff;} 요소 중 자식이 없는 요소를 선택해 하얀색으로 변경합니다.
주석, 처리 지침 및 CSS는 요소가 비어 있는 것으로 간주되는지 여부에 영향을 주지 않는다.

링크 가상 선택자

속성 예시 설명
: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 요소 중 포커스가 머물러 있는 동안 선택해 글씨 색을 하얀색으로 변경합니다.
:enabled input:enabled {color: #fff} input 요소 중 사용 가능한 폼 콘트롤(input, textarea, select, button) 요소를 선택해 글씨 색을 하얀색으로 변경합니다.
:disabled input:disabled {color: #fff} input 요소 중 사용 불가능한 폼 콘트롤(input, textarea, select, button) 요소를 선택해 글씨 색을 하얀색으로 변경합니다.