CSS 선택자

다훈·2024년 9월 4일

선택자란?

특정 html 요소를 선택하고자 할 때 사용하는 기능
해당 요소를 선택해서 원하는 "스타일" 과 기능을 적용시킬 수 있음

기본 선택자

전체 선택자 (*)

이 html 문서의 모든 요소들을 모두선택하고자할 때 사용

* {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

태그 선택자 (태그명)

해당 html 문서의 같은 태그들을 일괄 모두 선택할 때 사용

태그명 {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

아이디 선택자 (#아이디명)

해당 html 문서 내에 특정 요소 "단 하나만"을 선택하고자 할 때 사용
id 속성은 한 html 파일 내부에서 중복 불가

#아이디명 {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

클래스 선택자 (.클래스명)

해당 html 문서 내에 내가 원하는 요소 여러개를 한번에 선택하고자 할 때 사용
한 요소에 여러 클래스 선택자를 적용 가능하며, 공백으로 구분함.

.클래스명 {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

기타 선택자

속성 선택자

스타일을 부여하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법
기본선택자 뒤에 [] 를 이용해서 속성과 속성값을 "추가 조건" 으로 제시해서 선택하는 방법

선택자[속성=속성값]       // "일치"
선택자[속성~=속성값]      // "단어 기준 포함"
선택자[속성|=속성값]      // "- 로 구분된 단어 기준 시작"
선택자[속성^=속성값]      // "일반 문자열 기준 시작"
선택자[속성$=속성값]      // "일반 문자열 기준 끝"
선택자[속성*=속성값] {    // "일반 문자열 기준 포함"
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

자손 선택자 (>) 그리고 후손 선택자 ( )

특정 요소의 바로 하위 자식 요소를 선택하여 스타일을 적용하는 방식.
- 자손 : 바로 하위 요소들
- 후손 : 자손을 포함한 모든 하위 요소들 전부

자손 선택자 (>)

a > b {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

후손 선택자 ( )

a b {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

동위 (같은 레벨) 선택자

동위 관계 (같은 레벨) 에 있으면서 뒤에 위치한 특정 요소를 선택할 때 사용

a 요소 뒤에 있는 b 요소 "하나만" 선택

a + b {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

a 요소 뒤에 있는 "모든" b 요소 선택

a ~ b {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

반응 선택자

사용자의 움직임에 따라 선택이 되거나 또는 되지않는 선택자

선택자:active {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

active : 요소가 클릭된 상태일 때 스타일이 적용됨. 버튼이나 링크에 자주 사용됨. 클릭된 순간에만 활성화되며, 마우스를 뗐을 때는 원래 스타일로 돌아감.

선택자:hover {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

hover : 요소 위로 마우스를 올려놓았을 때 스타일이 적용됨. 사용자와의 인터랙션을 강조하거나, 링크나 버튼의 상태 변화를 나타낼 때 유용함.

상태 선택자

요소의 상태(checked, focus, enabled, disabled)에 따라 스타일이 적용되는 방식.

선택자:checked {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

checked : 체크박스나 라디오 버튼과 같이 체크 가능한 요소가 선택된 상태일 때 스타일이 적용됨. 체크된 상태를 시각적으로 구분할 수 있게 해줌.

선택자:focus {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

focus : 사용자가 키보드로 특정 요소를 선택했을 때 스타일이 적용됨. 주로 폼 입력 요소에서 사용되며, 입력 필드에 포커스가 맞춰졌을 때 스타일을 변화시킬 수 있음.

선택자:enabled {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

enabled : 사용자가 상호작용할 수 있는 활성화된 요소에 스타일을 적용하는 선택자. 주로 폼 요소에서 사용되며, 활성화된 상태의 버튼이나 입력 필드에 스타일을 적용함.

선택자:disabled {
    스타일속성명: 값;
    스타일속성명: 값;
    ...
}

disabled : 비활성화된 요소에 스타일을 적용하는 선택자. 사용자가 상호작용할 수 없는 상태임을 나타내기 위해 사용됨.

선택자 우선순위

CSS 우선순위

CSS 스타일 적용 시, 동일한 요소에 여러 스타일이 적용될 경우 우선순위에 따라 스타일이 결정됨.
기본적으로 아래에서 위로 우선순위가 높아짐:
태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일 → !important
태그 선택자보다 클래스 선택자가, 클래스 선택자보다 아이디 선택자가 더 높은 우선순위를 가짐. 인라인 스타일과 !important는 가장 높은 우선순위를 가짐.