CSS 가상 선택자 :only-child는 혼자 있는 요소에 적용할 스타일을 지정할 때 사용합니다.
<ul class="tabs">
<li class="tab">혼자만 있는 탭</li>
</ul>위와 같은 상황에서 사용하면 좋습니다. 탭은 여러 개 있을 때 의미가 있는 것은데, DB에 콘텐츠가 없어서 탭이 하나만 노출되는 경우가 발생할 수 있죠.
예컨대, 제품 스펙, 다운로드, 보도자료 같은 탭이 있다고 가정해 봅시다. 그런데 어떤 제품은 다운로드나 보도자료가 없습니다. 그러면 제품 스펙이라는 탭 하나만 남는데, 그러면 모양이 별로죠. 그럴 때는 그냥 탭을 없애는 게 낫습니다.
PHP 같은 서버단 언어로 처리하는 게 깔끔할 텐데요. 뜻대로 안 될 때가 있죠. 그럴 때 아래와 같은 코드를 사용하면 유용합니다.
.tab:only-child {
display: none;
}아래는 예제입니다.
댓글 남기기