정의 및 사용 방법
:only-of-type
가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다.
특정 유형이란 태그 이름의 유형입니다.
기본 예제
<div>
<p>유일한 p 요소입니다.</p>
<span>이건 span입니다.</span>
</div>
<div>
<p>첫 번째 p 요소입니다.</p>
<p>두 번째 p 요소입니다.</p>
</div>
p:only-of-type {
background-color: yellowgreen;
}
유일한 p 요소입니다.
이건 span입니다.첫 번째 p 요소입니다.
두 번째 p 요소입니다.
구문
:only-of-type {
/* ... */
}
예제
:only-of-type
가상 클래스 선택자를 이해하는데 도움이 되는 예제입니다.
동일한 유형(태그 이름)의 형제 요소가 없을 경우 사용
<div>
<p>문단 요소입니다.</p>
</div>
<div>
<p>문단 요소입니다.</p>
<p>문단 요소입니다.</p>
</div>
p:only-of-type {
background-color: yellowgreen;
}
문단 요소입니다.
문단 요소입니다.
문단 요소입니다.
주의할 점
:only-of-type
가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다.
특정 유형이란 태그 이름의 유형입니다.
다시말하면, 유일한 태그 이름이 있어야 선택이 된다는 의미이지, 유일한 선택자가 있어야 한다는 의미가 아닙니다.
다음의 예제로 살펴보겠습니다.
<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'라는 클래스 속성의 값이 있어야 선택됩니다.
* => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->
.red-item:only-of-type
선택자로 매칭되는 요소가 없습니다.
문단 요소입니다.
매칭될 요소로 기대하지만 아님
문단 요소입니다.
특정 유형이 '태그 이름'이라는 것을 모른다면 :only-of-type
가상 클래스 선택자가 제대로 작동하지 않는 것처럼 보일 수 있으니 주의해야 합니다!
브라우저 호환성
선택자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
:only-of-type
|
1 | 12 | 3.5 | 3.1 |
명세서
명세서 사양 | |
---|---|
:only-of-type
|
Selectors Level 4 #only-of-type-pseudo |
같이 보기
- CSS :nth-of-type() 가상 클래스 사용 방법
- CSS :first-of-type 가상 클래스 사용 방법
- CSS :nth-last-of-type() 가상 클래스 사용 방법
- CSS :last-of-type 가상 클래스 사용 방법
- CSS :nth-child() 가상 클래스 사용 방법
- CSS :nth-last-child() 가상 클래스 사용 방법
- CSS :first-child 가상 클래스 사용 방법
- CSS :last-child 가상 클래스 사용 방법
- CSS :only-child 가상 클래스 – 외동 자식 요소 선택
- CSS :focus-within 가상 클래스 사용 방법
- CSS :is() 가상 클래스 선택자 – 선택자 목록 중 하나라도 존재하면 선택