기본 CSS 지식 2

Combinators

<div>
 <p>
   <span>a</span>
 </p>
 <span>b</span>
</div>

1. 빈칸: 부모 자식을 써서 선택하는 경우다. 안에 포함되기만 하면 모두 적용된다.

div span {
	color: tomato; // div안의 p를 토마토 색으로!
}

2. '>' : 바로 한단계 하위 자식들만 적용된다. 위의 예시에서 b만 토마토색으로 변한다.

div > span {
	color: tomato; 
}

3. '+' : 형제들을 찾을 수 있다. 밑의 코드처럼 쓰면 b만 색이 변한다.

p + span {
	color: tomato; 
}