Pseudo Class & Element

Pseudo Class 가상클래스

: 선택하고자 하는 HTML 요소의 특별한 상태 (state)를 명시할 때 사용한다.

문법

선택자 : 가상클래스이름 {속성: 속성값}  >>>  a: hover { color : orange; }

 

대표적인 CSS Pseudo Class

:link - 아직 방문하지 않은 요소를 나타낸다. href 속성을 가진 <a> <area> <link> 중 방문하지 않은 모든 요소를 선택한다.

:visited - 사용자가 방문한 이력이 있는 링크를 나타낸다.

:active - 사용자가 활성화 한 요소(버튼 등) 를 나타낸다.

:hover - 사용자의 마우스 포인트가 요소 위에 올라가 있으면 활성화 된다.

:focus - 양식의 입력 칸 등 포커스를 받는 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 Tab 키로 선택했을 때 활성화 된다.

:nth-child - 형제 사이에서의 순서에 따라서 요소를 선택한다.

:not(selected) - not(selector) 안에 포함된 요소를 제외시킨다.

 

📌대표적인 Pseudo Class는 link → visited → hover → active 순으로 선언할 것을 권장한다. 순서가 다를 경우 적용이 안될 수 있다.

 

---

 

Pseudo Element 가상 요소

: HTML 요소의 특정 부분만을 선택할 때 사용된다.

문법

선택자::가상요소이름 {속성 : 속성값;}

 

대표적인 CSS Pseudo Element

::first-letter 텍스트의 첫 글자만을 선택한다. 단, block-level-element 에서만 사용가능하다.

::first-line 텍스트의 첫 줄만을 선택한다. 단, block-level-element 에서만 사용가능하다.

::before 특정 요소의 내용 (content) 부분 바로 앞에 다른 요소를 삽입할 때 사용한다.

::after 특정 요소의 내용 (content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용한다.

::selection 요소에서 사용자가 선택한 부분만을 선택할 때 사용한다.