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 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
형제 선택자
()		 div ~ p {color : #fff} div에 형제 요소인 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
인접 형제 선택자
()		 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: '시작';} p요소의 앞에 '시작'문구 삽입
::after p::after {content: '끝';} p요소의 뒤에 '끝'문구 삽입
::selection p::selection {color: red;} p요소에 포함된 요소들을 빨간색 글씨로 변경합니다.

가상 클래스

속성 예시 설명
:first-child li:first-child {color: #fff;} li요소중 제일 첫 li를 하얀색으로 변경합니다.
:last-child li:last-child {color: #fff;} li요소중 제일 마지막 li를 하얀색으로 변경합니다
:first-of-type li:first-of-type {color: #fff;} li요소중 자신의 유형과 일치하는 제일 첫번째 li를 하얀색으로 변경합니다
:nth-child(2) p:nth-child(2) {color: #fff;} 형제 사이에서 2번째 요소를 하얀색으로 변경합니다.
:nth-last-child(3) p:nth-last-child(3) {color: #fff;} 형제 사이에서 제일 마지막에서 3번째 요소를 하얀색으로 변경합니다.
:only-child () p:only-child {color: #fff;} p요소를 하얀색으로 변경합니다.
:only-of-child () p:only-of-child {color: #fff;} p와 같은 요소가 없다면 p요소를 하얀색으로 변경합니다.
:not() li:not(:nth-child(2)) {color: #fff;} li와 동일하지 않는 요소중 마지막에서 두번째 요소를 하얀색으로 변경합니다.
:root :root {color: #fff;} 모든 요소에 하얀색으로 적용하겠습니다.
: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에 입력되는 모든 요소를 하얀색으로 변경합니다.
:disabled input:disabled {color : #fff} input을 비활성 상태로 만들고 하얀색으로 변경합니다.