CSS의 선택자 간략히 알아보기 (전체)

Css에 있는 Id선택자, Class선택자를 Type선택자와 함께 다른 선택자들에는 어떤 것들이 있는지

알아보겠습니다 !

 

 

CSS 선택자

전체 선택자	모든 HTML 요소를 선택합니다. (*)
요소 선택자	HTML 요소의 태그 이름을 기반으로 선택합니다. (tagname)
클래스 선택자	HTML 요소의 class 속성 값을 기반으로 선택합니다. (.classname)
ID 선택자	HTML 요소의 id 속성 값을 기반으로 선택합니다. (#idname)
속성 선택자	HTML 요소의 속성 값을 기반으로 선택합니다. ([attribute] 또는 [attribute=value])
자식 선택자	HTML 요소의 직계 자식 요소를 선택합니다. (parent > child)
자손 선택자	HTML 요소의 모든 하위 요소를 선택합니다. (ancestor descendant)
형제 선택자	HTML 요소의 다음 형제 요소를 선택합니다. (element + nextelement)
인접 형제 선택자	HTML 요소의 모든 형제 요소를 선택합니다. (element ~ siblings)

상태 가상 클래스 선택자	HTML 요소의 특정 상태에 있는 요소를 선택합니다. (:hover, :active, :focus, :checked, :disabled, :enabled)
구조 가상 클래스 선택자	HTML 요소의 특정 구조를 가진 요소를 선택합니다. (:nth-child(), :nth-of-type(), :first-child, last-child, only-child)
속성 가상 클래스 선택자	HTML 요소의 특정 속성 값을 가진 요소를 선택합니다. ([attribute^=value], [attribute$=value], [attribute*=value])
가상 요소 선택자	HTML 요소의 특정 부분을 선택하여 스타일을 적용합니다. (::before, ::after, ::first-letter, ::first-line)
네임스페이스 선택자	네임스페이스 선택자: XML 문서에서 요소의 네임스페이스를 기반으로 선택합니다. (namespace|element)

 

 

 

 

이상으로 CSS의 모든 선택자에 대해 알아보았습니다 !