c15. CSS 컴비네이터

CSS 컴비네이터

<div><p> 태그 : 후손 (div p), 자식 (div > p)

<div><p> 태그 : 후손 (div p), 자식 (div > p)

<div><span><p> 태그 : 후손 (div p), 단 자식 (div > p) 은 아님

<p> 태그 : 일반 형제 (div ~ p), 바로 밑 형제 (div + p)

<p> 태그 : 일반 형제 (div ~ p)

CSS 컴비네이터 (combinator) 는 선택자 (selector, 실렉터, 스타일의 묶음) 들간의 관계를 설정하는데 사용됩니다.

CSS 선택자 (selector) 는 하나 이상의 단순 선택자 (simple selector) 를 여러 개 갖을 수 있는데, 이때 컴비네이터 (combinator) 를 기호로 포함하게 됩니다.

CSS3 에는 4개의 컴비네이터 (combinator) 가 있습니다.

	후손 선택자 : descendant selector (space)
	자식 선택자 : child selector (>)
	일반 형제 선택자 : general sibling selector (~)
	가까운 형제 선택자 : adjacent sibling selector (+)

후손 선택자 (descendant Selector) 는 지정된 태그의 "후손" 인 모든 태그들 에 적용됩니다.

자식 선택자 (child selector) 는 지정된 태그의 "직계 자식" 인 모든 태그들 에 적용됩니다.

일반 형제 선택자 (general sibling selector) 는 지정된 태그의 "형제" 인 모든 태그들 에 적용됩니다.

바로 밑 형제 선택자 (adjacent sibling selector) 는 지정된 태그의 "형제 중에 바로 밑" 에 있는 태그 에 적용됩니다.

"형제" 라는 의미는 같은 부모 태그를 갖는 다는 의미이고, "바로 밑" 이라는 의미는 위치적으로 바로 밑에 있는 이라는 의미입니다.

<style>
p {padding: 20px;}
div p {
border: 10px dotted yellow; /*후손*/
}
div > p {
border: 10px dotted green; /*자식*/
}
div ~ p {
border: 10px dotted red; /*일반 형제*/
}
div + p {
border: 10px dotted pink; /*바로 밑 형제*/
}
</style>
<div>
<p>&lt;div&gt;&lt;p&gt; 태그 : 후손 (div p), 자식 (div > p)</p>
<p>&lt;div&gt;&lt;p&gt; 태그 : 후손 (div p), 자식 (div > p)</p>
<span><p>&lt;div&gt;&lt;span&gt;&lt;p&gt; 태그 : 후손 (div p), 단 자식 (div > p) 은 아님</p></span> <!-- 자식은 아니지만 후손임 -->
</div>

<p>&lt;p&gt; 태그 : 일반 형제 (div ~ p), 바로 밑 형제 (div + p)</p>
<p>&lt;p&gt; 태그 : 일반 형제 (div ~ p)</p>

---

[광고] Udemy 동영상 강의로 보기