종종 사용하는 CSS 가상 선택자를 사용할 때 찾아보는 수고를 덜기 위해 정리한다.
- CSS 가상 선택자 정리
- CSS 가상 클래스와 가상 요소 차이
- CSS :hover, ::before, :nth-child 사용법
CSS 가상 선택자는 특정 상태의 요소를 선택하거나, 특정 요소 내부의 부분을 스타일링할 수 있도록 도와주는 선택자다.
가상 선택자는 : 또는 ::로 시작하며, 크게 가상 클래스와 가상 요소로 나뉜다.
1. 가상 클래스 (:)
요소의 특정 상태나 사용자 동작에 따라 스타일을 적용하는 선택자입니다.
(1) 동적 상태 관련
선택자 설명
| :hover | 마우스를 올렸을 때 적용 |
| :active | 클릭되었을 때 적용 |
| :focus | 포커스가 맞춰졌을 때 적용 (ex. 입력 필드) |
| :focus-visible | 키보드로 포커스 이동 시만 스타일 적용 (브라우저 자동 판단) |
(2) 구조적 선택자
선택자 설명
| :first-child | 부모의 첫 번째 자식 요소 |
| :last-child | 부모의 마지막 자식 요소 |
| :nth-child(n) | 부모의 n번째 자식 요소 (n은 숫자, 수식 가능) |
| :nth-last-child(n) | 뒤에서부터 n번째 자식 요소 |
| :only-child | 부모 안에 유일한 자식 요소일 때 적용 |
| :first-of-type | 같은 태그 중 첫 번째 요소 |
| :last-of-type | 같은 태그 중 마지막 요소 |
| :nth-of-type(n) | 같은 태그 중 n번째 요소 |
| :nth-last-of-type(n) | 같은 태그 중 뒤에서 n번째 요소 |
| :only-of-type | 특정 태그가 부모 안에서 유일할 때 적용 |
✅ 예제
p:first-child { color: red; } /* 부모의 첫 번째 자식이 <p>라면 빨강색 */
p:nth-child(2) { font-weight: bold; } /* 부모의 두 번째 자식이 <p>라면 굵게 */
(3) 상태 관련 선택자
선택자 설명
| :checked | 체크된 <input type="checkbox">, <input type="radio"> 요소 |
| :disabled | 비활성화된 <input>, <button> 요소 |
| :enabled | 활성화된 <input>, <button> 요소 |
| :required | required 속성이 있는 <input> 요소 |
| :optional | required 속성이 없는 <input> 요소 |
| :valid | 유효한 입력값을 가진 <input> 요소 |
| :invalid | 유효하지 않은 입력값을 가진 <input> 요소 |
✅ 예제
input:focus { border: 2px solid blue; } /* 포커스된 input 테두리 변경 */
input:valid { background-color: lightgreen; } /* 유효한 입력값일 때 배경 변경 */
(4) 기타 특수 선택자
선택자 설명
| :not(선택자) | 특정 선택자를 제외한 요소 선택 |
| :is(선택자1, 선택자2, …) | 여러 선택자 중 하나라도 해당하면 선택 |
| :where(선택자1, 선택자2, …) | :is()와 같지만, 우선순위가 0 |
| :has(선택자) | 특정 요소를 포함한 부모 요소 선택 |
✅ 예제
p:not(.no-style) { color: blue; } /* .no-style 클래스가 없는 <p>만 파랑색 */
:is(h1, h2, h3) { font-family: Arial; } /* h1, h2, h3에 같은 폰트 적용 */
div:has(img) { border: 2px solid red; } /* <img>를 포함한 <div>에 빨간 테두리 */
2. 가상 요소 (::)
요소의 특정 부분을 스타일링하는 선택자로, 반드시 ::을 사용합니다.
선택자 설명
| ::before | 요소의 앞에 콘텐츠 추가 |
| ::after | 요소의 뒤에 콘텐츠 추가 |
| ::first-letter | 첫 번째 문자 스타일 변경 |
| ::first-line | 첫 번째 줄 스타일 변경 |
| ::selection | 사용자가 선택한 텍스트 스타일 변경 |
| ::placeholder | 입력 필드의 placeholder 스타일 변경 |
| ::marker | 목록(list-item)의 마커 스타일 변경 |
✅ 예제
p::before { content: "★ "; color: gold; } /* 문장 앞에 별 추가 */
p::after { content: " ✨"; } /* 문장 끝에 이모지 추가 */
p::first-letter { font-size: 2em; font-weight: bold; } /* 첫 글자 강조 */
p::selection { background: yellow; color: black; } /* 선택한 텍스트 스타일 변경 */
3. 가상 선택자 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 가상 선택자 예제</title>
<style>
/* 가상 클래스 */
button:hover { background-color: lightblue; }
input:focus { border: 2px solid green; }
p:nth-child(2) { color: red; }
/* 가상 요소 */
p::before { content: "🌟 "; color: gold; }
p::after { content: " ✔"; }
p::first-letter { font-size: 1.5em; font-weight: bold; }
/* ::selection */
::selection { background: yellow; color: black; }
</style>
</head>
<body>
<button>마우스를 올려보세요</button>
<input type="text" placeholder="입력해 보세요">
<p>첫 번째 문장</p>
<p>두 번째 문장</p>
</body>
</html>
4. 결론
- 가상 클래스 (:) → 요소의 특정 상태를 선택
- 가상 요소 (::) → 요소 내부의 특정 부분을 스타일링
가상 선택자는 CSS의 강력한 기능 중 하나로, UX/UI 디자인을 더 직관적이고 세밀하게 조정할 수 있다.
* nth-child / nth-of-type 정리
부모 안에 모든 요소 중 N번째 요소
:nth-child(N)
:nth-child(1) 첫번째 선택
:nth-child(2n) 짝수번째 선택
:nth-child(2n+1) 첫번째 요소부터 2번째 마다 선택
:nth-child(2n+5) 5번째부터 2번째 마다 선택
:nth-child(-2n_5) 첫번째 요소부터 5번째 요소까지 2번째 마다 선택
:nth-child(n+5) 5번째부터 모두 선택
:nth-child(-n+5) 첫번째부터 5번개까지 선택
:nth-child(n+3):nth-child(-n+8) 세번째부터 8번째까지 선택
:nth-child(odd) 홀수 선택
:nth-child(even) 짝수 선택
부모 안에 A라는 요소 중 N번째 요소
A:nth-child(N)
p:nth-of-type(n+2):nth-of-type(-n+5) 두번째 p부터 5번째 p까지 선택
부모 안에 모든 요소 중 첫번째 요소
:first-child
부모 안에 모든 요소 중 마지막 요소
:last-child
부모 안에 A라는 요소 중 첫번째 요소
A:first-child
부모 안에 A라는 요소 중 마지막 요소
A:last-child
:nth-child 와 :nth-of-type 차이
nth-child는 부모 안의 모든 요소로 부터 n차 순으로 지정,
nth-of-type은 부모 안의 해당 요소의 n차 순으로 지정
'기술' 카테고리의 다른 글
| Composer PHP 패키지 관리 및 사용법 (0) | 2025.03.15 |
|---|---|
| CMD 커맨드창, 파워쉘, 터미널 차이에 대해 알아보자 (0) | 2025.03.09 |
| SCSS vs SASS (0) | 2025.03.08 |
| Styled Components 리액트 컴포넌트 스타일 (1) | 2025.03.08 |
| GSAP 웹 고성능 애니메이션 JS 라이브러리 (0) | 2025.03.07 |
댓글