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이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다. |
::before 콘텐츠 영역 바로 앞에 가상 요소 선택 |
::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다. |
::after 콘텐츠 영역 바로 뒤에 가상 요소 선택 |
::after 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 뒤에(after) 마지막 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다. |
::marker 자동으로 생성된 리스트 마커 선택 |
::marker 가상 요소 선택자는 <li>나 <summary>처럼 display가 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다. 이 리스트 마커는 글머리 기호나 숫자 등이 포함된 가상의 요소를 말합니다. |
::placeholder placeholder 속성으로 지정된 텍스트 선택 |
CSS ::placeholder 가상 요소 선택자는 placeholder 속성이 지정된 HTML 입력 컨트롤 요소의 placeholder 텍스트의 크기, 색상, 가로 정렬 등을 스타일링하는 데 사용됩니다. ::placeholder 가상 요소 선택자의 사용 방법에 대해 알아봅니다. |
:root 문서의 루트 요소 선택 |
:root 가상 클래스 선택자는 문서의 루트(root) 요소를 선택합니다. HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다. 이 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용하며, 글로벌(전역) CSS 변수를 선언할 때 주로 활용됩니다. |
:focus-within 요소 또는 자손 중 포커스되었을 때 선택 |
CSS :focus-within 가상 클래스 선택자는 요소 또는 그 요소의 자손 중 하나가 포커스되었을 때 해당 요소를 선택합니다. 이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이 :focus 가상 클래스와 다릅니다. :focus-within 가상 클래스 선택자의 사용 방법에 대해 알아봅니다. |
: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 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다. |
element + element 요소 바로 뒤에 있는 타깃 형제 요소를 선택 |
다음 형제 선택자(Next-sibling combinator, +)는 앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다. 선택자A + 선택자B 형태의 선택자로, 두 개의 복합 선택자를 구분하는 플러스 기호(+)가 있으며 선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택합니다. |