클래스가있는 하위 클래스의 첫 번째 인스턴스에 대한 CSS 선택기?

클래스가있는 하위 클래스의 첫 번째 인스턴스에 대한 CSS 선택기가 있습니까? 예를 들어, 다음 코드를 사용하십시오 :클래스가있는 하위 클래스의 첫 번째 인스턴스에 대한 CSS 선택기?

<div id="container"> 
    <div class="nothing"> 
    </div> 
    <div class="child"> <!-- SELECT THIS ONE --> 
    </div> 
    <div class="child"> <!-- NOT THIS ONE --> 
    </div> 
    <div class="child"> <!-- NOT THIS ONE --> 
    </div> 
</div>

"child"클래스가있는 div의 첫 번째 스타일을 지정하는 CSS 선택 도구가 있습니까?

출처

2013-08-21 Andrew

CSS 선택기가 없지만 jQuery 선택기가 있습니다. – BoltClock

무엇을 시도 했습니까? jQuery가 이해하는 모든 선택기를 나열하는 http://api.jquery.com/category/selectors/를 보셨습니까? 개인적으로, 나는'$ ('. child'). first()'를 사용할 것이다. –

아니요, CSS를 사용하는 셀렉터가 없습니다. 가장 가까운 것은': first-of-type' 셀렉터이지만, 태그 이름에 의해서만 일치하고, – tomaroo

-1

": nth-child"CSS 선택기를 사용할 수 있습니다.

DEMO : http://jsfiddle.net/2pyvz/

CSS :

.child:nth-child(2) { color:red; }

출처

2013-08-21 16:23:50 Hirshy

을 사용해 보셨습니까? – Huangism

작동하지 않습니다 : http://jsfiddle.net/fkling/Pex2R. 이유 :': first-child'는 부모 요소의 첫 번째 자식 인 경우에만 * 요소를 선택합니다. OP의 예에서, div.nothing은 첫 번째 자식입니다. –

그래, 나를 위해 작동하지 않습니다 – Andrew

당신은 .child의 스타일과 general sibling combinator, ~ 사용하여 다음 .child 형제 자매의 스타일 되돌릴 수 :

.child { 
 
    color: #ff0000; 
 
} 
 
.child ~ .child { 
 
    color: inherit; 
 
}

<div id="container"> 
 
    <div class="nothing">nothing 
 
    </div> 
 
    <div class="child">SELECT THIS ONE 
 
    </div> 
 
    <div class="child">NOT THIS ONE 
 
    </div> 
 
    <div class="child">NOT THIS ONE 
 
    </div> 
 
</div>

를

출처

2013-08-21 16:30:12 canon

또는 상속을 위해 색상을 재설정하는 것이 더 좋으며 기본값으로 돌아갑니다! – sidonaldson

클래스가있는 하위 클래스의 첫 번째 인스턴스에 대한 CSS 선택기?

답변

관련 문제