이름부터 너무너무 헷갈리는 4가지 결합자들을 정리해보려고 한다.
왜냐면 내일 시험에 무조건~ 나올 것 같아서 😄
1. 자손 결합자와 자식 결합자
- 자손결합자는 공백 (ex. div p{})
- 자식 결합자는 > (ex. div>p{})
포함 관계는 아니지만, 자손 결합자가 더 넓은 범위다. 그러니까 div 아래에 있는 p는 모조리!! 이걸 다 따라야해! 라는 의미고, 자식 결합자는 딱 div 아래에있는 p만. 그러니까 div와 p 사이에 다른 게 끼면 적용이 안된다!
그렇기 때문에! 한 페이지에서 같이 쓰려면 <style> 태그에 자손결합자보다 자식 결합자를 아래에 써야 한다.
- div > p:nth-child(2) : nth-child는 모든 요소를 포함해서 카운팅 한다. 모든 요소 중 2번째 p에 대해 적용
- div> p:nth-of-type(2) : nth-of-type은 요소 중 몇번째 라는 뜻이다. p들 중 2번째에 대해 적용.
2. 일반 형제 결합자와 인접 형제 결합자
- 일반 형제 결합자는 () (ex. div~p)
- 인접 형제 결합자는 + (ex. div+p) 의 형태로 작성한다.
형제 결합자는 조금 특별한데, 자식이 아니라, 말 그대로 형제! 다. div 안에 있는 p 가 아니라 div 가 끝나고 나오는 p에 대해서 영향을 주는 것이다.
위에 했던 결합자와 비슷하게, 이름만 들어도 ‘일반' 이 좀 더 넓은 범위 같지 않은가?
예시의 인접 형제 결합자는 div 바로 뒤에 나오는 p 만 영향을 받는 반면에,
일반 형제 결합자는 div 뒤에 나오는 p 라면 모두모두 영향을 받는다.
따라서! style태그에 일반 형제 > 인접 형제 순으로 작성 해야 한다.
예시를 보자.
<style>
body{
background-color: beige;
}
div p{
background-color: pink;
color: mediumvioletred;
}
div > p{
background-color: yellow;
color: darkorange;
}
div~p{
color: blue;
}
div+p{
color: blueviolet;
}
</style><body>
<p>이 친구는 아무 영향이 없습니다.</p>
<div>
<!-- 당연히 div 바로 하위에 있는 p는 자식이다! -->
<p>여기에는 무슨 말을 써볼까</p>
<p>무야호</p>
</div>
<p>얘는 인접 형제 결합자 입니다.</p>
<p>얘는 일반 형제 결합자 입니다</p>
<div>
그래그래 결합자를 정복해보자구
<div>
그래그래
<p>그려그려 짱구그려그려</p>
</div>
</div>
<div> <!-- 한번 div > p의 자식이 되면, 그 하위 자식도 cascade된다.?-->
<p>
이 친구는 자식
<p> 이 친구는 자손 </p>
<p>이 친구는<span>어떻게될까요?</span>궁금하네잉</p>
</p>
</div>
<div> <!-- 이 친구는 당연히 div의 직접적인 자식이 아니기 때문에 영향x-->
<!-- div의 자식 안에 있는 <p> 이기 때문에, 요거요거는 영향을 받는다는 거지. 자식은 물론이고!-->
<span>
<p>이 친구가 자손인가?</p>
</span>
</div>
</body>
결과는 이렇다.
Uploaded by N2T