Jam's story

[CSS]:first(last)-child 의 정확한 의미 본문

WEB/CSS

[CSS]:first(last)-child 의 정확한 의미

애플쩀 2022. 5. 24. 15:42

+

p: i => 모든 p태그의 자식 i

p:first-child i  =>어떤 요소의 첫번째 자식태그가 p인 i태그 

p i:first-child   =>모든 p태그의 첫번째 자식이 i 태그 인것 

<style type="text/css">
/* 어떤 요소의 첫번째 자식, 마지막 자식, n 번째 자식일 경우
  */
p:first-child{
background-color: yellow;
border:1px solid red;
}
/* 첫번째와 마지막태그가 p 가 아니라면 적용되지 않는다.  */
p:first-of-type {
	background-color: yellow;
border:1px solid red;
}

p:nth-child(7) {
	background-color: lightpink;
}
/* p태그 중에서 3번재  */
p:nth-of-type(3){
background-color: red;
}

</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* 어떤 요소의 첫번째자식이 pre인것
 여기서는 첫번째 자식이 p이고 
 pre는 8번째이기에 해당 x */
pre:first-child{
background-color: pink;
}
/* 어떤 요소의 첫번째 자식이 p인것  */
p:first-child{
color:red;
}
/* p의 첫번재 자식이 i인것 */
p i:first-child{
background-color: pink;
}
/* 첫번째 타입이 p인것  */
p:first-of-type {
	background-color:green;
}
/* 어떤 요소의 7번째 자식이 p인것  */
p:nth-child(7){
background-color:red;
}

</style>
</head>
<body>
<div class="center">
<p>1 Lorem.<a></a></p>
<p>2 Maxime.<i>icon</i></p>
<p>3 Veritatis!</p>
<p>4 Nisi.</p>
<p>5 Dicta.</p>
<p>6 Laboriosam.</p>
<p>7 Eius.</p>
<pre>1Lorem.</pre>
<pre>2Doloremque?</pre>
<pre>3Ea!</pre>
</div>
</body>
</html>
저작자표시 (새창열림)

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

[CSS] 의사요소  (0) 2022.05.24
[CSS] 의사클래스 종류  (0) 2022.05.24
[CSS] 의사클래스  (0) 2022.05.24
[CSS] 선택자 혹은 결합자  (0) 2022.05.24
[CSS] 내부의 p 태그 글씨들을 수직/수평정렬  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments