[CSS] CSS Selector (CSS 선택자)

CSS 선택자

CSS 선택자는 style을 적용하고자 하는 HTML 요소를 선택자로 특정하여 스타일을 정의하는 것을 말한다.

 

 

---

 

CSS 선택자 종류

📃 전체 선택자

📃 TAG 선택자

📃 ID 선택자

📃 CLASS 선택자

📃 자손 선택자

📃 자식 선택자

📃 인접 형제 선택자

📃 동적 선택자

📃 구조 의사 클래스 선택자

 

 

📃 전체 선택자

HTML 문서 내의 모든 요소를 선택한다.

* { }

 

📃 TAG 선택자

지정된 태그명을 가진 요소를 선택한다.

element { }

 

📃 ID 선택자

지정된 ID를 가진 요소를 선택한다. (선택자 앞에 #를 붙인다.)

#ID { }

 

📃 CLASS 선택자

지정된 CLASS를 가진 요소를 선택한다. (선택자 앞에 .를 붙인다.)

.CLASS { }

 

📃 자손 선택자

A 선택자의 하위 선택자 중 B 선택자를 선택한다.

Aselector Bselector { }

 

📃 자식 선택자

A 선택자의 하위 선택자 B 선택자만 선택한다.

Aselector > Bselector { }

 

📃 인접 형제 선택자

같은 부모를 가질 때 A 선택자 바로 뒤에 오는 B 선택자만 선택한다.

Aselector + Bselector { }

 

📃 동적 선택자

링크의 상태에 따라 각각의 스타일을 별도로 설정한다.

1. link : 링크의 기본 상태
2. visited : 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태
3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태
5. focus : 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태

<style>
    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
</style>

 

📃 구조 의사 선택자

HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택한다.

 

 🧨 :first-child

모든 자식 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택한다.

p:first-child { }

 

 🧨 :last-child

모든 자식 요소 중에서 맨 마지막에 위치하는 자식 요소를 모두 선택한다.

p:list-child { }

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!