📌 가상클래스 선택자
selector:___ {
}
- 그렇게 고른 애들중에서 콜론 뒤에 있는 조건을 만족하는 요소들
- 앞에 있는 선택자는 태그 선택자 말고도 클래스 가능
- 범위를 좁히는 조건은 여러가지
- 그 요소의 현재 상태
- 그 요소들 중에서 첫번째 자식, 마지막 자식
🥑 1.first-chlid
.movie:first-chlid {
}
- .movie로 선택한 것 중에 그 부모의 첫번째 자식임
🥑 2.last-chlid
🥑 3.nth-chlid(3)
- 형제 중에서 n번째 자식
- 괄호안에 함수도 들어갈 수 있음
ex)
2n, 2n-1
odd(홀수), even(짝수)
🥑 4.first-of-type
type은 type selector의 type- 같은
type selector들 형제중에 첫번째
ex)
.movie:first-of-type {
}
- 첫번째 클래스가 .movie인 애들 고르고 났더니 그의 부모의 자식이 div인 애도 있고 p인 애도 있음
-> div인 애 중에서 첫번째 & p인 애 중에서 첫번째 둘다 선택하게 됨
-> 태그가 다른 두가지가 있다그러면 걔네 둘다 선택됨
🥑 5.last-of-type
- 같은
type selector들 형제중에 마지막
🥑 6.nth-of-type(even)
📌 부정 가상클래스 선택자
selector:not(selector)selector 자리에는 주요선택자, 속성선택자 다 올 수 있음- 콜론 앞에 있는 셀렉터를 가지고 고르되 그중에서 괄호안에 있는 셀렉터들을 제외한 나머지
- 여러개의 요소중애 몇개의 요소들만 공통적으로 빼서 스타일 적용할 때 사용
ex)
input:not(.pw) {
}
input 전부 다 고르는데 그 중에서 .pw라는 클래스를 가진 요소만 제외한 나머지의 색깔을 적용하라
input:not([type=passward]) {
}
input들을 구분할 수 있는게 type임 얘네들을 구분할 때 attribute selector를 사용하면 쉽게 구분할 수 있음- 대괄호안에
attribute랑 그 value 값 적기
input:not([placeholder]) {
}
input 태그중에 placeholder 속성이 있는 애들을 제외한 나머지
