CSS3 선택을 찾기 위해 2div 의 같은 클래스

StackOverflow https://stackoverflow.com/questions/306062

  •  08-07-2019
  •  | 
  •  

문제

요 CSS 선택을 찾을 수 있는 2div2 개의 동일한 클래스입니다.나는 보았 nth-child() 하지만 그것이 내가 원하는 것 이후 나는 볼 수 없는 방법이 더 무엇을 명확히 클래스 I 니다.이러한 2div 될 것입니다 형제 자매는 문서에는 경우에는 도움이 됩니다.

내 HTML 다음과 같이 나타납니다.

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

고 싶 2div.바(또는 마지막 div.바 것이 작동하도).

도움이 되었습니까?

해결책

업데이트:이 답변은 원래 2008 년에 작성되었습니다 nth-of-type 지원은 기껏해야 신뢰할 수 없었습니다. 오늘은 당신이 같은 것을 안전하게 사용할 수 있다고 말합니다 .bar:nth-of-type(2), IE8 이상을 지원하지 않는 한.

2008 년의 원래 답변은 다음과 같습니다 (더 이상 이것을 추천하지 않을 것입니다!):

사용할 수있는 경우 프로토 타입 JS 이 코드를 사용하여 스타일 값을 설정하거나 다른 클래스 이름을 추가 할 수 있습니다.

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(이 코드를 테스트하지 않았으며 실제로 두 번째 DIV가 있는지 확인하지는 않지만 이와 같은 것이 작동합니다.)

그러나 HTML 서버 사이드를 생성하는 경우 두 번째 항목에 추가 클래스를 추가 할 수도 있습니다 ...

다른 팁

선택기를 결합 할 수 있습니다.

.bar:nth-child(2)

"수업이있는 것 술집"그것은 또한 두 번째 아이입니다.

나의 원본에 대한 답 :nth-of-type 은 완전히 잘못된 것입니다.감사에 대한 바울을 가리키는 이니다.

단어"유형"거기에는"요소형"(아 div).그것은 선택 div.bar:nth-of-type(2) 고 div:nth-of-type(2).bar 같은 일을 의미한다.모두 요소를 선택하는[a]는 두 번째 div 그들의 부모로,그리고[b]있는 클래스 bar.

그래서 순수한 CSS 솔루션 왼쪽에 나가 알고 있는 경우,당신을 선택하려면 모든 요소의 선택을 제외하고 첫 번째,일반적인 형제를 선택:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

내 원(틀)응답을 다음과 같:

의 도착과 함께 CSS3,다른 옵션이 있습니다.도 사용할 수 없었을 때는 질문에 첫 번째 질문:

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of-type.asp

이 선택하는 두 번째 요소는 충족 .bar 선택합니다.

하려는 경우 두 번째와 마지막 의 특정 요소의 종류(또는 그들 모두는 제외한 첫 번째),일반 형제 선택은 또한 잘 작동:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

그것은 짧습니다.하지만 물론,우리가 좋아하지 않을 중복되는 코드,오른쪽?:-)

HTML의 구조는 정확히 무엇입니까?

HTML이 다음과 같이 이전 CSS가 작동합니다.

CSS

.foo:nth-child(2)

HTML

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

그러나 다음 HTML이 있으면 작동하지 않습니다.

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

간단한 풋, 이전 선택기의 나머지 부분에서 일치하는 인덱스를 얻을 수있는 선택기가 없습니다.

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

데모 https://jsfiddle.net/suryar/6ka13xve/

그리고 jQuery 호환 답변을 찾고있는 사람들을 위해 :

$('.foo:eq(1)').css('color', 'red');

HTML :

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...

JavaScript를 통해이 작업을 수행 할 수없는 이유가 있습니까? 저의 조언은 보편적 인 규칙을 가진 셀렉터를 대상으로하는 것입니다..foo) 그리고 뒤로 뒤로 물러서서 JavaScript로 마지막 foo를 얻고 필요한 추가 스타일을 설정하십시오.

또는 Stein이 제안한대로 가능하면 두 가지 수업을 추가하십시오.

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

.parent_class div:first-child + div

방금 위의 것을 사용하여 두 번째를 찾았습니다 div 1 일 자식을 연쇄시켜 + 선택자.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top