CSS 레퍼런스 북

기본 선택자

속성 예시 설명
태그 선택자 p {color: #fff] p 태그를 선택하여 글씨 색을 하얀색(#fff)으로 변경합니다
클래스 선택자 .man {color: #fff] man 클래스를 선택하여 글씨 색을 하얀색(#fff)으로 변경합니다
아이디 선택자 #man {color: #fff] man 아이디를 선택하여 글씨 색을 하얀색(#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 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다.
인접 형제 선택자
(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}; 문단의 첫 줄에 컬러색을 하얀색으로 변경합니다.
::first-letter p::first-letter {color: #fff}; 문단의 첫 글자에 컬러색을 하얀색으로 변경합니다.
::before p::before {content: 'man'}; 문단 시작 부분에 'man'이라는 요소를 추가합니다.
::after p::after {content: 'man'}; 문단 끝 부분에 'man'이라는 요소를 추가합니다.
::selection p::selection {color:red}; 드래그로 선택하였을 경우 글씨 색을 빨간색으로 변경합니다.

가상 클래스

속성 예시 설명
: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}; 자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-of-type li:last-of-type {color: #fff}; 자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-child() li:nth-child(2) {color: #fff}; li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-child() li:nth-last-child(2) {color: #fff}; li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-of-type() p:nth-of-type(3) {color: #fff}; 자식 요소 중 p 태그 3번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-of-type() p:nth-last-of-type(3) {color: #fff}; 자식 요소 중 p 태그 뒤에서 3번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-child p:only-child {color: #fff}; 자식 요소 중 유일한 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-of-type() p:only-of-type() {color: #fff}; 자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.
: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 태그에 초점이 맞추어졌을 때 글씨 색을 하얀색으로 변경합니다.
:enabled input:enabled {color: #fff] input 태그가 사용 가능하면 글씨 색을 하얀색으로 변경합니다.
:disabled input:disabled {color: #fff] input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 변경합니다.