[CSS] 가상선택자

가상 클래스(pseudo class)

 

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.

직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다.

예로 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다면 ?

가상 클래스가 없다면 이런 과정을 거치게 된다.

1. 클래스 선택자 선언, 특정 스타일 규칙 만들기

2. 요소에 커서 올라가면 요소에 클래스 집어 넣기.

3. 요소에 커서가 빠지면 요소에 클래스 삭제

위 과정에서 2,3번은 동적으로 변화되어야 하는데 HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없다.

따라서 다른 언어를 사용하거나 해야 하는데 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고

가상 클래스로 제어할 수 있게 한다.

 

위처럼 가상 클래스는 " : "(콜론) 기호를 써서 나타낸다.

 

문서 구조와 관련된 가상 클래스

 

first-child 와 last-child 가상 클래스 선택자이다.

• : first-child : 첫 번째 자식 요소 선택
• : last-child : 마지막 자식 요소 선택

 

 

실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 작동이 되는 것.

<li class="first-child">HTML</li>

 

앵커 요소와 관련된 가상 클래스

• :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
• :visited : 이미 방문한 하이퍼링크를 의미
• :focus: 현재 입력 초점을 가진 요소에 적용
• :hover: 마우스 포인터가 있는 요소에 적용
• :active: 클릭 시 눌렀을때 처럼 순간적으로 활성

하이퍼 링크는 앵커 요소에 href속성이 있는 것을 의미한다.

 

▼아래 링크를 참고하면 다양한 가상클래스 공부가 가능하다.▼

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN