요소가 하나만 있을 때 그 요소에 적용하는 CSS 가상 선택자 :only-child, 언제 사용하면 좋은가?

toddler looking at believe in yourself graffiti
혼자만 있을 때 뿅 하고 사라지기 ©Katrina Wright

CSS 가상 선택자 :only-child는 혼자 있는 요소에 적용할 스타일을 지정할 때 사용합니다.

<ul class="tabs">
    <li class="tab">혼자만 있는 탭</li>
</ul>

위와 같은 상황에서 사용하면 좋습니다. 탭은 여러 개 있을 때 의미가 있는 것은데, DB에 콘텐츠가 없어서 탭이 하나만 노출되는 경우가 발생할 수 있죠.

예컨대, 제품 스펙, 다운로드, 보도자료 같은 탭이 있다고 가정해 봅시다. 그런데 어떤 제품은 다운로드나 보도자료가 없습니다. 그러면 제품 스펙이라는 탭 하나만 남는데, 그러면 모양이 별로죠. 그럴 때는 그냥 탭을 없애는 게 낫습니다.

PHP 같은 서버단 언어로 처리하는 게 깔끔할 텐데요. 뜻대로 안 될 때가 있죠. 그럴 때 아래와 같은 코드를 사용하면 유용합니다.

.tab:only-child {
    display: none;
}

아래는 예제입니다.

카테고리 글 목록 👉

대표글

댓글 남기기