[CSS] 선택자(selector) 정리

선택자란? 어떤 요소에 스타일을 정의할 것인지에 대한 정보

 

 

기본 선택자

1. 전체 선택자 : 모든 요소 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.

* {
	color:blue;
}

→ 문서 내 모든 요소의 글자 색을 파란색으로 정한다!

 

2. 태그 선택자 (유형 선택자) : 주어진 이름을 가진 요소를 선택한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

p {
	color:blue;
}

→ 문서 내 모든 p태그 요소의 글자 색을 파란색으로 정한다!

 

3. 클래스 선택자 : 주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.

.text {
	color:blue;
}

→ 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정한다!

 

4. 아이디 선택자 : 주어진 id 속성값을 가진 요소를 선택한다. id는 고유한 식별자 역할을 하는 전역 속성이다.

#topic {
	color:blue;
}

→ 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정한다!

 

 

그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다. 쉼표(,)를 이용해 선택자를 그룹화한다.

h1, p, div {
	color:blue;
}

→ 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란색으로 지정한다.

 

 

특성 선택자 (속성 선택자)

컨셉 : 특정 선택자는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

[class] {
	...
}

→ 클래스 속성을 가지고 있는 요소 선택하기

[class="item"] {
	...
}

→ 클래스가 "item"인 요소 선택하기

 

값 확인

[class*="it"]{ color:white; }  → 클래스 값에 "it"가 포함되는 요소 선택하기

[class^="it"]{ color:white; }  → 클래스 값이 "it"로 시작하는 요소 선택하기

[class$="it"]{ color:white; }  → 클래스 값이 "it"가 끝나는 요소 선택하기

 

 

결합 연산자 (결합자)

컨셉 : 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다. 자손 결합자, 형제 결합자로 구분할 수 있다.

 

- 자손 결합자 : 두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수도 있다.

div p{ color:white; } → div 요소 안에 위치하는 모든 p 요소를 선택하기

div > p{ color:white; }; → div 요소의 바로 아래에 위치하는 모든 p 요소를 선택하기

 

- 형제 결합자 : 두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수도 있다.

h1 ~ p{ color:red; } → h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기

h1 + p{ color:red; } → h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기

 

 

가상(의사) 클래스 선택자

 

 

선택자가 겹치는 경우

기본적으로 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

선택자 우선순위 : 아이디 선택자 > 클래스 선택자 > 태그 선택자