CSS - 선택자(selector)

• 기본 선택자
• 계층 선택자
• 속성 선택자
• 가상 요소
• 가상 클래스
• 링크 가상 선택자
• 폼 선택자

기본 선택자

속성	예시	설명
태그 선택자	div {color: #fff}	div 태그를 선택하여 글씨 색을 fff으로 변경합니다.
클래스 선택자	.class {color: #fff}	class라는 클래스를 선택하여 글씨 색을 fff으로 변경합니다.
아이디 선택자	#id {color: #fff}	id라는 아이디를 선택하여 글씨 색을 fff으로 변경합니다.
그룹 선택자	div, p {color: #fff}	div 태그와 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.
전체 선택자	* {color: #fff}	전체 태그를 선택하여 글씨 색을 fff으로 변경합니다.

id 선택자와 class 선택자

id 선택자

id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용합니다. 선택자에 샵(#)과 id명을 붙여 식별합니다.

class 선택자

class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용합니다. 요소명에 점(.)과 class명을 붙여 구별합니다.

id VS class

id 선택자는 유일한 요소에 적용합니다. 반면 class 선택자는 복수의 요소에 적용할 수 있습니다. 그리고 id의 속성이 class의 속성보다 우선 순위가 높습니다. 따라서 id의 속성은 해당 요소에 부여된 class 속성에 관계 없이 작동합니다.

ID	CLASS
id는 한 페이지에 하나의 정의로 단, 하나의 태그(id="")만 사용할 수 있다.	class는 한 페이지에 반복적으로 사용되는 스타일을 정의할 수 있다.
로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용한다.	반복적으로 사용되는 스타일에는 class를 이용하여 정의하고, 그 내부에 세부 스타일을 정의할 때 id를 사용해주면 효과적이다.
#ID명 {선언자 : #}	.CLASS명 {선언자 : .}
#footer { clear:both; background-color:#333333; }	.center { text-align:center; background-color:#333333; }

계층 선택자

속성	예시	설명
하위 선택자 {Descendant Selector)	div p {color: #fff}	div 태그의 모든 자식 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.
자식 선택자 {Child Selector)	div > p {color: #fff}	div 태그의 바로 아래 자식인 p태그를 선택하여 글씨 색을 fff으로 변경합니다.
형제 선택자 {Sibling Selector)	div ~ p {color: #fff}	div 태그를 뒤따르면서 같은 부모를 공유하는 p태그를 선택하여 글씨 색을 fff으로 변경합니다.
인접형제 선택자 {Adjacent Sibling Selector)	div + p {color: #fff}	div 태그를 바로 뒤에 위치하면서 같은 부모를 공유하는 p 태그를 선택하여 글씨 색을 fff으로 변경합니다.

속성선택자

종류	예시	설명
[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 태그를 첫 번재 라인을 선택하여 글씨 색을 fff으로 변경합니다.
::first-letter	p::first-letter {color: #fff;}	p 태그의 첫 번째 문자를 선택하여 글씨 색을 fff으로 변경합니다.
::before	p::before {content: '시작'}	p 태그의 시작 지점에 가상 요소를 생성 및 선택하여 content '시작'를 추가합니다.
::after	p::after {content: '끝'}	p 태그의 끝 지점에 가상 요소를 생성 및 선택하여 content '끝'를 추가합니다.
::selection	p::selection {color:red}	p 태그 안에서 드레그 한 영역의 글씨 색깔을 red로 변경합니다.

가상 클래스

속성	예시	설명
:first-child	li:first-child {color: #fff;}	li의 첫번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:last-child	li:last-child {color: #fff;}	li의 마지막 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:first-of-type	p:first-of-type {color: #fff;}	p 태그 중 첫번째 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:last-of-type	p:last-of-type {color: #fff;}	p 태그 중 마지막 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-child()	p:nth-chile(2) {color: #fff;}	p 태그의 앞에서 두번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-last-child()	p:nth-last-chile(2) {color: #fff;}	p 태그의 뒤에서 두번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-of-type()	p:nth-of-type(3) {color: #fff;}	p 태그 중 앞에서 세번째 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:nth-last-of-type()	p:nth-last-of-type(3) {color: #fff;}	p 태그 중 뒤에서 세번재 p만 선택하여 글씨 색깔을 fff로 변경합니다.
:only-child	p:only-child {color: #fff;}	p 태그가 유일한 자식으면 선택하여 글씨 색깔을 fff로 변경합니다.
:only-of-type()	p:only-of-type(3) {color: #fff;}	p 태그가 유일한 p태그면 선택하여 글씨 색깔을 fff로 변경합니다.
:not()	li:not(:nth-child(2)) {color: #fff;}	li 태그의 자식 중 앞에서 두번째 자식만 빼고 글씨 색깔을 fff로 변경합니다.
:root	:root {color: #fff;}	문서상 최상위 요소(html)을 선택하여 글씨 색깔을 fff로 변경합니다.
:empty	:empty {color: #fff;}	텍스트 및 공백을 포함하여 내용이 없는 태그를 선택하여 색깔을 fff로 변경합니다.

가상 클래스 vs 가상 요소

가상 클래스

실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것을 말한다.

이벤트나 환경 등 태그가 아닌 '동작'에 정해진 클래스를 줘서 css로 제어하는 것

가상 요소

실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

가상 클래스와의 구분을 하기 위해 이중콜론(::) 사용을 권장하고 있다.

참고 자료

링크 가상 선택자

속성	예시	설명
:link	a:link {color: #fff}	방문하지 않은 링크를 선택하여 글씨 색깔을 fff로 변경합니다.
:visited	a:visited {color: #fff}	방분했던 링크를 선택하여 글씨 색깔을 fff로 변경합니다.
:hover	a:hover {color: #fff}	마우스를 a태그 위에 올린 상태일때 글씨 색깔을 fff로 변경합니다.
:active	a:active {color: #fff}	a태그를 마우스로 클릭한 생태 일때 글씨 색깔을 fff로 변경합니다.

폼 선택자

속성	예시	설명
:checked	input:checked {color: #fff}	input박스가 체크 되었을 때 글씨 색깔을 fff로 변경합니다.
:focus	input:focud {color: #fff}	input박스에 초점(커서생성)이 맞춰졌을 때 글씨 색깔을 fff로 변경합니다.
:enabled	input:enabled {color: #fff}	input박스가 사용 가능 할 때 글씨 색깔을 fff로 설정합니다.
:disabled	input:disabled {color: #fff}	input박스가 사용 불가능 할 때 글씨 색깔을 fff로 설정합니다.