고급 nth-child 선택

Question

세 번째로 나눗셈의 "나머지"를 선택할 n 번째 자식 선택 규칙을 알아 내려고 시도하고 있습니다. 여기에 시각적 다이어그램이 설명되어 있습니다.

편집 : 명확성을 위해 더 많은 예제를 제공합니다.

 
div1 
(should select div1) 

div1  div2 
(should select div1 and div2) 

div1  div2  div3 
(should select nothing) 

div1  div2  div3 div4 
(should select div4) 

div1  div2  div3 div4 div5 
(should select div4 and div5) 

div1  div2  div3  div4  div5  div6 
(should not select anything) 

div1  div2  div3  div4  div5  div6  div7 
(should select div7) 

등 ...

나는이 가능할 수도 있다고 생각하지만, 그것을 알아낼 수 없습니다입니다.

Answer 1

:nth-child():nth-last-child()하고 general sibling selector (~) 요소가 followi에 맞게 결합 될 수있다 7 개 된 div의 3 예와 함께 3

div:nth-child(3n):nth-last-child(-n+3) ~ div { 
    /* ... */ 
} 

http://jsfiddle.net/akzzM/

의 마지막 그룹을 NG :

• nth-child(3n) 경기마다 3 <div>-3 및 6 일치합니다.
• nth-last-child(-n+3)과 일치하는 마지막 세 형제는 5, 6 및 7과 일치합니다.
• 결합하면 마지막 일치 간격이 3 - 일치 6입니다.

그런 다음 ~ div은 (7) 다음 형제와 일치합니다.

div:nth-child(3n):nth-last-child(-n+3) ~ div, 
div:first-child:nth-last-child(-n+2), 
div:last-child:nth-child(-n+2) { 
    /* ... */ 
} 

: 제 3 없을 때

---

는 지난 2 중 하나 :last-child의 경우는 처음 2 중 하나 있다면 당신은 또한 :first-child을 일치시킬 수 있습니다, 1, 2를 일치 시키려면

http://jsfiddle.net/JEST3/

Answer 2

지금까지 내가 할 수있는 단일 선택기가 없다는 것을 알 수 있습니다.

그러나 nth-last-child과 초과 게재자인 nth-child의 조합이 도움이 될 것입니다.

CSS

li:nth-last-child(-n+2) {color:red;} 

li:nth-child(3n) {color:black;} 

li:nth-child(1), 
li:nth-child(2), 
li:nth-child(3) {color:black;} 

Jsfiddle Demo

Answer 3

이이 문제에 대한 해결책이 될 수 있습니다

div:not(:nth-child(3n)):not(:nth-child(1)):not(:nth-child(2)) { 
    background-color: #38f; 
} 

Answer 4

저는 CSS의 두 가지 그룹화를 작성해야 함에도 불구하고 그것을 만족스럽게 해결했다고 생각합니다. 트릭은 동일한 선에서 여러 선택기를 사용할 수 있다는 것입니다. 이는 설정 된 선택 사항 사이에서 공용체를 만드는 것과 같습니다.

세 아래 인 외에 http://jsfiddle.net/MY4cD/

더 완벽한 솔루션에 예를 들어 작업 (및 기타 배수까지 확장.

다음 HTML을 감안할 때 (그리고 임의의 수)

<div class="container"> 
    <div class="cell">1</div> 
    <div class="cell">2</div> 
    <div class="cell">3</div> 
    <div class="cell">4</div> 
    <div class="cell">5</div> 
    <div class="cell">6</div> 
    <div class="cell">7</div> 
    <div class="cell">8</div> 
</div> 

에 대한

다음 CSS는 "나머지"div가 빨간색으로 강조 표시된 세 행을 만듭니다.

.cell { 
     width: 33.33%; 
    } 

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(1){ 
     background:red; 
    } 

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(2){ 
     background:red; 
    } 

    .cell:nth-last-child(-n+2):nth-child(3n+2):nth-last-child(1){ 
     background:red; 
    } 

다시 다음과 같은 CSS 이런 식으로

.cell { 
     width: 25%; 
    } 

    /* accounts for when there is 1 remainder */ 
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(1){ 
     background:red; 
    } 

    /* accounts for the first of 2 remainders */   
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(2){ 
     background:red; 
    } 

    /* accounts for the second of 2 remainders */ 
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(1){ 
     background:red; 
    } 

    /* accounts for the first of 3 remaidners */ 
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(3){ 
     background:red; 
    } 

    /* accounts for the second of 3 remainders */ 
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(2){ 
     background:red; 
    } 

    /* accounts for the third of 3 remainders */ 
    .cell:nth-last-child(-n+3):nth-child(4n+3):nth-last-child(1){ 
     background:red; 
    } 

를 사용할 수 있습니다 행 당 4 명 개의 div가 있고 나머지를 선택하고자한다면, 당신은 패턴이 점점 더 복잡 성장할 것입니다 볼 수 있습니다 더 높이 올라간다. 그러나 확실히 어떤 숫자라도 가능하다.

이 패턴을 미디어 쿼리와 함께 사용하여 새로운 CSS 플렉스 플로 : 행 줄 바꿈의 효과를 시뮬레이션했습니다. 크로스 브라우저 호환성을 위해 float를 사용하는 명령. 여기에서 전체 데모를 볼 수 있습니다 : http://codepen.io/msorrentino/full/chHnu/