CSS Selector
🎨 CSS Selector란?
정의
CSS Selector는 HTML 요소를 선택하기 위한 문법이다.
선택자는 스타일을 적용할 대상을 지정할 때 사용한다.
브라우저는 선택자를 해석해서 해당 요소에 CSS를 적용한다.
🧭 선택자 종류
선택자는 크게 기본 선택자, 조합 선택자, 속성 선택자, 가상 클래스, 가상 요소로 나눌 수 있다.
기본 선택자
*- 모든 요소를 선택한다.#id- id 값을 기준으로 선택한다..class- class 값을 기준으로 선택한다.tag- 특정 태그를 선택한다.
조합 선택자
A B- A의 후손 요소를 선택한다.A > B- A의 직계 자식 요소를 선택한다.A + B- A 바로 다음 형제 요소를 선택한다.A ~ B- A 이후의 모든 형제 요소를 선택한다.
속성 선택자
A[href]- 특정 속성이 있는 요소를 선택한다.A[href="url"]- 속성 값이 일치하는 요소를 선택한다.A[href^="https"]- 특정 값으로 시작하는 속성을 선택한다.A[href$=".pdf"]- 특정 값으로 끝나는 속성을 선택한다.
가상 클래스
:checked- 선택된 입력 요소를 선택한다.:hover- 마우스 오버 상태를 선택한다.:not()- 특정 조건을 제외한다.:first-child- 첫 번째 자식 요소를 선택한다.:last-child- 마지막 자식 요소를 선택한다.:nth-child(n)- n번째 자식 요소를 선택한다.:nth-last-child(n)- 뒤에서 n번째 자식 요소를 선택한다.:nth-of-type(n)- 같은 유형 요소 중 n번째를 선택한다.:first-of-type- 같은 유형 요소 중 첫 번째를 선택한다.
가상 요소
::before- 요소 앞에 내용을 추가한다.::after- 요소 뒤에 내용을 추가한다.::first-line- 첫 줄에 적용한다.::first-letter- 첫 글자에 적용한다.
🧪 자주 쓰는 예시
/* 모든 p 태그 */
p {
color: #333;
}
/* id가 header인 요소 */
#header {
background: #f5f5f5;
}
/* class가 active인 요소 */
.active {
font-weight: bold;
}
/* 직계 자식 선택 */
nav > ul {
list-style: none;
}
🔍 선택자 사용 시 주의점
- 선택자가 너무 길어지면 유지보수가 어려워진다.
- 지나치게 구체적인 선택자는 재사용성이 떨어진다.
- 가능한 한 의미 있는 class를 기준으로 작성하는 편이 좋다.
📌 정리
- CSS Selector는 요소를 찾는 규칙이다.
- 기본 선택자, 조합 선택자, 속성 선택자, 가상 클래스, 가상 요소를 함께 익히면 대부분의 스타일링에 대응할 수 있다.
- 선택자는 짧고 명확하게 작성하는 것이 가독성에 좋다.
댓글남기기