✅ CSS 선택자 정리와 가상 클래스 개념 이해하기

프론트엔드 개발에서 CSS 선택자는 HTML 요소에 스타일을 적용하는 기본이자 핵심입니다. 오늘은 CSS 선택자와 가상 클래스(Pseudo-class)에 대해 정리해보겠습니다. 선택자 문법의 기초부터 실무에서 자주 쓰이는 예제까지 함께 알아볼게요!

---

📌 기본 선택자와 선택자 리스트

CSS에서 여러 요소를 동시에 선택하고 싶을 때는 선택자를 쉼표(,)로 구분해서 사용합니다.

이 방식은 Selector List라고도 불립니다.

h1, h2, p { margin: 0; }

위 예시는 h1, h2, p 요소에 모두 같은 스타일을 적용하는 방법입니다.

또한, 선택자를 붙여서 조합하면 더욱 구체적인 요소를 지정할 수 있습니다.

ul.menu li.active { font-weight: bold; }

이 코드는 .menu 클래스가 있는 ul 안의 li 요소 중에서 .active 클래스가 있는 요소만 선택합니다.

---

🔎 자식 선택자와 전체 선택자

▶ > 자식 선택자

부모 요소의 직계 자식만 선택할 때 사용합니다.

.container > p { color: red; }

container 안에 있는 p 요소 중, 직속 자식만 빨간색으로 스타일링 됩니다.

▶ * 전체 선택자

모든 요소를 선택합니다.
-> 초기화 스타일에서 많이 쓰입니다.

* { box-sizing: border-box; }

---

🔢 :nth-child(n) 선택자

n번째 자식을 선택할 때 사용하는 선택자입니다.

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

두 번째 li 요소만 파란색으로 표시됩니다.
n 자리에 수식을 넣어 규칙적인 선택도 가능합니다 (2n, odd, even 등).

---

✨ 가상 클래스(Pseudo-classes)

사용자 인터랙션이나 특정 상태에 따라 스타일을 적용할 수 있게 해주는 선택자입니다.

가상 클래스	설명
:hover	마우스를 올렸을 때
:active	요소를 클릭했을 때
:focus	포커스를 받을 때 (예: 입력창 클릭 시)
:visited	방문한 링크일 때

 

button:hover { background-color: #eee; }

---

💡 같은 클래스지만 다른 상태 표현하기

실제 웹 페이지에서는 같은 클래스를 가진 요소라도 상황에 따라 스타일을 다르게 보여주고 싶을 때가 많습니다.

예를 들어, 아래 예시는 홈페이지 메뉴입니다. 모든 메뉴는 menu-link 클래스를 공유하지만, 현재 페이지를 나타내는 메뉴 항목에만 selected 클래스를 추가해 강조합니다.

<a href="/intro" class="menu-link selected">소개</a>
<a href="/product" class="menu-link">제품</a>
<a href="/contact" class="menu-link">문의</a>

이렇게 menu-link는 그대로 유지하고, selected라는 클래스를 조건적으로 추가해서 UI 상태를 구분할 수 있습니다.

 

---

📝 마무리하며
CSS 선택자와 가상 클래스는 처음엔 헷갈릴 수 있지만, 다양한 예제를 통해 자연스럽게 익숙해지게 됩니다.
실무에서는 선택자를 얼마나 효율적으로 구성하느냐가 유지보수성과 직결되기도 하니, 기초를 단단히 익혀두는 게 중요합니다.
저처럼 프론트엔드 개발을 준비하시는 분들께 조금이나마 도움이 되셨길 바랍니다 😊