CSS 레퍼런스 북
기본 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | div {color: #fff} | div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. |
| 클래스 선택자 | .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태그를 선택하여 글씨 색을 하얀색으로 변경합니다. / 한단계 아래 요소만 선택하기에 또 다른 하위 태그안에 종속되어 있을 시 선택X |
| 형제 선택자 (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태그의 첫번째 줄을 선택하여 글씨 색을 하안색으로 변경 합니다.(줄바꿈하면 다른 줄은 변경X) |
| ::first-letter | p::first-letter {color: #fff;} | p태그의 첫글자를 선택하여 글씨 색을 하안색으로 변경합니다. |
| ::before | p::before {content:'시작'} | p태그 맨 앞에 "시작"이라는 문자가 삽입 합니다.(::first-letter와 함께 사용되면 '시'가 변경이 됩니다) |
| ::after | p::after {content:'끝'} | p태그 맨 뒤에 "끝"이라는 문자가 삽입 합니다. |
| ::selection | p::selection {color:red} | p태그를 드래그하면 글씨 색이 빨간색으로 변경 합니다. |
가상 클래스
[참고1] [참고2]| 속성 | 예시 | 설명 |
|---|---|---|
| :first-child | li:first-child {color: #fff;} | 자식요소인 li태그 중에 첫번째 li태그들만 선택하여 글씨 색을 하얀색으로 변경합니다./자식태그 중에 첫번째가 li태그가 아니면 변경되지 않습니다. |
| :last-child | p:last-child {color: #fff;} | 자식요소인 p태그 중에 가장 마지막의 p태그들만 선택하여 글씨 색을 하얀색으로 변경합니다./자식태그 중에 마지막이 p태그가 아니면 변경되지 않습니다. |
| :first-of-type | p:first-of-type {color: #fff;} | 자식요소인 p태그 중에 '하위 태그의 중'에 첫번째 p태그들만 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :last-of-type | p:last-of-type {color: #fff;} | 자식요소인 p태그 중에 '하위 태그의 중'에 맨 마지막의 p태그들만 선택하여 글씨 색을 하얀색으로 변경합니다. |
| :nth-child(2) | p:nth-child(2) {color: #fff;} | 자식요소인 중에서 2번째로 등장하는 태그가 p태그이면 글씨 색을 하얀색으로 변경합니다. |
| :nth-last-child(2) | p:nth-last-child(2) {color: #fff;} | 자식요소인 중에서 뒤쪽에서 부터 2번째로 등장하는 모든 p태그의 글씨 색을 하얀색으로 변경합니다. |
| :nth-of-type(2) | p:nth-of-type(2) {color: #fff;} | 자식요소인 중에서 2번째로 등장하는 p태그인 글씨 색을 하얀색으로 변경합니다 |
| :nth-last-of-type(2) | p:nth-last-of-type(2) {color: #fff;} | nth-last-of-type는 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택합니다. |
| :only-chil) | p:only-child {color: #fff;} | 자식 요소를 p태그 하나만 가지는 요소의 글씨 색을 하얀색으로 변경합니다. |
| :only-of-type | p:only-of-type {color: #fff;} | only-of-type는 자식(child) 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택합니다. |
| :not | li:not(:nth-child(2)) {color: #fff;} | li 태그 중 2번째 태그만을 제외하고 글씨 색을 하얀색으로 변경합니다. |
| :root | :root {color: #fff;} | 문서의 root 요소(최상단 요소)를 선택하여 글씨 색을 하얀 색으로 변경합니다. |
| :empty | :empty {color: #fff;} | 하위요소중에 내용이 비어있는 요소의 글씨 색을 하얀색으로 변경합니다. |
링크 가상 선택자
[참고]| 속성 | 예시 | 설명 |
|---|---|---|
| :link | a:link {color: #fff} | a태그에서 방문하지 않았던 링크의 글씨 색을 하얀색으로 변경합니다. |
| :visited | a:visited {color: #fff} | a태그에서 방문했었던 링크의 글씨 색을 하얀색으로 변경합니다. |
| :hover | a:hover {color: #fff} | a태그에서 링크의 마우스 포인터를 올리는 순간 글씨 색을 하얀색으로 변경합니다. |
| :active | a:active {color: #fff} | a태그에서 링크를 클릭하는 순간 글씨 색을 하얀색으로 변경합니다. |
폼 선택자
[참고], 해당 속성의 MDN레퍼런스 참고
| 속성 | 예시 | 설명 |
|---|---|---|
| :checked | input:checked {color: #fff} | input태그가 체크되었을때의 글씨 색을 하얀색으로 변경합니다 |
| :focus | input:focus {color: #fff} | input태그에 초점을 받았을때의 글씨 색을 하얀색으로 변경합니다 |
| :enabled | input:enabled {color: #fff} | input태그가 사용가능할 때의 글씨 색을 하얀색으로 변경합니다 |
| :disabled | input:disabled {color: #fff} | input태그가 사용불가능할 때의 글씨 색을 하얀색으로 변경합니다 |