[CSS] 선택자를 알아보자

선택자

선택자는 크게 단순 선택자, 복합 선택자, 가상 클래스(pseudo) 선택자로 나눌 수 있다.

이름이 중요한 것보다 어떤 특징이 있고 어떻게 쓰는지를 간단하게 정리한다.

직접 정의할 수 없고 HTML에서도 보이지 않는 가상 클래스는 이 글에서 정리하지 않는다.

---

단순 선택자

타입 선택자

해당 태그를 가진 요소 모두에 스타일을 적용한다.

p 태그를 가진 모두의 색이 red로 변한다.

p {
	color: red;
}

아이디 선택자

HTML의 속성인 ID 이름으로 스타일을 적용한다.

한 문서에서 동일한 ID는 사용할 수 없어 서로 다른 요소들을 구별하기 위해 사용된다.

p 태그 중에서 #goorm 이라는 ID를 가진 태그만이 배경 색이 파랗게 변한다.

p {
	color: red;
}
#goorm {
	background-color: blue;
}

클래스 선택자

ID와 마찬가지로 HTML의 속성인 Class를 사용한다.

비슷한 특징을 가진 특정 요소들을 그룹화 할 때 주로 사용한다.

.mafia {
	color: white;
	background-color: black;
}
.citizen {
	color: white;
	background-color: green;
}

전체 선택자

모든 요소에 스타일을 적용한다.

그렇기 때문에 속도가 저하될 가능성이 있어 쓰지 않는 것을 권장한다.

* {
	color: yellow;
}

속성 선택자

특정 HTML 속성을 가지고 있는 모든 요소에 스타일을 적용한다.

아래와 같이 선택자를 적어주고 속성의 프로퍼티와 값을 대괄호 안에 적어준다.

a 태그 중 target 속성이 _blank인 태그들만 컬러를 red로 바꿔달라고 했다.

선택자[속성명="속성값"] {
	color: red;
}

a[target="_blank"] {
	color: red;
}

---

복합 선택자

부모 - 자식 - 후손의 개념이 필요하다.

부모 자식 개념은 어떤 태그를 기준으로 하느냐에 따라서 상대적이다.

div에게 부모는 article이지만 p에게 부모는 div인 것처럼.

<article>
	부모 요소
	<div>
		나
		<p>자식 요소</p>
	</div>
</article>

 

형제의 개념도 있다.

div에게 부모는 article이고 자식들이 div, p 요소인 상태다.

이 때 자식 요소인 div, p에게는 div가 부모인데, 자식 요소인 div와 p는 모두 같은 부모를 둔 형제라고 할 수 있다. 

<article>
	부모 요소
	<div>
		나
		<div>자식 요소 1</div>
		<p>자식 요소 2</p>
		<div>자식 요소 3</div>
	</div>
</article>

 

또 부모 요소를 기준으로 자식 요소와 그 아래에 포함된 태그들을 후손 태그라고 한다.

 

자식 선택자

선택자 A의 모든 자식 중 선택자 B와 일치하는 요소를 선택한다.

자식 선택자는 복합 선택자이기 때문에 선택자를 2개 사용하며 중간에 꺽쇠 > 를 써준다.

 

#me 태그의 '자식' 중 p 태그를 가진 것은 자식 요소 2 뿐이다.

후손 요소는 적용되지 않고, 오로지 자식 요소만 적용된다. 

 

만약 div > p 라고 했다면 div 요소의 모든 p 태그가 초록색이 될 것이다.

왜냐하면 div가 부모고 p가 자식인 태그들이 있기 때문이다.

<article>
	부모 요소
	<div id="me">
		나
		<div>자식 요소 1
			<p>후손 요소 1</p>
		</div>
		<p>자식 요소 2</p>
		<div>자식 요소 3
			<p>후손 요소 2</p>
		</div>
	</div>
</article>

#me > p {
	background-color: green;
}

 

후손 선택자

선택자 A의 모든 후손 중 선택자 B와 일치하는 요소를 선택한다.

이 역시 선택자를 2개 사용하며 중간에 띄어쓰기를 사용한다.

(내가 잘못 알고 있었던 개념으로 나는 항상 후손 선택자를 썼다;)

 

자식 선택자를 쓸 때 썼던 꺽쇠를 지웠다.

#me 태그의 모든 후손 태그 중 p 태그들의 배경색을 노란색을 바꿨다.

(자식 선택자와 후손 선택자의 차이, 자식 선택자를 사용할 때 주의해야 할 점을 고려하자!)

#me p {
	background-color: yellow;
}