2015-02-02 5 views
2

이없는 경우에만 전용 아이, 더 추가 콘텐츠이없는 경우에만 자식 요소를 선택 CSS 선택기 (NO 자바 스크립트)를 사용하고 계십니까?: 방법이 있나요 추가적인 내용

나는 다음과 달성하고자 : 세 번째 줄에

<style>p b:only-child { color: red }</style> 
<p><b>this should be red</b></p> 
<p><b>this</b> should be not</p> 
<p><b>this</b> <i>neither</i></p> 

:only-child 선택 일 수 있지만 두 번째합니다. 이 내용은 jsfiddle을 참조하십시오. 당신이 structural pseudo-classes의 섹션에서 스펙을 보면

+0

은 유용 할 수 있지만 지루해 보일 수 있습니다. http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ –

+0

기본적으로 아니요. CSS 스타일에는 무엇이 있는지 스타일이 지정됩니다. –

+0

@MarcB 그 기사를 읽었습니다. ': only-child'는 실제로': first-child : last-child' (또는 Lea가 쓴 것처럼 n 번째 자식 (1) : n 번째 - 마지막 자식 (1))의 줄임말입니다. 그게 작동하지 않습니다 :(. 나는 @ Paulul_D가 맞지 않기를 바란다 ... –

답변

3

는 말한다 :

선택기는 문서 트리에 달려 있지만, 추가 정보를 기반으로 선택을 허용하는 구조 의사 클래스의 개념을 도입 다른 단순 선택자 또는 결합 자로 표현할 수 없습니다.

독립 실행 형 텍스트 및 기타 비 요소 노드는 상위 노드의 하위 목록에서 요소 위치를 계산할 때 계산되지 않습니다. 부모의 자식리스트의 요소의 위치를 ​​계산할 때, 인덱스 번호는 1

비 일치에 대한 (계정에 텍스트 노드의 존재를 필요 유일한 선택에서 시작 이상하게도)은 :empty입니다. :only-child을 포함한 다른 모든 구조용 의사 클래스는이를 고려하지 않습니다.

관련 문제