CSS 가상 선택자

가상 선택자로는 가상 클래스 선택자(‘:’), 가상 요소 선택자(‘::’) 가 있음

가상 요소 선택자 (‘::’)

선택된 요소의 앞, 뒤에 내용를 추가 할 수 있음 - content 속성 필수

before, after

.menuItems li::before {
  content: "test";
  background: #3e517a;
  margin-right: 10px;
}
.menuItems li::after {
  content: "test";
  background: #3e517a;
  margin-right: 10px;
}

가상 클래스 선택자 (‘:’)

선택된 요소의 특정 조건(이벤트, 순서 등)을 추가 할 수 있음

hover, active, focus, xxx-child, nth-of-type, not …

a:hover {
}
.btn-test:active {
}
input:focus {
}
.menuItems li:first-child {
}
.menuItems li:nth-child(2n) {
}
.menuItems li:nth-child(n + 1) {
}
.menuItems li:nth-of-type(1) {
}
.menuItems li:not(.test) {
}