[CSS] :only-child 가상클래스 자식이 하나밖에 없을때 적용

:only-child 가상 클래스 

 

어떤 요소에 자식이 하나밖에 없을때 적용됨

 

예시)

html태그는 이렇게 해놓고

<div>
	<span>자식1</span>
</div>
<div>
	<span>자식2</span>
	<span>자식2</span>
</div>

css는 이렇게 수정

div>span {
	display: inline-block;
	width: 100px;
	height: 100px;
}
span:only-child {
	background-color: lime;
}

 

하면 자식1인 span만 배경색이 지정된다.