본문 바로가기

웹 프로그래밍/CSS

[CSS] 가상클래스 p:only-child VS p:only-of-type 의미 및 차이점

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	p:only-child { /* 자식이 하나이고, p 태그 일 때 적용 */
		color: red;
	}
	p:only-of-type { /* 자식이 몇개든 상관은 없고, 그 중 p태그가 하나 일 때 */
		background-color: yellow;
	}
	
</style>
</head>
<body>
	<p>good!!!</p>
	<h3>안녕~~~</h3>
	<div>
		<p>Hello world</p>
	</div>
</body>
</html>