~ (틸트)선택자 , + 선택자 활용

~ (틸트)선택자

CSS에서 ~(틸드)는 일반 형제(General Sibling) 선택자입니다. 즉, 특정 요소의 같은 부모를 가진 형제 요소들 중에서, 뒤에 위치한 요소들만 선택하는 역할을 합니다.

#dots .active.dot ~ .dot {
    background: #555;
}

#dots 내부에서 .active.dot 클래스를 가진 요소 뒤에 위치하는 모든 .dot 요소를 선택하여 background: #555; 스타일을 적용합니다. 즉, 다음 줄 요소들 중에 dot 클래스를 갖은 모든 요소.

 

+ 선택자

인접 형제 선택자로 뒤에 바로 붙어 있는 .dot 한 개만 적용 됨

.active.dot + .dot { background: #555; }