CSS 선택자의 종류와 기능

CSS 선택자(Selector)는 HTML 문서에서 스타일을 적용할 대상을 지정하는 일종의 '주소'와 같습니다. 선택자를 얼마나 잘 활용하느냐에 따라 HTML 구조를 건드리지 않고도 정교한 디자인이 가능해집니다.

주요 선택자들을 기능별로 나누어 정리해 드릴게요.

---

1. 기본 선택자 (Basic Selectors)

가장 많이 사용되는 가장 기초적인 선택자들입니다.

선택자	예시	설명
전체 선택자	* { }	페이지 내의 모든 요소를 선택합니다. 주로 여백 초기화에 쓰입니다.
요소(태그) 선택자	h1 { }	특정 HTML 태그를 모두 선택합니다.
아이디(ID) 선택자	#header { }	특정 ID 속성을 가진 요소를 선택합니다. (페이지 내 단 하나만 존재)
클래스(Class) 선택자	.item { }	특정 Class 속성을 가진 요소를 모두 선택합니다. (중복 사용 가능)

2. 복합 선택자 (Combinators)

요소 간의 관계(부모, 자식, 형제)를 활용하여 선택합니다.

• 자식 선택자 (>): 부모의 직계 자식만 선택합니다.
  • ul > li : ul 바로 아래에 있는 li만 선택.
• 자손 선택자 (공백): 부모 아래에 포함된 모든 하위 요소를 선택합니다.
  • div span : div 안에 있기만 하면 깊이와 상관없이 모든 span 선택.
• 인접 형제 선택자 (+): 특정 요소 바로 다음에 오는 첫 번째 형제만 선택합니다.
  • h1 + p : h1 바로 뒤에 오는 첫 번째 p만 선택.
• 일반 형제 선택자 (~): 특정 요소 다음에 오는 모든 형제를 선택합니다.
  • h1 ~ p : h1 뒤에 있는 모든 p 선택.

---

3. 가상 클래스 선택자 (Pseudo-classes)

요소의 특정 상태에 따라 스타일을 적용합니다.

• :hover: 마우스를 올렸을 때.
• :focus: 요소에 포커스가 갔을 때 (입력창 등).
• :nth-child(n): 부모 안에서 n번째 자식인 요소를 선택. (예: :nth-child(even)은 짝수 행)
• :not(selector): 특정 조건이 아닌 요소를 선택.

---

4. 속성 선택자 (Attribute Selectors)

특정 속성을 가지고 있거나 속성값이 일치하는 요소를 선택합니다.

• input[type="text"] : type이 'text'인 input만 선택.
• a[href^="https"] : href 값이 'https'로 시작하는 링크만 선택.
• img[src$=".png"] : src 값이 '.png'로 끝나는 이미지만 선택.

---

5. 가상 요소 선택자 (Pseudo-elements)

HTML에 없는 요소를 가상으로 생성하거나 요소의 특정 부분만 선택합니다.

• ::before / ::after: 요소의 앞/뒤에 가상의 콘텐츠를 삽입합니다. (체크박스 디자인 시 필수!)
• ::first-letter: 요소의 첫 번째 글자만 선택.
• ::placeholder: 입력창의 힌트 텍스트 스타일 지정.

---

💡 선택자 우선순위 (Specificity)

여러 선택자가 동일한 요소를 가리킬 때, 어떤 스타일이 적용될지 결정하는 점수 체계입니다.

1. !important (가장 높음, 가급적 지양)
2. 인라인 스타일 (HTML 태그 안에 직접 작성)
3. 아이디(#) 선택자
4. 클래스(.) / 가상 클래스 / 속성 선택자
5. 요소(태그) 선택자
6. 전체(*) 선택자 (가장 낮음)

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.