[TIL] CSS Combinators - CSS 조합 선택자

선택자를 여러 개 쓸 경우

1. 하위 선택자 (Descendant Selector)

하위 선택자는 특정 요소의 하위에 있는 모든 요소를 선택한다. 상위 요소와 하위 요소는 공백으로 구분한다.

• 이 때 상위 요소와 하위 요소 사이에 다른 요소가 더 있어도 선택이 된다.

#content p {
color: blue;
}

=> 아이디 값이 content 인 태그의 후손 요소에 해당하는 태그들 중에서 p 태그의 color 속성 값을 blue 로 설정하라는 의미로 해석하면 된다.

2. 자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 자식 요소를 선택한다. 부모와 자식 요소는 > 로 구분하면 된다.

div > p {
    background-color: yellow;
}

=> div 태그의 직계 자식인 모든 p 요소의 background color 를 yellow 로 설정하라는 의미이다.

3. 형제 선택자 (Sibiling Selector)

형제 선택자에는 인접 형제 선택자와 일반 형제 선택자가 있다.

3.1. 인접 형제 선택자 (Adjacent Sibiling Selector)
인접 형제 결합자 (+) 는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.

• 주의할 점은 한 단계 아래에 있는 요소만 선택한다는 것이다.

img + span {
font-style: italic;
}

=> img 바로 뒤에 오는 span 에 이탤릭체를 적용하라는 의미이다.

3.2 일반 형제 선택자 (General Sibiling Selector)

일반 형제 결합자(~) 는 같은 부모를 가지고 지정한 요소의 뒤에 위치하는 형제 요소를 선택한다.

• 이 때 두 요소가 서로 붙어있을 필요는 없다.

p ~ span {
color: red;
}

p 뒤에 오는 span 요소의 color 를 red 로 설정하라는 의미이다.