CSS 결합자 (Combinators)

자손 결합자

div span {

     color: red;

}

으로 공백으로 표현

div 하위의 모든 span태그에 적용

 

자식 결합자

div > span {

     color: red;

}

> 으로 표현

div 바로 아래의 span태그에 적용

 

일반 형제 결합자

p ~ span {

     color: red;

}

~ 으로 표현

p의 형제 요소 중 뒤에 위치하는 모든 span태그에 적용

 

인접 형제 결합자

p + span {

     color: red;

}

+ 으로 표현

p의 형제 요소 중 바로 뒤에 위치하는 span태그에 적용