CSS Referencebook
기본 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | 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} | duv 요소를 뒤따르는 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: '시작'} | id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| ::after | p::after {content: '끝'} | id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| ::selection | p:selection {color: red} | div 태그와 p 태그를 선택하여 선택하여 글씨 색을 하얀색으로 변경합니다. |
가상 클래스
| 속성 | 예시 | 설명 |
|---|---|---|
| :first-child | li:first-line {color: #fff;} | li 태그의 첫번째 줄의 글씨색을 하얀색으로 변경합니다. |
| :last-child | li:last-child {color: #fff;} | li 태그의 마지막 줄의 글씨색을 하얀색으로 변경합니다. |
| :first-of-type | p:first-of-type {color: #fff;} | p 태그 중 제일 첫 줄을 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :last-of-type | p:last-of-type {color: #fff;} | p 태그 중 제일 마지막 줄을 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :nth-child() | p:nth-child(2) {color: #fff;} | p 타입 중 2번째 줄을 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :nth-last-child() | p:nth-last-child(2) {color: #fff;} | p 타입 중 마지막 순서부터 2번째 줄을 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :nth-of-type() | p:nth-of-type(3) {color: #fff;} | p 태그 요소 중 3번째 p태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :nth-last-of-type() | p:nth-last-of-type(3) {color: #fff;} | p 태그 요소 중 마지막 순서부터 3번째 p태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :only-child | p:only-child {color: #fff;} | p태그에 자식요소가 하나밖에 없을 때 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :only-of-type() | p:only-of-type {color: #fff;} | p 태그의 형제가 없고 단독으로 쓰일 때 글씨 색을 하얀색으로 변경합니다. |
| :not() | li:not(:nth-child(2)) {color: #fff;} | li 태그 요소 중 두번째 줄을 제외하고서 글씨 색을 하얀색으로 변경합니다. |
| :root | :root {color: #fff;} | 문서의 root 요소를 선택하여 하얀색으로 변경합니다. |
| :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} | 체크한 상태의 라디오, 체크박스, 옵션 등의 색을 하얀색으로 변경합니다. |
| :focus | input:focus {color: #fff} | 양식의 입력 칸 등을 클릭 또는 탭하여 선택했을 때 요소를 하얀색으로 변경합니다. |
| :enable | input:enable {color: #fff} | 활성(선택, 클릭, 입력 등)하거나 포커스를 받을 수 있는 모든 요소를 하얀색으로 변경합니다. |
| :disable | input:disable {color: #fff} | 비활성(선택, 클릭, 입력 등)하거나 포커스를 받을 수 없는 모든 요소를 하얀색으로 변경합니다. |