[CSS] 선택자 (Selector)

개요

회사에서 SCSS를 통해서 웹 스타일을 관리하고 있다.

프론트엔드에 익숙하지 않았기 때문에, 특수문자가 조합된 선택자나 연산자를 이해하기 어려웠고,

겹쳐 있는 HTML 구조에서 hover 이벤트 하나 처리하는 데도 많은 시간이 걸렸다.

 

작업을 마치고 나서야, 몰랐던 부분이 CSS 선택자(Selector)라는 것을 알았고, 이번 기회에 정리해 두면 좋겠다고 생각했다.

CSS 선택자는 HTML 요소를 선택해 스타일을 지정할 때 사용하는 기본 도구이다.

이 글에서는 스스로가 중요하다고 생각하는 선택자들을 중심으로 간단하게 소개하고자 한다.

---

내용

#1 전체 선택자 (*)

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

모든 요소에 기본 스타일을 적용할 때 자주 사용한다.

#2 태그 선택자 (h1, p, span, …)

body {
  font-family: 'Noto Sans', sans-serif;
}

h1 {
  font-size: 2rem;
}

태그 이름으로 요소를 선택하며, 간단한 기본 스타일에 사용된다.

#3 클래스 선택자 (.class)

<button class="primary-btn">확인</button>

.primary-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
}

가장 많이 사용하는 선택자로, 여로 요소에 재사용이 가능한 장점이 있다.

#4 아이디 선택자 (#id)

<div id="main-banner">Welcome</div>

#main-banner {
  background: url(banner.jpg) no-repeat center;
  height: 300px;
}

하나의 고유 요소에 스타일을 지정할 때 사용한다.

페이지 내에서 유일한 id의 특성을 그대로 활용한다.

---

#5 후손 선택자 (공백)

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

nav a {
  color: darkblue;
  text-decoration: none;
}

특정 요소 안의 모든 후손 요소를 선택한다.

#6 자식 선택자 (>)

<ul>
  <li>Apple</li>
  <li>
    <ul>
      <li>Red</li>
      <li>Green</li>
    </ul>
  </li>
</ul>

ul > li {
  font-weight: bold;
}

한 단계 아래의 자식만 선택한다.

중첩 구조에서 계층을 구분할 때 유용하게 활용할 수 있다.

#7 형제 선택자 (+)

<h2>제목</h2>
<p>내용입니다.</p>

h2 + p {
  margin-top: 0;
}

인접 형제라고도 부르며 인접하는 형제 요소를 대상으로 스타일을 지정한다.

위의 코드 상에서는 h2 바로 다음에 오는 p 태그를 선택하게 된다.

 

형제 선택자를 잘 모르고 사용할 때는 “형제”라는 단어에 집중해서 앞의 요소도 선택할 수 있다고 생각했었다.

p + h2 {
	margin-top: 0;
}

p와 인접하는 형제 요소 중, 앞에 있는 h2를 대상으로 스타일을 지정하는 것을 의도하였으나 기대하는 동작은 일어나지 않는다.

왜냐하면 p 바로 다음에 오는 h2 태그를 대상으로 하는 코드이기 때문이다.

#8 형제 선택자 (~)

<h2>제목</h2>
<p>내용1</p>
<p>내용2</p>

h2 ~ p {
  color: gray;
}

일반 형제라고도 부르며 인접하는 형제 요소들을 대상으로 스타일을 지정한다.

h2 다음에 나오는 모든 p 형제 요소가 대상이다.

 

인접 형제와 마찬가지로 형제 요소이지만 앞의 요소들에 대해서는 스타일 지정이 불가능하다.

---

#9 가상 클래스 선택자

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때 동작하는 코드이다.

 

의사 클래스라고도 불리는데 클래스가 HTML에 명시되어 있지는 않지만 특정 상태에 있는 요소를 마치 클래스처럼 선택하는 역할을 한다는 점에서 “의사(pseudo)”로 표현할 수 있다.

 

9-1 :hover (마우스를 올렸을 때)

button:hover {
  background-color: #0056b3;
}

9-2 :focus (입력 요소에 포커스 될 때)

input:focus {
  outline: 2px solid #007bff;
}

9-3 :nth-child(n) (특정 순서에 있는 자식)

<ul>
	<li>first child</li>
	<li>second child</li>
	<li>third child</li>
</ul>

ul li:nth-child(2) {
  color: red;
}

두 번째 li 항목에만 스타일을 적용한다.

 

#10 가상 요소 선택자

<p class="notice">업데이트 내용 확인</p>

.notice::before {
  content: "📌orange ";
  color: orange;
}

.notice::after {
  content: " (필독)";
  font-weight: bold;
}

가상 요소(의사 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 적용할 수 있다.

 

::before는 선택된 요소 바로 앞에 장식처럼 쓰이는 가상의 요소를 생성한다.

::after는 선택된 요소 바로 뒤에 장식처럼 쓰이는 가상의 요소를 생성한다.

 

이를 위해 content 속성을 사용해야 하고 content 속성이 정의되지 않았거나 유효하지 않은 값을 가지거나, 값으로 normal이나 none을 가지고 있다면 가상 요소는 렌더링 되지 않고 display: none이 설정된 것처럼 동작한다.

 

아래처럼 빈 문자열로 초기화하는 코드도 유효한 코드이기 때문에 가상 요소를 활용할 수 있다.

.notice::before {
	content: "";
	border-color: #000000;
	border-style: solid;
	...
}

이걸 활용해서 체크 모양(✅)을 그리는 예제도 있었는데 CSS로 조작해 인터랙티브 하게 만드는 거라고 한다.

(꽤나 재밌어서) 별도의 글로 다뤄보려 한다.

 

참고로 ::before와 ::after로 생성된 콘텐츠는 일반적으로 텍스트처럼 선택(드래그)되지 않으며, 마우스 이벤트의 대상도 되지 않는다.

---

정리

위에서 정리한 선택자들은 일하면서 많이 봤던 선택자들이며, 특히 클래스 선택자와 가상 클래스/요소 선택자는 재사용성과 유연성이 뛰어나 활용도가 가장 높았다.

 

구분	선택자	설명	예시
전체 선택자	*	모든 요소 선택	* { margin: 0; }
태그 선택자	h1, p, ul 등	태그 이름으로 요소 선택	p { line-height: 1.5; }
클래스 선택자	.class	클래스 이름으로 요소 선택	.btn { padding: 10px; }
아이디 선택자	#id	고유한 id로 요소 선택	#main { background: gray; }
후손 선택자	A B	A 요소의 모든 후손 B를 선택	nav a { color: blue; }
자식 선택자	A > B	A의 자식 B만 선택	ul > li { font-weight: bold; }
인접 형제 선택자	A + B	A 바로 뒤에 오는 B를 선택	h2 + p { margin-top: 0; }
일반 형제 선택자	A ~ B	A 이후의 모든 B 형제 선택	h2 ~ p { color: gray; }
가상 클래스	:hover 등	특정 상태의 요소 선택	a:hover { color: red; }
가상 요소	::before, ::after	요소 앞/뒤에 콘텐츠 생성	.notice::after { content: "!" }

 

실무에서 겪었던 문제를 계기로 선택자 개념을 정리할 수 있었고,

다음번엔 더 빠르게 업무를 마칠 수 있을 것으로 기대한다.

---

참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN