CSS - Selector 2

이상원·2022년 3월 9일

CSS groom

CSS

목록 보기

4/7

선택자(Selector)는 크게 다음과 같이 분류할 수 있습니다.

단순 선택자
복합 선택자
가상 클래스 선택자

단순 선택자

단순 선택자로 사용할 수 있는 것은 다음과 같습니다.

타입 선택자(Type Selector)
아이디 선택자(Id Selector)
클래스 선택자(Class Selector)
전체 선택자(Universal Selector)
속성 선택자(Attribute Selector)

타입 선택자(Type Selector)

타입 선택자 는 해당 태그를 가지는 모든 요소에 스타일을 적용합니다.

아이디 선택자(Id Selector)

아이디 선택자(ID Selector)는 아이디 이름으로 스타일을 적용합니다.
HTML내에서는 중복된 아이디는 존재할 수 없습니다. 이는 서로 다른 요소를 구별하기 위해서 입니다.

먼저 HTML 태그에 id 속성을 통해 id를 지정해주고

<p id="goorm">저는 p 태그 입니다.</p>

아이디 속성을 선택자로 사용 스타일을 적용합니다. 이때 #지정할 id를 함께 사용하여 해당 id를 선택합니다.

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

클래스 선택자(Class Selector)

클래스 선택자는 비슷한 특징을 가지는 요소를 지정하여 묶어 그룹으로 만들 수 있습니다.

<p>사회자</p>
<p class="mafia">마피아</p>
<p class="citizen">시민</p>
<p class="mafia">마피아</p>
<p>경찰</p>
<p class="citizen">시민</p>
<p class="citizen">시민</p>

클래스 선택자는 HTMLL 클래스 속성을 선택자로 사용하여 스타일을 적용합니다. 클래스 선택자는 .과 지정할 class를 함께 사용하여 class를 선택합니다.

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

class는 이렇게 비슷한 스타일을 묵어 스타일을 적용시키고 싶을 때 많이 사용합니다.

전체 선택자(Universal Selector)

전체 선택자는 모든 요소에 스타일을 적용합니다. 하지만 모든 요소에 적용을 하므로 속도가 저하될 수 있어 권장하지는 않습니다.

* {
	color: yellow;
}

전체 선택자를 사용하고 싶다면 선택자 자리에 *을 사용하면 됩니다.

속성 선택자(Attribute Selector)

속성 선택자는 특정 HTML 속성을 가지고 있는 모든 요소에 스타일을 적용합니다. 속성 선택자는 선택자 오른쪽에 [](대괄호)로 속성과 속성 값을 넣어 작성하면 됩니다.

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

예시 1)

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

<a href="https://edu.goorm.io/" target="_self">구름EDU 현재 창</a>
<a href="https://edu.goorm.io/" target="_blank">구름EDU 새 창</a>
<a href="https://ide.goorm.io/" target="_self">구름IDE 현재 창</a>
<a href="https://ide.goorm.io/" target="_blank">구름IDE 새 창</a>

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

<a class="link" href="https://edu.goorm.io/" target="_self">구름EDU 현재 창</a>
<a class="link" href="https://edu.goorm.io/" target="_blank">구름EDU 새 창</a>
<a class="link" href="https://ide.goorm.io/" target="_self">구름IDE 현재 창</a>
<a class="link" href="https://ide.goorm.io/" target="_blank">구름IDE 새 창</a>

복합선택자

복합선택자를 이해하기 위해서는 HTML 요소 사이의 부모 자식 관계를 알아야 합니다.

부모 자식 후손 요소

부모(article)와 나(div) 자식(p) 이란 연결 관계를 가진 요소들이 존재합니다. 여기서
div 안에 포함되는 하위 요소인 p는 div의 자식 요소(Child Element)이고
div 의 상위 요소인 article 은 부모 요소(Parent Element) 입니다.
이러한 부모 자식 관계는 상대적입니다.

그리고 그 자식 요소와 그 아래에 포함된 모든 태그들ㅇ르 아울러 후손 요소(Descendant Element)라고 부릅니다.

HTML의 이러한 부모 - 자식- 후손 관계에 따라 CSS에서 역시 자식과 후손과 연관된 선택자인 자식 선택자, 후손 선택자를 사용하게 되는 데 이 두 선택자가 복합 선택자의 대표적인 예입니다.

자식 선택자(Child Selector)

자식 선택자는 선택자 A의 모든 자식 중 선택자 B와 일치하는 요소를 선택합니다.
자식 선택자는 복합 선택자이기 때문에 선택자를 두 개 사용하며 중간에 >(꺽쇠)를 써줍니다.

선택자A > 선택자B {
	color: green;
}

예시)

<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;
}

후손 선택자(Descendant Selector)

후손 선택자는 선택자 A의 모든 후손 중 선택자 B와 일치하는 요소를 선택합니다. 이 역시 복합 선택자이므로 선택자를 두 개 사용하여 중간에 띄어쓰기를 사용합니다.

선택자A 선택자B {
	background-color: yellow;
}

#me p {
	background-color: yellow;
}

가상 클래스 선택자

가상 클래스 선택자는 요소의 특별한 상태를 정의하는 데 사용합니다.

가상 클래스(Pseudo-class Selector)는 그 이름만큼 쓰임도 독특합니다. 가상 클래스는 스타일을 지정할 때 쓰인다는 점에서 클래스와 비슷하지만, 클래스와 달리 가상 클래스는 직접 정의할 수 없고 실제 HTML에 보이지 않습니다.

가상 클래스 사용법은 다음과 같다

선택자:pseudo-class{
	color: red;
}

가장 대표적인 가상 클래스는 링크 태그와 관련된 가상 클래스입니다.

/* 방문하지 않은 링크일 때 */
a:link {
	color: turquoise;
}
/* 방문한 링크일 때 */
a:visited {
	color: green;
}
/* 링크에 마우스를 올렸을 때 */
a:hover {
	background-color: yellow;
}
/* 선택된 링크일 때 */
a:active {
	background-color: blue;
}