CSS 선택자는 CSS(Cascading Style Sheets)에서 요소를 선택하여 스타일을 적용하기 위한 패턴입니다. 다양한 방법으로 요소를 선택할 수 있습니다.
|
* 모든 요소 선택 |
* 선택자(전체 선택자, universal selector)는 문서의 모든 요소를 선택합니다. * 선택자는 주로 CSS를 적용하지 않은 상태에서 브라우저가 기본으로 가지고 있는 기본 스타일인 사용자 에이전트 스타일(User agent style)을 요소에서 모두 제거하는데 많이 쓰입니다. |
|---|---|
|
element 요소 이름으로 선택 |
요소(element) 선택자는 지정된 요소 이름을 가진 모든 요소를 선택합니다. 예를 들어, 'h2' 선택자는 문서내의 모든 <h2> 요소를 선택하는 선택자입니다. |
|
[attribute] 이름이 일치하는 속성 선택 |
[attribute] 선택자는 지정된 attribute의 값과 이름이 일치하는 속성을 가진 모든 요소를 선택합니다. 예를 들어, [title]은 문서내의 title 속성을 가진 모든 요소를 선택하는 선택자입니다. |
|
[attribute="value"] 이름과 값이 일치하는 속성 선택 |
[attribute="value"] 선택자는 지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택합니다. 예를 들어, [target="_blank"]는 문서내의 target 속성의 값이 _blank와 일치하는 모든 요소를 선택하는 선택자입니다. |
|
[attribute*="value"] 특정 문자열을 포함하는 값이 있는 속성 선택 |
[attribute*="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 문자열(문자들의 나열)을 포함하는 값이 있는 모든 요소를 선택합니다. 예를 들어, [class*="alert"]은 class="alert caution", class="warning-alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다. |
|
[attribute~="value"] 특정 단어을 포함하는 값이 있는 속성 선택 |
[attribute~="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 단어를 포함하는 값이 있는 모든 요소를 선택합니다. 예를 들어, [class~="alert"]은 class="alert caution", class="warning alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다. |
|
[attribute^="value"] 특정 값으로 시작하는 속성 선택 |
[attribute^="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 값으로 시작하는 모든 요소를 선택합니다. 예를 들어, [href^="#"]은 href="#subject-1", href="#contact" 등의 속성과 값이 있는 요소들을 모두 선택합니다. |
|
[attribute$="value"] 특정 값으로 끝나는 속성 선택 |
[attribute$="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 값으로 끝나는 모든 요소를 선택합니다. 예를 들어, [href^=".html"]은 href="home.html", href="contact.html" 등의 속성과 값이 있는 요소들을 모두 선택합니다. |
|
#id id 값으로 요소 선택 |
#id 선택자는 지정된 id값과 일치하는 id 속성을 가진 요소를 선택합니다. '#' 바로 다음에 지정할 id 값을 붙이면, 이 값과 일치하는 id 속성을 가진 요소를 나타냅니다. 예를 들어, #chapter는 id 속성이 값이 chapter와 일치하는 요소를 선택하는 선택자입니다. |
|
.class 클래스 이름으로 요소 선택 |
.class 선택자는 지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다. '.' 바로 다음에 지정할 class 이름을 붙이면, 이 이름의 클래스가 있는 모든 요소를 나타냅니다. 예를 들어, .alert은 alert이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다. |
|
selectorA, selectorB 여러 선택자가 동일한 선언을 공유 |
여러 선택자가 동일한 선언을 공유하는 경우 쉼표(,)로 구분된 목록으로 연결하여 그룹화할 수 있습니다. '선택자A, 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 콤마 기호(,)가 있으며, 선택자A와 선택자B가 동일한 선언을 공유합니다. |
|
selectorA selectorB 요소의 타깃 자손 요소를 모두 선택 |
자손 선택자(Descendant combinator, 띄어쓰기 공백)는 앞에서 지정한 요소의 타깃 자손 요소를 모두 선택합니다. '선택자A 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 띄어쓰기(" ", 공백)가 있으며 선택자A 요소 안에 위치한 타깃 자손 요소인 선택자B를 모두 선택합니다. |
|
selectorA > selectorB 요소의 타깃 자식 요소를 모두 선택 |
자식 선택자(Child combinator, >)는 앞에서 지정한 요소의 타깃 자식 요소를 모두 선택합니다. '선택자A > 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 기호(>)가 있으며 선택자A 요소 안에 위치한 타깃 자식 요소인 선택자B를 모두 선택합니다. |
|
selectorA ~ selectorB 요소 뒤에 있는 모든 타깃 형제 요소를 선택 |
이후 형제 선택자(Subsequent-sibling combinator, ~)는 앞에서 지정한 요소 이후에 위치한 모든 타깃 형제 요소를 선택합니다. '선택자A ~ 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 물결 기호(~, tilde라고도 함)가 있으며 선택자A 이후에 위치한 모든 타깃 형제 요소인 선택자B를 선택합니다. |
|
selectorA + selectorB 요소 바로 뒤에 있는 타깃 형제 요소를 선택 |
다음 형제 선택자(Next-sibling combinator, +)는 앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다. '선택자A + 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 플러스 기호(+)가 있으며 선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택합니다. |
|
::after 콘텐츠 영역 바로 뒤에 가상 요소 선택 |
::after 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 뒤에(after) 마지막 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다. |
|
::before 콘텐츠 영역 바로 앞에 가상 요소 선택 |
::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다. |
|
::marker 자동으로 생성된 리스트 마커 선택 |
::marker 가상 요소 선택자는 <li>나 <summary>처럼 display가 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다. 이 리스트 마커는 글머리 기호나 숫자 등이 포함된 가상의 요소를 말합니다. |
|
::placeholder placeholder 속성으로 지정된 텍스트 선택 |
::placeholder 가상 요소 선택자는 placeholder 속성이 지정된 HTML 입력 컨트롤 요소의 placeholder 텍스트의 크기, 색상, 가로 정렬 등을 스타일링하는 데 사용됩니다. ::placeholder 가상 요소 선택자의 사용 방법에 대해 알아봅니다. |
|
::selection 텍스트 드래그 스타일 적용하기 |
::selection 가상 요소 선택자는 사용자가 텍스트를 드래그해서 선택한 부분에 스타일을 적용할 수 있게 합니다. 사용자가 텍스트를 선택할 때, 그 선택된 부분(‘하이라이트된 부분'이라고도 함)에 지정한 스타일을 적용할 수 있게 합니다. |
|
:hover 요소에 마우스를 올려 놓았을 동안 선택 |
:hover 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓았을 동안 해당 요소를 선택합니다. 사용자가 마우스 커서로 요소 위에 올려 놓았을 동안에만 미리 정의된 스타일이 적용되기 때문에 인터랙티브하고 동적인 사용자 경험을 제공할 수 있습니다. |
|
:active 요소에 마우스를 올려 놓고 누르고 있을 동안 선택 |
:active 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓고 누르는 순간부터 떼는 시점까지 해당 요소를 선택합니다. 이 기간 동안에만 미리 정의된 스타일이 적용되므로, 사용자에게 인터랙티브하고 동적인 사용자 경험을 제공합니다. |
|
:focus 요소가 포커스되었을 동안 선택 |
:focus 가상 클래스 선택자는 요소가 포커스되었을 동안 해당 요소를 선택합니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다. |
|
:focus-within 요소 또는 자손 중 포커스되었을 동안 선택 |
:focus-within 가상 클래스 선택자는 요소 또는 그 요소의 자손 중 하나가 포커스되었을 동안 해당 요소를 선택합니다. 이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이 :focus 가상 클래스와 다릅니다. |
|
:checked 라디오 버튼과 체크박스가 체크된 상태일 때 선택 |
:checked 가상 클래스 선택자는 라디오 버튼과 체크박스가 체크된 상태일 때 해당 요소를 선택합니다. 라디오 버튼이나 체크박스의 상태 변화에 따라 스타일을 동적으로 변경하여 인터랙티브한 사용자 경험을 구현하는 데 활용됩니다. |
|
:not(selectorX) selectorX를 제외한 나머지 요소를 선택 |
부정을 뜻하는 :not(selectorX) 가상 클래스 선택자는 인수로 취하는 selectorX와 일치하지 않는 요소를 선택합니다. 이 선택자는 특정 선택자를 제외한 나머지 요소에 스타일을 적용하고 싶을 때 사용합니다. |
|
:root 문서의 루트 요소 선택 |
:root 가상 클래스 선택자는 문서의 루트(root) 요소를 선택합니다. HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다. 이 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용하며, 글로벌(전역) CSS 변수를 선언할 때 주로 활용됩니다. |
|
:first-child 첫 번째 자식 요소 선택 |
:first-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 제일 첫 번째에 위치하는 요소를 선택합니다. :first-child 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다. |
|
:last-child 마지막 자식 요소 선택 |
:last-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 마지막에 위치하는 요소를 선택합니다. :last-child 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다. |
|
:nth-child(n) n 번째 자식 요소 선택 |
:nth-child(n) 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들을 선택합니다. :nth-child(n) 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다. |
|
:nth-last-child(n) 끝부터 계산하여 n 번째 자식 요소 선택 |
:nth-last-child(n) 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 인덱스를 기준으로 끝부터 계산하여 n 번째에 위치하는 요소들을 선택합니다. :nth-last-child(n) 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다. |
|
:nth-of-type(n) 태그 이름으로 n 번째 자식 요소 선택 |
:nth-of-type(n) 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 n 번째에 위치하는 요소들을 선택합니다. :nth-of-type(n) 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |
|
:last-of-type 태그 이름 기준으로 마지막 자식 요소 선택 |
:last-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 마지막에 위치하는 요소를 선택합니다. :last-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |
|
:first-of-type 태그 이름 기준으로 첫 번째 자식 요소 선택 |
:first-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째에 위치하는 요소를 선택합니다. :first-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |
|
:nth-last-of-type(n) 태그 이름으로 끝부터 계산하여 n 번째 자식 선택 |
:nth-last-of-type(n) 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 끝부터 계산하여 n 번째에 위치하는 요소들을 선택합니다. :nth-last-of-type(n) 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |
|
:only-of-type 자식 요소 중에서 유일한 태그 이름 선택 |
:only-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다. :only-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |