---

Selectors

CSS 선택자는 CSS 규칙을 적용할 요소를 정의

CSS는 요소들을 선택할 수 있는 다양한 선택자를 제공한다.

선택자는선택자(Selectors), 선언부(Decline)로 기본 구성이 이루어져 있다.

이번 포스팅에서는 선택자들의 종류에 대해서 알아보도록 하겠다.

selector {
  property : value;
}

---

Type Selector

CSS Selectors Type Selector는 HTML태그를 직접적으로 지칭하는 선택자다.

Type Selector를 지칭할때는 해당 태그의 명칭만을 사용한다.

p {
  color: #212529;
}

div {
  background-color: #e0e0e0;
}

Class Selector

CSS Selectors Class Selector는 HTML태그의 각각의 class속성값을 정하고 이를 지칭하는 선택자다.

Class Selector를 지칭할때는 .해당 태그를 사용

<!-- HTML문서 -->
<div class="lorem">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>

/* CSS문서 */
.lorem {
  font-size: 32px;
}

Class Selector는 중복사용 가능하다. 즉 각각의 Class Selector는 동일한 스타일이 적용된다.

<!-- HTML문서 -->
<div class="lorem">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>

<div class="lorem">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>

<div class="lorem">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>

/* CSS문서 */
.lorem {
	font-size: 32px;
}

하나의 Class Selector는 동시에 여러개를 가질 수 있다. 이는 띄어쓰기로 구분한다.

<div class="box1 box2 box3">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, expedita?
</div>

ID Selector

CSS Selectors ID Selector는 HTML태그의 ID속성값을 정하고 이를 지칭하는 선택자다.

ID Selector는 HTML문서안에서 단 한개만 존재하며 ID Selector를 지칭할때는 #해당 태그를 사용한다.

<!-- HTML문서 -->
<div id="lorem">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, expedita?
</div>

/* CSS문서 */
#lorem {
  font-size: 32px;
}

---

Child, Descendant & Sibling Combinators

CSS Selectors Child, Descendant & Sibling Combinators는 HTML태그의 자식, 자손, 형제를 지칭하는 선택자다.

1. 자식선택자 (parent > child)

<!-- HTML코드 -->
	<section>
		<h1>제목1</h1>

		<ul>
			<li>
				<h1>제목2</h1>
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, maiores.
				</p>
			</li>
		</ul>
	</section>

/* CSS문서 */
/* 제목1 스타일 적용 */
section > h1 {
  color: #ff4949;
}

2. 자손선택자 (parent descendant)

<!-- HTML코드 -->
	<section>
		<h1>제목1</h1>

		<ul>
			<li>
				<h1>제목2</h1>
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, maiores.
				</p>
			</li>
		</ul>
	</section>
}

/* CSS문서 */
/* 제목1, 제목2 스타일 적용 */
section h1 {
  color: #ff4949;

3. 형제 선택자 (parent + sibling, parent ~ sibling)

<!-- HTML코드 -->
<section>
	<h1>제목1</h1>

	<ol>
		<li>요소1</li>
		<li class="active">요소2</li>
		<li>요소3</li>
		<li>요소4</li>
		<li>요소5</li>
	</ol>
</section>

<!-- CSS코드 -->    
/* "active"라는 클래스명 다음에 오는 모든 형제 <li>태그 요소에 스타일을 적용 */
/* -> 요소3, 4, 5에 스타일이 적용 */
.active ~ li {
	color: #0066ff;
}

---

Structural Pseudo-classes

CSS Selectors Structural Pseudo-classes는 HTML태그의 구조적 가상 클래스를 지칭하는 선택자다.

가상 클래스를 지칭하는 요소는 :child, ::before, ::after가 있다.

1. element:first-child : 첫번째 자식 요소 지칭

<!-- HTML코드 -->
<section>
	<h1>제목1</h1>

	<ol>
		<li>요소1</li>
		<li>요소2</li>
		<li>요소3</li>
		<li>요소4</li>
		<li>요소5</li>
	</ol>
</section>

<!-- CSS코드 -->
/* <li>태그에 첫번째 요소를 선택 */
/* -> 요소1에 스타일이 적용 */
li:first-child {
color: #ff4949;
}

2. element:last-child : 마지막 자식 요소 지칭

<!-- HTML코드 -->
<section>
	<h1>제목1</h1>

	<ol>
		<li>요소1</li>
		<li>요소2</li>
		<li>요소3</li>
		<li>요소4</li>
		<li>요소5</li>
	</ol>
</section>

<!-- CSS코드 -->
/* <li>태그에 마지막 요소를 선택 */
/* -> 요소5에 스타일이 적용 */
li:last-child {
color: #ff4949;
}

3. element:nth-child(n) : n번째 위치 자식 요소 지칭

<!-- HTML코드 -->
<section>
	<h1>제목1</h1>

	<ol>
		<li>요소1</li>
		<li>요소2</li>
		<li>요소3</li>
		<li>요소4</li>
		<li>요소5</li>
	</ol>
</section>

<!-- CSS코드 -->
/* <li>태그에 n번째위치 요소를 선택 */
/* -> 요소3에 스타일이 적용 */
li:nth-child(3) {
color: #ff4949;
}

---

User Action Pseudo-classes

CSS Selectors User Action Pseudo-classes는 HTML태그의 동적 가상 클래스를 지칭하는 선택자다.

가상 클래스를 지칭하는 요소는 :hover, :active, :focus가 있다.

1. element:hover : <button>과 같은 HTML 요소에 마우스 커서를 올리면 특정 상태로 변경하는 클래스

<!-- HTML코드 -->
	<a href="https://www.naver.com">
		네이버로 이동
	</a>

<!-- CSS코드 -->    
/* 해당위치에 마우스 커서가 올라가면 지정한 색으로 배경색이 변경 */
a:hover {
	background-color: #0066ff;
}

2. element:active : <button>과 같은 HTML 요소에 마우스 커서를 클릭하는 순간 특정 상태로 변경하는 클래스

<!-- HTML코드 -->
	<a href="https://www.naver.com">
		네이버로 이동
	</a>

<!-- CSS코드 -->    
/* 해당위치를 마우스 커서로 클릭하는 순간 지정한 색으로 배경색이 변경 */
a:active {
	background-color: #0066ff;
}

3. element:focus : <button>과 같은 HTML 요소에 마우스 커서를 클릭한 뒤 특정 상태로 변경하는 클래스

<!-- HTML코드 -->
	<input type="email" placeholder="Enter your email">

<!-- CSS코드 -->    
/* 해당위치에 입력하기 위해 마우스 커서로 클릭하는 순간 지정한 색으로 테두리색이 변경 */
input:focus {
	border-color: #0066ff;
}

---

Selectors 우선순위

기본적으로 CSS는 순차적으로 진행되기 때문에 마지막으로 적용된 스타일이 우선순위가 높다.

p {
  color: #004455;
}

/* p태그에는 해당스타일이 적용 */
p {
  color: #004466;
}

이외에 나머지 Selectors 우선순위를 가지고 있으며 중복된 Selector를 가지고 있을 때는 순위의 총합이 높은 순서로 적용된다.

1. ID선택자

2. Class, Pseudo-class선택자

3. Type선택자

---

참고 자료

CSS_Selectors - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지