![[DEV] CSS선택자2](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcFUuqG%2Fbtq5wv2lrvG%2FAAAAAAAAAAAAAAAAAAAAAD5SLM2X3bLvW-CYwB_HxngoQ2yFHD6Bd5zvw9l1I1Sh%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3D5Ht%252BQvC6E83a8PDlVJQ5ifDwnac%253D)
[DEV] CSS선택자2카테고리 없음2021. 5. 19. 19:42
Table of Contents
가상 클래스 선택자 (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)){
}
@Potato_H :: 코딩하는 감자
기억보단 기록을
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!