CSS 레이아웃 - flex - 선택자 3

가상 클래스 선택자

:first-of-type
:active
:focus
:visited

:first-of-type

first-child와는 비슷하지만 다른 선택자

위처럼 작성을 first-child로 작성하게 되면

적용이 되지 않음

이는 first-child의 요소 카운트 방식에 따른 문제
first-child는 같은 부모 안에 있는 모든 형제 요소 중에 몇 번째 요소인지를 카운트함.
컨테이너 안을 보면 h1태그가 있고 p태그,span 태그 총 5개의 태그가 있는데,
이 중에서 첫번째 요소를 선택한다는 의미를 가지는 first-child임.
p뿐 아니라 h1, span을 포함한 것들에서 첫번째 요소라서 이경우에는 h1이 first-child에 선택이 된것.
하지만 css상에서는 p태그에 first-child 옵션을 주었기에 맞는 요소가 없어서 속성이 적용이 안되는것.

first-of-type를 하게되면 선택한 태그들 중에서 첫번째를 선택하게 됨.
즉 3개의 p 태그 중에서만 첫번째를 고름.

또한 first뿐 아니라 last, nth 도 있음.

:active

활성화 된 요소를 선택하는 가상 클래스 선택자

활성화된 요소란? 버튼 등을 클릭해서 요소의 동작이 활성화 되어있는 상태
버튼을 누른순간부터 떼는 순간 까지

:focus

focus를 받고 있는 입력 창 등의 요소를 선택하는 가상 클래스 선택자

탭키 등을 이용해서 입력창의 커서가 활성화 되어있는 상태

:visited

사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자

ancho태그 즉 a 태그에 적용이 가능함

링크를 눌러서 해당 경로를 방문한 기록이 브라우저상에 남아있는 링크
(기본 컬러 - 보라색)