[CSS] 자식/후손/형제 선택자

자식 선택자

 - 자손 선택자의 선택자 형태는 "선택자A > 선택자 B"

 - 선택자 A의 자손에 위치하는 선택자 B를 선택

 

<형식>

부모 요소 > 자식 요소 {

	속성명: 속성값;
 }
 
 <사용 예>
 
div > p { color: red; } /* div 자식 요소 중 p인 태그 */

span > p { color: blue;} /* span 자식 요소 중 p인 태그 */

 

 

후손 선택자

  - 후손 선택자의 선택자 형태는 "선택자A 선택자 B"

  - 선택자 A의 후손에 위치하는 선택자 B를 선택

<사용 예>
div p { color: red;}

 

 

형제(아우) 선택자

 - A와 B가 같은 계층에 있을 때 A 바로 뒤에 B를 선택자로 지정

A + B

<사용 예>
h1 + h2 {
	color: red;
}

 - <h1> 태그 바로 뒤에 위치한 <h2> 태그 1개만 색을 빨강으로 변경

A ~ B

h1 ~ h2 {
	color: red;
}