CSS 레퍼런스 북
기본 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| 태그 선택자/th> | div {color: #fff} | div 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |
| 클래스 선택자/th> | .class {color: #fff} | class라는 클래스를 선택하여 문자 색을 하얀색으로 변경합니다. |
| 아이디 선택자/th> | #id {color: #fff} | id라는 아이디를 선택하여 문자 색을 하얀색으로 변경합니다. |
| 그룹 선택자/th> | div, p {color: #fff} | div 태그와 p 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |
| 전체 선택자/th> | * {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 태그 뒤에오는(바로 뒤에 X) 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 | div::first-line {color: #fff} | div 태그의 첫번째 줄을 선택하여 문자 색을 하얀색으로 변경합니다. |
| ::first-letter | div::first-letter {color: #fff} | div 태그의 첫번째 문자를 선택하여 문자 색을 하얀색으로 변경합니다. |
| ::first-before | div::first-before {content:"시작"} | div 태그의 시작부분에 시작이라는 콘텐츠를 추가합니다. |
| ::first-after | div::first-after {content:"끝"} | div 태그의 끝부분에 끝이라는 콘텐츠를 추가합니다. |
| ::selection | div::selection {color:red} | div 태그를 드래그했을 때 색을 빨간색으로 변경합니다. |
가상 클래스
| 속성 | 예시 | 설명 |
|---|---|---|
| :first-child | p:first-child {color: #fff} | 어떤 요소의 자식의 첫번째 p 태그 자식만 선택하여 문자 색을 하얀색으로 변경합니다. |
| :last-child | p:last-child {color: #fff} | 어떤 요소의 자식의 마지막 p 태그 자식만 선택하여 문자 색을 하얀색으로 변경합니다. |
| :first-of-type | p:first-of-type {color: #fff} | 어떤 요소의 자식중 p 태그의 유형과 일치하는 제일 첫 요소의 문자 색을 하얀색으로 변경합니다. |
| :last-of-type | p:last-of-type {color: #fff} | 어떤 요소의 자식중 p 태그의 유형과 일치하는 제일 마지막 요소의 문자 색을 하얀색으로 변경합니다. |
| :nth-child(2) | p:nth-child(2) {color: #fff} | 어떤 요소의 자식중 두번째 요소의 p 태그 문자 색을 하얀색으로 변경합니다. |
| :nth-last-child(2) | p:nth-last-child(2) {color: #fff} | 어떤 요소의 자식중 마지막에서 두번째 p 태그의 문자 색을 하얀색으로 변경합니다. |
| :nth-of-type(2) | p:nth-of-type(2) {color: #fff} | 어떤 요소의 자식중 같은 유형의 p 태그중에서 두번째 요소의 문자 색을 하얀색으로 변경합니다. |
| :nth-last-of-type(2) | p:nth-last-of-type(2) {color: #fff} | 어떤 요소의 자식중 같은 유형의 p 태그중에서 마지막에서 두번째 요소의 문자 색을 하얀색으로 변경합니다. |
| :only-child | p:only-child {color: #fff} | 어떤 요소의 자식이 p 태그의 하나만 있을 때 문자 색을 하얀색으로 변경합니다. |
| :only-of-type() | p:only-of-type() {color: #fff} | 어떤 요소의 자식중 p 태그와 같은 유형의 자식이 없을 때 문자 색을 하얀색으로 변경합니다. |
| :not() | div: | :not(:nth-child(2)) {color: #fff}div 요소의 자식중 두번째 자식만 제외하고 선택하여 문자 색을 하얀색으로 변경합니다. |
| :root | :root {color: #fff} | 웹문서에서 공통으로 사용될 color라는 변수에 #fff라는 값을 선언합니다. |
| :empty | div:empty {color: #fff} | 자식이 하나도 없는 div 요소의 색을 하얀색으로 변경합니다. |
링크 가상 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| :link | a:link {color: #fff} | a 태그 중에서 링크를 방문하지 않은 태그의 색을 하얀색으로 변경합니다. |
| :visited | a:visited {color: #fff} | a 태그 중에서 링크를 방문한 태그의 색을 하얀색으로 변경합니다. |
| :hover | a:hover {color: #fff} | a 태그에 마우스를 올려놓으면 색을 하얀색으로 변경합니다. |
| :active | a:active {color: #fff} | a 태그를 선택하면 색을 하얀색으로 변경합니다. |
폼 선택자
| 속성 | 예시 | 설명 |
|---|---|---|
| :check | input:check {color: #fff} | a 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |
| :focus | input:focus {color: #fff} | a 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |
| :enable | input:enabled {color: #fff} | a 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |
| :disenable | input:disabled {color: #fff} | a 태그를 선택하여 문자 색을 하얀색으로 변경합니다. |