css 속성(가상 클래스, 가상 요소 선택자)

css 가상 클래스 선택자

:hover
마우스를 요소에 올려두는 동안 동작

:active
마우스를 클릭하고 있는 동안에만 동작

:focus
선택자 ABC 요소가 포커스되면 동작
대표적으로 input 요소

tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다. 이름에서도 알 수 있듯, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성이다. 순서(값)로 -1이 아닌 다른 값을 넣은 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.

가상 클래스 선택자

FIRTST CHILD
선택자 ABC가 형제 요소 중 첫째라면 선택
.fruits span: first-child {}
.fruits라는 클래스를 가진 부모 요소의 여러 형제 요소 첫째 자식 요소에 적용
단, 첫째 자식이 span이 아닐 경우 적용 x

LAST CHILD
선택자 ABC가 형제 요소 중 막내라면 선택
.fruits h3: last-child {}
퍼스트 차일드의 반대 개념
마찬가지로 마지막 요소가 h3이 아닌 경우 적용 x

NTH CHILD
선택자 ABC가 형제 요소 중 (n)째라면 선택
.fruits *:nth-child(2) {}
*(모든 요소 중) 2번째 요소를 선택

+

.fruits *nth-child(2n) {}
n은 0부터 시작하여
2 * 0
2 * 1
2 * 2
즉, 2n은 2의 배수의 요소(짝수)를 선택한다는 뜻
홀수는 .fruits *:nth-child(2n+1)

부정 선택자 NOT
ABC:not(XYZ)
선택자 XYZ가 아닌 ABC 요소 선택
.fruits *not(span) {}
괄호 안에 잇는 span 태그를 제외한 나머지 요소들을 선택하는 선택자

css 가상 요소 선택자

BEFORE(인라인(글자) 요소)
ABC::before
ex) .box::before {
content: "앞"
}
선택자 ABC 요소의 내부 앞에 인라인 요소의 내용을 삽입 해주는 선택자

AFTER(인라인(글자) 요소)
ABC::after
ex) .box::after {
content: "뒤"
}
선택자 ABC 요소의 내부 뒤에 인라인 요소의 내용을 삽입 해주는 선택자