바로 인접한 일련의 태그에서 n 번째에 대한 CSS 선택자

일종의 얼룩말 줄무늬를 구현하려고하지만 적절한 태그를 서로 바로 인접한 태그로 제한하려고합니다. 정말로바로 인접한 일련의 태그에서 n 번째에 대한 CSS 선택자

.match + .match:nth-child(2n){ ... }

작동하지 않는 일종의 그렇다고 CSS

<span class="match">a</span> 
<span class="match">b</span> 
<span class="match">c</span> 
<span class="nomatch">d</span> 
<span class="match">e</span>

예

들어

는 A, B에 걸쳐 상기 서로 바로 옆에 있기 때문에 C가 얼룩말 스트라이프되어야하지만 해서는 안됩니다. nth-child는 이런 식으로 사용할 수 있습니까?

출처

2011-04-14 Paul Alexander

당신은 의미합니까? '.nomatch'가 빨간색 인'[white, black, white, red, red, white, black]'과 같은 것입니까? – BoltClock

테스트 케이스를 확장 할 수 있습니까? 나는 생각한다. 나는 생각을 가지고있다.하지만 나는 정확히 무엇이 일어나야하는지 혼란스러워한다. – thirtydot

@BoltClock : "모든 마지막 .nomatch 이후"아닙니다 - 그것은 비 .match + .match 시퀀스 다음에 읽어야합니다. –

이것에 대해 어떻게 : 모든 마지막`.nomatch`,`바로 다음이 .match` 0에서 시작한다 후에

Live Demo

$(".match + .match").each(function() { 
    $(this).addClass("stripe").prev().addClass("stripe"); 
});

출처

2011-04-14 22:21:41 drudge

그 클래스는 즉각 형제가있는 모든 '.match' 클래스를 추가합니다 ... – BoltClock

올바른 트랙에있을 수 있지만 세트의 모든 일치 항목 만 강조 표시하지만 스트라이핑하지는 않습니다. –

@BoltClock : 아, 나는 그가 'a, b, c'의 의미를 잘못 읽었습니다. – drudge

:nth-child(even) 
:nth-child(odd)

아니면 더 복잡한 작업을 원하십니까?

출처

2011-04-14 22:15:59 wdm

물론 그는 그렇다. 질문을 다시 읽으십시오. – BoltClock

even 또는 odd는 일치하는 요소를 .match 클래스로 스트라이프합니다. 그가 무엇을하려고 시도 할 수 있는지도 모릅니다. – wdm

바로 인접한 일련의 태그에서 n 번째에 대한 CSS 선택자

답변

관련 문제