CSS 선택자 소개

* 선택자(전체 선택자, universal selector)는 문서의 모든 요소를 선택합니다. * 선택자는 주로 CSS를 적용하지 않은 상태에서 브라우저가 기본으로 가지고 있는 기본 스타일인 사용자 에이전트 스타일(User agent style)을 요소에서 모두 제거하는데 많이 쓰입니다.

요소(element) 선택자는 지정된 요소 이름을 가진 모든 요소를 선택합니다. 예를 들어, 'h2' 선택자는 문서내의 모든 <h2> 요소를 선택하는 선택자입니다.

[attribute] 선택자는 지정된 attribute의 값과 이름이 일치하는 속성을 가진 모든 요소를 선택합니다. 예를 들어, [title]은 문서내의 title 속성을 가진 모든 요소를 선택하는 선택자입니다.

[attribute="value"] 선택자는 지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택합니다. 예를 들어, [target="_blank"]는 문서내의 target 속성의 값이 _blank와 일치하는 모든 요소를 선택하는 선택자입니다.

[attribute*="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 문자열(문자들의 나열)을 포함하는 값이 있는 모든 요소를 선택합니다. 예를 들어, [class*="alert"]은 class="alert caution", class="warning-alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

[attribute~="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 단어를 포함하는 값이 있는 모든 요소를 선택합니다. 예를 들어, [class~="alert"]은 class="alert caution", class="warning alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

[attribute^="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 값으로 시작하는 모든 요소를 선택합니다. 예를 들어, [href^="#"]은 href="#subject-1", href="#contact" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

[attribute$="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 값으로 끝나는 모든 요소를 선택합니다. 예를 들어, [href^=".html"]은 href="home.html", href="contact.html" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

#id 선택자는 지정된 id값과 일치하는 id 속성을 가진 요소를 선택합니다. '#' 바로 다음에 지정할 id 값을 붙이면, 이 값과 일치하는 id 속성을 가진 요소를 나타냅니다. 예를 들어, #chapter는 id 속성이 값이 chapter와 일치하는 요소를 선택하는 선택자입니다.

.class 선택자는 지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다. '.' 바로 다음에 지정할 class 이름을 붙이면, 이 이름의 클래스가 있는 모든 요소를 나타냅니다. 예를 들어, .alert은 alert이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다.

여러 선택자가 동일한 선언을 공유하는 경우 쉼표(,)로 구분된 목록으로 연결하여 그룹화할 수 있습니다. '선택자A, 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 콤마 기호(,)가 있으며, 선택자A와 선택자B가 동일한 선언을 공유합니다.

자손 선택자(Descendant combinator, 띄어쓰기 공백)는 앞에서 지정한 요소의 타깃 자손 요소를 모두 선택합니다. '선택자A 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 띄어쓰기(" ", 공백)가 있으며 선택자A 요소 안에 위치한 타깃 자손 요소인 선택자B를 모두 선택합니다.

자식 선택자(Child combinator, >)는 앞에서 지정한 요소의 타깃 자식 요소를 모두 선택합니다. '선택자A > 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 기호(>)가 있으며 선택자A 요소 안에 위치한 타깃 자식 요소인 선택자B를 모두 선택합니다.

이후 형제 선택자(Subsequent-sibling combinator, ~)는 앞에서 지정한 요소 이후에 위치한 모든 타깃 형제 요소를 선택합니다. '선택자A ~ 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 물결 기호(~, tilde라고도 함)가 있으며 선택자A 이후에 위치한 모든 타깃 형제 요소인 선택자B를 선택합니다.

다음 형제 선택자(Next-sibling combinator, +)는 앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다. '선택자A + 선택자B' 형태의 선택자로, 두 개의 복합 선택자를 구분하는 플러스 기호(+)가 있으며 선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택합니다.

::after 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 뒤에(after) 마지막 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다.

::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다.

::marker 가상 요소 선택자는 <li>나 <summary>처럼 display가 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다. 이 리스트 마커는 글머리 기호나 숫자 등이 포함된 가상의 요소를 말합니다.

::placeholder 가상 요소 선택자는 HTML placeholder 속성이 지정된 텍스트 입력 컨트롤 요소의 플레이스홀더 텍스트의 크기, 색상, 가로 정렬 등을 스타일링하는 데 사용됩니다. ::placeholder 가상 요소 선택자의 사용 방법에 대해 알아봅니다.

::selection 가상 요소 선택자는 사용자가 텍스트를 드래그해서 선택한 부분에 스타일을 적용할 수 있게 합니다. 사용자가 텍스트를 선택할 때, 그 선택된 부분(‘하이라이트된 부분'이라고도 함)에 지정한 스타일을 적용할 수 있게 합니다.

:link 가상 클래스 선택자는 브라우저의 방문 기록을 기준으로, 아직 방문하지 않은 링크를 선택합니다. 이 선택자는 크롬 브라우저 등에서 '개인정보 보호 및 보안 정책'에 의해 더 이상 지원하지 않습니다.

:visited 가상 클래스 선택자는 브라우저의 방문 기록을 기준으로, 이미 방문한 링크를 선택합니다. 이 선택자는 크롬 브라우저 등에서 '개인정보 보호 및 보안 정책'에 의해 더 이상 지원하지 않습니다.

:hover 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓았을 동안 해당 요소를 선택합니다. 사용자가 마우스 커서로 요소 위에 올려 놓았을 동안에만 미리 정의된 스타일이 적용되기 때문에 인터랙티브하고 동적인 사용자 경험을 제공할 수 있습니다.

:active 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓고 누르는 순간부터 떼는 시점까지 해당 요소를 선택합니다. 이 기간 동안에만 미리 정의된 스타일이 적용되므로, 사용자에게 인터랙티브하고 동적인 사용자 경험을 제공합니다.

:focus 가상 클래스 선택자는 요소가 포커스되었을 동안 해당 요소를 선택합니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다.

:focus-within 가상 클래스 선택자는 요소 또는 그 요소의 자손 중 하나가 포커스되었을 동안 해당 요소를 선택합니다. 이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이 :focus 가상 클래스와 다릅니다.

:checked 가상 클래스 선택자는 라디오 버튼과 체크박스가 체크된 상태일 때 해당 요소를 선택합니다. 라디오 버튼이나 체크박스의 상태 변화에 따라 스타일을 동적으로 변경하여 인터랙티브한 사용자 경험을 구현하는 데 활용됩니다.

:is() 함수형 가상 클래스 선택자는 괄호 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다. 여러 선택자를 쉼표로 구분하여 묶어, 그 중 하나라도 일치하면 요소를 선택합니다.

:where() 함수형 가상 클래스 선택자는 괄호 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다. :is()와 모든 측면에서 동일하지만, 구체성 값이 없습니다.

:has() 함수형 가상 클래스 선택자는 괄호 안의 관계 선택자 목록 중 하나라도 관계를 가지고 있으면 요소를 선택합니다. 관계 선택자(Relative selector)란 형제나 자손 관계 조합을 나타내는 선택자를 말합니다.

부정을 뜻하는 :not(selectorX) 함수형 가상 클래스 선택자는 인수로 취하는 selectorX와 일치하지 않는 요소를 선택합니다. 이 선택자는 특정 선택자를 제외한 나머지 요소에 스타일을 적용하고 싶을 때 사용합니다.

:lang(콘텐츠 언어) 가상 클래스 선택자는 인수로 주어진 콘텐츠 언어를 기반으로 lang 속성과 그 값을 가진 요소를 선택합니다.

:root 가상 클래스 선택자는 문서의 루트(root) 요소를 선택합니다. HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다. 이 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용하며, 글로벌(전역) CSS 변수를 선언할 때 주로 활용됩니다.

:first-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 제일 첫 번째에 위치하는 요소를 선택합니다. :first-child 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다.

:last-child 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 마지막에 위치하는 요소를 선택합니다. :last-child 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다.

:nth-child(n) 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들을 선택합니다. :nth-child(n) 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다.

:nth-last-child(n) 가상 클래스 선택자는 부모 요소의 자식 요소 중에서 인덱스를 기준으로 끝부터 계산하여 n 번째에 위치하는 요소들을 선택합니다. :nth-last-child(n) 가상 클래스 선택자의 다양한 사용 방법에 대해 알아보겠습니다.

:nth-of-type(n) 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 n 번째에 위치하는 요소들을 선택합니다. :nth-of-type(n) 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다.

:last-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 마지막에 위치하는 요소를 선택합니다. :last-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다.

:first-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째에 위치하는 요소를 선택합니다. :first-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다.

:nth-last-of-type(n) 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 끝부터 계산하여 n 번째에 위치하는 요소들을 선택합니다. :nth-last-of-type(n) 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다.

:only-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다. :only-of-type 가상 클래스 선택자의 다양한 사용 방법, 주의할 점 등에 대해 알아보겠습니다.