CSS 선택자 참조 매뉴얼

CSS 선택자

CSS 선택자는 "검색"(또는 선택)하고 싶은 스타일을 적용하고자 하는 HTML 요소를 찾는 데 사용됩니다.

다양한 선택자를 시연하기 위해 우리의 CSS 선택자 테스트기를 사용하세요.

CSS 간단한 선택자

간단한 선택자는 요소 이름, id, 클래스에 따라 요소를 선택합니다. 또한, 일반 선택자도 있습니다.*)

선택자 예제 예제 설명
요소 p 모든 <p> 요소를 선택합니다.
#id #firstname id="firstname"를 가진 요소를 선택합니다.
* * 모든 요소를 선택합니다.
.class .intro class="intro"을 가진 모든 요소를 선택합니다.

CSS 속성 선택자

속성 선택자는 특정 속성 집합을 가진 HTML 요소를 선택합니다.

선택자 예제 예제 설명
[attribute] [target] target 속성을 가진 모든 요소를 선택합니다.
[attribute=value] [target=_blank] target="_blank" 속성을 가진 모든 요소를 선택합니다.
[attribute~=value] [title~=flower] title 속성 값에 "flower" 단어가 포함된 모든 요소를 선택합니다.
[attribute|=value] [lang|=en] lang 속성 값이 "en"로 시작하는 모든 요소를 선택합니다.
[attribute^=value] a[href^="https"] href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택합니다.
[attribute$=value] a[href$=".pdf"] src 속성이 ".pdf"로 끝나는 모든 <a> 요소를 선택합니다.
[attribute*=value] a[href*="codew3c"] href 속성 값에 "abc" 부분 문자가 포함된 모든 <a> 요소를 선택합니다.

CSS 내장 선택자

선택자 예제 예제 설명
& & 다른 요소의 상대적인 문맥에서 요소에 스타일을 적용합니다