[selector] CSS - :only-of-type 가상선택자 - 타입유일 자식요소 (= 유일타입 자식요소) [유일선택자|타입선택자, IE9]

1. :only-of-type 예제 - 유일 타입 자식요소
2. :only-of-type 정의
3. :only-of-type 예제 - 유일 타입 자식요소 경우, 순번 제외

:only-of-type 예제 - 유일 타입 자식요소 

 

<style> 

p:only-of-type {background: yellow;}

</style>

<div>

  <p>홈짱닷컴</p>  

</div>

<div>

  <p>Homzzang.com</p>

  <p>Since 2012</p>  

</div>

<div>

  <p>홈페이지 제작관리</p>

  <span>코딩교육 서버관리</span> 

</div>

 

결과보기

:only-of-type 정의

 

그 부모의 자식요소 중, 지정타입요소가 유일한 경우 선택.
즉, 독자이거나 형제요소 있더라도 타입이 유일할 때 적용.

 

---

 

1.

형제요소 중 동일 타입 존재 시엔 적용 안 됨.

2.

IE9 이상 주요 최신 브라우저 지원.

 

:only-of-type 예제 - 유일 타입 자식요소 경우, 순번 제외

https://homzzang.com/b/css-345 (CSS counter() 함수 이용 예제)