티스토리 뷰

CSS 선택자의 다양한 모습들

다시한번 복습하자면 CSS에서 선택자는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이다. 지난 '기본적인 CSS 선택자 3가지' 글에서, 선택자는 요소 이름(Element Name), ID, 클래스(Class)와 같은 3가지 기본적 요소들로 선택될 수 있다고 하였다. 하지만 이 외에도 정말 다양한 선택자 정보들로 요소들을 선택 할 수 있는데, 이번 시간에는 그것들이 뭔지 알아보자. 참고로 선택자는 지원하는 CSS 레벨에 따라서 차이가 있다.

참고로 이 포스팅은 아래의 이전 글들에 이어지는 글이다.

  1. CSS 소개 : CSS는 왜 Cascading Style Sheet일까?
  2. CSS가 생겨난 이유 : CSS가 없던 시절의 문제
  3. CSS 문법 소개 : CSS 기초 문법 2가지 구문만 알면 오케이~
  4. CSS의 선택자 1편 : 기본적인 CSS 선택자 3가지

기본 선택자들(Basic Selectors)

  • 전체 선택자(Universal Selector) : 이 선택자는 문서내의 모든 요소를 선택한다. *는 문서의 모든 요소와 일치한다.
  • 요소 선택자(Type Selector) : HTML의 요소를 선택한다.
  • 클래스 선택자(Class Selector) : 마침표(.)으로 클래스 요소 선택.
  • ID 선택자(ID Selector) : 샵(#)으로 ID 요소 선택.
  • 속성 선택자 (Attribute Selector) : 이 선택자는 속성 중 하나의 값에 따라 노드를 선택한다.

복합 선택자들(Combinator)

두 개 이상의 선택자 요소가 결합된 형태.

  • 하위 선택자 (Descendant Selector) : ''결합자는 이전에 지정된 요소의 자식(직접 자식이 필요하지 않음)인 노드를 모두 선택한다.
  • 자식 선택자(child Selector) : '>'결합자는 이전에 지정된 요소의 바로 아래에 존재하는 하위 노드만 선택한다.
  • 인접 형제 선택자(Adjacent Sibling Selector) : '+'결합자는 이전에 지정된 요소 바로 다음에 오는 인접한 노드를 선택한다.
  • 일반 형제 선택자(General Sibling Selector) : '~'결합자는 두 요소가 같은 부모를 공유하는 경우, 이전에 지정된 요소 뒤에 오는 모든 노드(반드시 필요하지는 않음)를 선택한다.

속성 선택자들(Attribute Selectors)

요소의 속성에 따라서 선택. 대괄호([]) 사이에 속성을 넣어서 선택함.

상태선택자(State Selector)

콜론(:) 뒤 요소를 선택.

아래는 다양한 선택자 정보 정리한 표이다. 표에서 "CSS"열은 속성이 정의 된 CSS 버전(CSS1, CSS2 또는 CSS3)을 나타낸다.

선택자예제예제 설명CSS
.class.introclass = "intro"인 모든 요소를 선택한다.1
#id#firstnameid = "firstname"인 요소를 선택한다.1
**모든 요소를 선택한다.2
elementp모든 <p> 요소를 선택한다.1
element,elementdiv, p모든 <div> 요소와 모든 <p> 요소를 선택한다.1
element elementdiv p<div> 요소 내의 모든 <p> 요소를 선택한다.1
element>elementdiv > p

부모가 <div> 요소인 모든 <p> 요소를 선택한다.

2
element+elementdiv + p<div> 요소 바로 다음에 배치 된 모든 <p> 요소를 선택한다.2
element1~element2p ~ ul<p> 요소 앞에 있는 모든 <ul> 요소를 선택한다.3
[attribute][target]대상 속성이 있는 모든 요소를 선택한다.2
[attribute=value][target=_blank]target = "_ blank"가있는 모든 요소를 선택한다.2
[attribute~=value][title~=flower]

"flower"라는 단어가 포함 된 제목 속성이 있는 모든 요소를 선택한다.

2
[attribute|=value][lang|=en]"en"으로 시작하는 lang 속성 값을 가진 모든 요소를 선택한다.2
[attribute^=value]a[href^="https"]href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택한다.3
[attribute$=value]a[href$=".pdf"]href 속성 값이 ".pdf"로 끝나는 모든 <a> 요소를 선택한다.3
[attribute*=value]

a[href*="schools"]

href 속성 값에 하위 문자열 "schools"을 포함하는 모든 <a> 요소를 선택한다.

3
:activea:active

활성화된 링크를 선택한다.

1
::afterp::after

각 <p> 요소의 내용 뒤에 무언가를 삽입한다.

2
::beforep::before각 <p> 요소의 내용 앞에 무언가를 삽입한다.2
:checkedinput:checked

체크 된 모든 <input> 요소를 선택한다.

3
:disabledinput:disabled비활성화 된 모든 <input> 요소를 선택한다.3
:emptyp:empty자식 (텍스트 노드 포함)이 없는 모든 <p> 요소를 선택한다.3
:enabledinput:enabled활성화 된 모든 <input> 요소를 선택한다.3
:first-childp:first-child

상위 요소의 첫 번째 하위 요소인 모든 <p> 요소를 선택한다.

2
::first-letterp::first-letter모든 <p> 요소의 첫 글자를 선택한다.1
::first-linep::first-line모든 <p> 요소의 첫 번째 줄을 선택한다.1
:first-of-typep:first-of-type

상위 요소의 첫 번째 <p> 요소인 모든 <p> 요소를 선택한다.

3
:focusinput:focus포커스가 있는 입력 요소를 선택한다.2
:hovera:hover

마우스 오버된 링크 선택

1
:in-rangeinput:in-range지정된 범위 내의 값을 가진 입력 요소를 선택한다.3
:invalidinput:invalid값이 잘못된 모든 입력 요소를 선택한다.3
:lang(language)p:lang(it)lang 속성이 "it"(이탈리아어) 인 모든 <p> 요소를 선택한다.2
:last-childp:last-child

부모의 마지막 하위 요소인 모든 <p> 요소를 선택한다.

3
:last-of-typep:last-of-type

상위 요소의 마지막 <p> 요소인 모든 <p> 요소를 선택한다.

3
:linka:link모든 방문하지 않은 링크를 선택한다.1
:not(selector):not(p)<p> 요소가 아닌 모든 요소를 선택한다.3
:nth-child(n)p:nth-child(2)

부모의 두 번째 자식인 모든 <p> 요소를 선택한다.

3
:nth-last-child(n)p:nth-last-child(2)

마지막 자식으로 부터 세어 부모의 두 번째 자식인 모든 <p> 요소를 선택한다.

3
:nth-last-of-type(n)p:nth-last-of-type(2)

마지막 자식으로부터 세어 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택한다.

3
:nth-of-type(n)p:nth-of-type(2)

부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택한다.

3
:only-of-typep:only-of-type

부모의 유일한 <p> 요소인 모든 <p> 요소를 선택한다.

3
:only-childp:only-child

부모의 유일한 자식인 모든 <p> 요소를 선택한다.

3
:optionalinput:optional"필수"속성이없는 입력 요소를 선택한다.3
:out-of-rangeinput:out-of-range지정된 범위 밖의 값을 가진 입력 요소를 선택한다.3
:read-onlyinput:read-only"readonly"속성이 지정된 입력 요소를 선택한다.3
:read-writeinput:read-write"readonly"속성이 지정되지 않은 입력 요소를 선택한다.3
:requiredinput:required"required"속성이 지정된 입력 요소를 선택한다.3
:root:root문서의 루트 요소를 선택한다.3
::selection::selection사용자가 선택한 요소의 부분을 선택한다.
:target#news:target현재 활성 #news 요소 (앵커 이름이 포함 된 URL을 클릭 함)를 선택한다.)3
:validinput:valid유효한 값을 가진 모든 입력 요소를 선택한다.3
:visiteda:visited방문한 모든 링크를 선택한다.1