반응형
가상 클래스 선택자 (Pseudo-Classes)
Hover : 선택자 x 요소에 마우스 커서가 올라가 있는 동안 선택
.x {
width: 100px;
height: 10px;
background-color: orange;
transition 1s; (자연스러운 변경)
}
x:hover {
width: 300px;
}
active : 선택자 x 요소에 마우스를 클릭하고 있는 동안 선택
x:active {
}
focus : 선택자 x요소가 포커스 되면 선택(포커스가 가능한 요소만 적용가능 ex. input select 등 , html에서 포커스 하고자 하는 요소에 tabindex="-1"을 넣어주면 포커스가 가능하다. )
x:focus{
}
first-child : 선택자 x가 형제 요소 중 첫째라면 선택
.(class name) (tag):first-child{
}
nth child : 선택자 x 가 형제요소 중 (n)째 라면 선택
.(class name) *:nth-child(2) {
}
.(class name) *:nth-child(2n) {
}
(2n의 n은 0부터 시작. 2의 배수 번째 선택. 특정한 번째의 요소 선택 가능)
not : 선택자 x 가 아닌 y요소 선택
.(class name) *:not((tag)){
}