CSS :only-of-type 가상 클래스 사용 방법

`:only-of-type` 가상 클래스

:only-of-type 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다.

:only-of-type 가상 클래스 선택자는 :first-of-type:last-of-type과 동일합니다.

HTML

<article>
    <div>이 'div'는 첫 번째입니다.</div>
    <div>이 <span>중첩된 'span'은 첫 번째이자 마지막입니다.</span>!</div>
    <div>
        이 <em>중첩된 'em'은 첫 번째입니다.</em>, 하지만 <em>중첩된 이 'em'은 마지막입니다.</em>!
    </div>
    <div>이 <span>중첩된 'span'은 첫 번째이자 마지막입니다.</span>!</div>
    <p>이 'p'는 첫 번째이자 마지막입니다.</p>
    <div>이 'div'는 마지막입니다.</div>
</article>

:only-of-type 가상 클래스의 형식은 다음과 같습니다.

구문

예제

:only-of-type 가상 클래스 선택자를 이해하는데 도움이 되는 예제입니다.

동일한 유형(태그 이름)의 형제 요소가 없을 경우 사용

저작권 정보 영역 스타일링

HTML

<article>
    <h2>웹 개발자가 되려면</h2>
    <ol>
        <li>HTML을 공부한다.</li>
        <li>CSS를 공부한다.</li>
        <li>PHP를 공부한다.</li>
        <li>HTML을 공부해야 한다고 말했나요? 😴</li>
    </ol>
    <footer>
        <p>© 2023 codingEverybody</p>
    </footer>
</article>

주의할 점

:only-of-type 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다.

특정 유형이란 태그 이름의 유형입니다.

다음의 예제로 살펴보겠습니다.

HTML

<style>
    .red-item:only-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<div>
    <p>문단 요소입니다.</p>
    <p class="red-item">매칭될 요소로 기대하지만 아님</p>
    <p>문단 요소입니다.</p>
</div>
<!--
    * 혹시 .red-item 유형 중에서  유일한(only, 단독) 요소를 선택했나요?
    * 그렇다면 잘못된 선택입니다.
    *
    * only-of-type은 태그 유형의 형제 요소들 중에서 유일한 요소를 선택합니다.
    *
    * .red-item:only-of-type는 두 부분으로 나뉩니다.
    * => .red-item: 클래스 속성의 값이 'red-item'인 요소의 태그 이름은 <p>입니다.
    * => 특정 유형은 태그 이름 유형을 의미합니다.
    * => <p> 요소가 특정 유형이 됩니다.
    * => 태그 유형이 <p>의 유일한 요소가 'red-item'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->