다연이네

[days03] CSS 결합자(선택자 간의 관계) 본문

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;
}

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터  (0) 2020.12.07
[days03] :의사 클래스 - 특수 상태를 정의하는 클래스  (0) 2020.12.07
[days03] 수평, 수직 정렬  (0) 2020.12.07
[days03] 팝업폼(Popup Form)과 반응형 폼(Responsive Form)  (0) 2020.12.07
[days03] 1) 오버플로우(overflow) 2) float / clear  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments