CSS

[selector] CSS - :only-child 가상선택자 - 그 부모의 유일자식요소 (유일선택자, IE9)

:only-child 예제

 

<style>

p:only-child {background: yellow;}

</style>


<div><p>홈짱닷컴</p></div>


<div>

  <span>Homzzang.com</span>

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

</div>


<div>

  <p>코딩교육 + 서버관리 <span>Since 2012</span></p>

</div>

 

결과보기

 

 

:only-child 정의

 

지정요소가 그 부모의 유일한 자식요소인 경우 선택.

 


 

1.

형제가 있는 경우엔 적용 X
단, 그 유일자식요소가 자손요소 갖는 건 상관 없음.

2.

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




분류 제목
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
pagination CSS - 페이징 - 둥근테두리 효과 (Rounded bordered pagination)
pagination CSS - 페이징 - 링크칸 간격 띄우기 (Space Between Links)
pagination CSS - 페이징 - 글자 크기 (Pagination Size)
pagination CSS - 페이징 - 가운데 정렬 (Centered Pagination)
pagination CSS - 페이징 - (이전페이지/다음페이지/지정페이지) 이동 링크 버튼
pagination CSS - 페이징 - 빵메뉴 (= Breadcrumbs : 브레드크럼즈 = 메뉴 현재위치 표시)
column CSS - Multiple Columns - (멀티 컬럼 개괄) ※ 열 나누기 = 단락 나누기
column CSS - column-count 속성 - 컬럼 개수 지정 (= 요소 안 텍스트를 지정 컬럼개수로 구분 = …
column CSS - column-fill 속성 - 컬럼 채우기 방식 지정 (= column-fill속성 = 컬럼필속성…
13/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인