첫 번째 선택을 제외한 모든 CSS3 선택자 질문


92

다음 마크 업을 사용하여 CSS 선택기가 각 옵션 div 내에서 첫 번째 선택 메뉴를 제외하고 모두 선택하기를 원합니다.

<div class="options">
    <div class="opt1">
        <select title="Please choose Warranty">
            <option value="">Select Waranty</option>
            <option value="1">1 year guarantee</option>
            <option value="2">3 year guarantee</option>
        </select>
    </div>
    <div class="opt2">
        <select title="Please choose Color">
            <option value="">Select Color</option>
            <option value="1">Red</option>
            <option value="2">Blue</option>
        </select>
    </div>
    <div class="opt3">
        <select title="Please choose Size">
            <option value="">Select Size</option>
            <option value="1">Small</option>
            <option value="2">Big</option>
        </select>
    </div>
</div>

나는 거의 완전한 css3 선택기를 지원하는 Prototype 내에서 이것을 사용하고 있으므로 브라우저 지원에 관심이 없습니다.

초기 선택자는 다음과 같습니다.

div.options div select

나는에 대한 몇 가지 변화를 시도했다 nth-child:not(:first-child)하지만 작업 할 수없는 것.

답변:



49

every 가 부모의 첫 번째 (유일한) 자식 이기 때문에를 사용할 때 divs 대신 s 옵션을 선택해야합니다 .select:not(:first-child)selectdiv

div.options > div:not(:first-child) > select

대안 :not(:first-child)은 다음 :nth-child()과 같이 시작 오프셋 2와 함께 사용 하는 것입니다.

div.options > div:nth-child(n + 2) > select

또 다른 대안은 일반적인 형제 결합 자 ~(IE7 +에서 지원)를 사용하는 것입니다.

div.options > div ~ div > select

추가 정보에 감사 드리며 다른 답변도 정확하고 먼저 통과했습니다.
robjmills

1
이전 IE에 대해 우려되는 경우를 대비하여 세 번째 솔루션을 추가했습니다.
BoltClock

0

.options > div:nth-child(n+2) select

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.