Web/CSS
[days03] CSS 결합자(선택자 간의 관계)
다연
2020. 12. 7. 19:40
반응형
선택자 선택자
선택자 > 선택자
선택자 + 선택자
선택자 ~ 선택자
body
<body>
<h3>css 결합자 == 선택자(selector) 간의 관계</h3>
<h3>후손 선택자</h3>
<p>Lorem ipsum dolor sit amet.</p>
<div>
<p>lorem5</p>
<p>lorem5</p>
<section> <!-- div의 직계 자식은 아님 -->
<p>Lorem ipsum dolor sit.</p>
</section>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Saepe dolorum libero incidunt delectus quaerat numquam.</p>
style
p,h3{
border: 1px solid red;
}
선택자 > 선택자 : 직계자식
div>p{
background-color: yellow;
}
선택자 > 선택자 : 직계자식 + 후손
div p{
background: pink;
}
선택자 + 선택자 : 가장 가까운 형제
div+p{
background: green;
}
선택자 ~ 선택자 : 모든 형제
div ~p{
background: black;
} 
반응형