CSS 선택자 개념 정리

 

참고: https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors

CSS 선택자 - Web 개발 학습하기 | MDN

CSS 선택자란?

CSS 규칙의 첫번째 부분으로, CSS 내부 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야하는 지 브라우저에 알려주는 용어의 패턴이다.

CSS 선택자 목록

동일한 CSS를 사용하는 경우 개별 선택자를 선택자 목록으로 결합할 수 있다.

 

개별 선택자

h1 {
	color: red;
}

.yong {
	color: red;
}

선택자 목록

h1, .yong {
	color: red;
}

h1,
.yong {
	color: red;
}

개별 선택자를 선택자 목록으로 결합할 때에는 쉼표를 추가하면 된다. 또한 쉼표 앞이나 뒤에 공백을 추가하면 가독성을 높일 수도 있다.

선택자 구문이 유효하지 않은 경우

h1 {
	color: red;
}

..yong {
	color: red;
}

위처럼 개별 선택자를 사용하는 경우 ..yong은 무시되고, h1의 스타일은 유지된다.

h1, ..yong {
	color: red;
}

위와 같이 선택자 목록에 유효하지 않은 구문의 선택자가 포함되어 있는 경우에는 전체가 무시된다.

CSS 선택자 유형

유형, 클래스 및 ID 선택자

HTML 요소를 대상으로 하는 선택자

h1 {
 ...
}

클래스를 대상으로 하는 선택자

.hello {
	...
}

ID를 대상으로 하는 선택자

#hihi {
	...
}

속성 선택자

요소에 특정 속성이 있는지에 따라 속성을 부여하는 선택자

a[title] {
	...
}

요소에 특정 값을 가진 속성이 있는지에 따라 속성을 부여하는 선택자

a[href="https://naver.com"] {
	...
}

의사 클래스 및 의사 요소

요소의 특정 상태를 포커싱하여 스타일을 지정하는 선택자, 아래 :hover 의사클래스 예시는 마우스 포인터로 요소를 가리킬 때 적용된다.

a:hover {
	...
}

요소 전체가 아닌 특정 부분의 스타일을 지정하는 선택자, 아래 예시는 요소 내부의 첫번째 라인의 스타일을 지정한다.

p::first-line {
	...
}

대표적인 의사 클래스/요소

http://www.tcpschool.com/css/css_selector_pseudoClass

코딩교육 티씨피스쿨

http://www.tcpschool.com/css/css_selector_pseudoElement

코딩교육 티씨피스쿨

결합자

자손 결합자

선택자A 선택자B: 선택자A 하위 모든 선택자B 요소 선택

div span {
	...
}

자식 결합자

선택자A > 선택자B: 선택자A 바로 아래 선택자B 요소 선택

div > span {
	...
}

일반 형제 결합자

선택자A ~ 선택자B: 선택자A 형제 요소 중 뒤에 위치하는 선택자B 요소 모두 선택

div ~ span {
	...
}

인접 형제 결합자

선택자A + 선택자B: 선택자A 형제 요소 중 바로 뒤에 위치하는 선택자B 요소 선택 

div + span {
	...
}