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 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |