가상 선택자 (pseudo class & pseudo element) - CSS

가상 선택자란?

: 지금 문서 내에 존재하지 않는 구조, 즉 문서에 존재하지 않는 요소에 스타일을 부여할 수도 있고

특정 요소의 상태를 미리 추정하여 가상의 클래스로 스타일을 적용시킬 수도 있는 선택자이다.

 

1) 가상 클래스

: 미리 정의해놓은 상황에 적용이 되도록 약속돼있는 보이지 않는 클래스. 예를 들어 특정한 상황(어떤 글자 위에 마우스 포인터를 놓은 상황)에 해당 컨텐츠의 색깔을 변화시키고 싶은 경우, 기존 방법이라면 javascript 같은 외부 언어를 통해서 함수를 지정해주어야 하는 번거로움이 있었을 것이다.

 

자식 요소 관련

• 태그이름:fisrt-child => 해당 태그의 첫 번째 자식 요소 선택
• 태그이름:last-child => 해당 태그의 마지막 자식 요소 선택

링크 관련

• a:link => 하이퍼링크면서 아직 방문하지 않은 앵커
• a:visited => 이미 방문한 하이퍼링크를 의미

사용자 동작 관련

• :focus => 현재 입력 포커스를 갖고 있는 요소에 적용
• :hover => 마우스 포인터가 위치해 있는 요소에 적용
• :active => 사용자 입력에 의해 활성화된 요소에 적용

2) 가상 요소

: 미리 정의해놓은 위치에 삽입이 되도록 약속돼있는 보이지 않는 요소이다.

• 태그 이름:before => 해당 태그의 내부에서 맨 앞부분에 새로운 요소가 추가됨. 내용입력을 위해서는 css에서 content property를 이용해야함
•  태그 이름:after => 해당 태그의 내부에서 맨 마지막에 새로운 요소가 추가됨. 내용 입력을 위해서는 content property를 이용해야함.
• :first-line => 해당 요소의 첫 번째 줄(화면상으로 보여지는)에 있는 텍스트를 선택.
• :first-letter => 블록 레벨 요소의 첫 번째 문자를 선택