선택자 결합(Selector Cobinators)

하위 선택자

ul태그 중 li태그를 선택하고 싶을 때

class로도 사용 가능

자식 선택자 (>)

>를 사용.

하위선택자의 경우 ol안에 있는 리스트2까지 css가 적용 된다.
일반적으로 바로 밑에 있는 첫번째 자식에 해당하지만
리스트4만 적용하고 싶다면 last-of-type을 적고 자식 선택자인 >를 사용하면 된다

일반 형제 선택자 결합(~)

같은 부모 요소를 가진 형제들 중에서 선택해야 함
해당 태그 뒤에 있는 태그를 바꾸고 싶을 때 사용. 앞부분은 적용 x

• code 뒤에 있는 p태그들에게 적용한다.

class로 쓸 경우

• code 태그 뒤에 red 클래스를 가진 형제만 적용한다.

인접 형제 선택자 결합 (+)

해당 태그 바로 뒤에 그 태그가 해당해야만 적용

그룹화

여러 태그를 한꺼번에 적용하고 싶을 때