베이스캠프 7일차
가상 클래스 선택자
first-of-type:
first-child: 형제 요소 중 첫번째 요소를 선택하는 가상 클래스이다.
단점으로 형제 요소가 <h1> <p> <p> <p> <span>가 있다면
.class p:first-child {}로 first-child를 사용하면
첫번째 p태그에 css가 적용이 되지 않는다.
그거와 반대로 first-of-type는 first-child 선택자랑은 다르게 p태그에 css가 적용이 된다.
first-of-type 말고도 아래와 같은 선택자가 있다.
last-of-type {}: 마지막 태그를 선택하는 선택자
nth-of-type {n}: n번째 태그를 선택하는 선택자
:active 가상 클래스 선택자 : 활성화된 요소를 선택하는 선택자
ex) 버튼 클릭시
:focus 가상 클래스 선택자: focus를 받고 있는 입력창 등의 요소를 선택하는 가상 클래스 선택자
ex) 인풋창에 커서가 활성화 되어있는 상태를 말한다.
:visited : 사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택
ex) 링크를 눌러서 해당 경로를 방문한 기록이 브라우저상에 남아 있는 링크(기본컬러 => 보라색)
가상 요소 선택자: 실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.
종류: before, affter
ex)
이렇게 box1 클래스로만으로 css를 추가할 수 있다.
단 가상 요소 선택자에 content 속성은 존재해야 한다 ""이라는 공백값도 들어가야 한다.
위 사진은 가상 요소 선택자의 장점이다.
가상 요소 선택자의 장점으로는 구조가 간단해져서 좋다.
형제 요소 선택자: A와 같은 부모를 가지고 있는 형제 요소들 중에서 B만 선택하는 선택자
ex) A ~ B {}
