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요소가 첫번째일 경우 글씨 색을 하얀색으로 변경합니다.(첫번째 요소가 다른 태그면 불가) |
| :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-last-child() | li:nth-last-child(2) {color: #fff} | li요소의 뒤에서 두번째 있는 자식요소에 글씨 색을 하얀색으로 변경합니다. |
| :nth-last-of-type() | p:nth-of-type(3) {color: #fff} | p요소와 형제관계중 세번째 있는 요소의 글씨 색을 하얀색으로 변경합니다. |
| :only-child | p:only-child {color: #fff} | p 요소가 유일한 자식이면 선택해 글씨 색을 하얀색으로 변경합니다.(p 아닌 요소가 하나라도 포함되면 선택하지 않음) |
| :only-of-type() | p:only-of-type {color: #fff} | p 요소가 유일한 타입이면 선택해요소의 글씨 색을 하얀색으로 변경합니다. (p 아닌 요소가 포함되어도 p 타입이 유일하면 선택) |
| :not() | li:not(:nth-child(2) {color: #fff} | li 요소중 :nth-child(2)가 아닌 요소들을 선택해 글씨 색을 하얀색으로 변경합니다. |
| :root | :root {color: #fff} | 문서의 최상위 요소(html)를 선택해 글씨 색을 하얀색으로 변경합니다. |
| :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 요소 중 마우스 클릭 또는 키보드 엔터가 눌린 동안 선택해 글씨 색을 하얀색으로 변경합니다. |
폼 클래스
| 속성 | 예시 | 설명 |
|---|---|---|
| :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) 요소를 선택해 글씨 색을 하얀색으로 변경합니다. |