[css] CSS에서 모든 N 번째 요소를 선택

Program / 글쓴이

예를 들어 일련의 요소에서 모든 네 번째 요소를 선택할 수 있습니까?

예 : 16 개의 <div>요소가 있습니다 … 같은 것을 쓸 수 있습니다.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

더 좋은 방법이 있습니까?

답변

이름에서 알 수 있듯이 상수와 함께 변수를 사용하여 산술 표현식을 구성 할 수 있습니다 . 넌 (또한 수행 할 수있다 ), 감산 ( )와 계수를 승산 ( 양수, 음수를 제로를 포함한 정수이다).:nth-child()n+-ana

위의 선택기 목록을 다시 작성하는 방법은 다음과 같습니다.

div:nth-child(4n)

이러한 산술 표현식의 작동 방식에 대한 설명은 이 질문에 대한 나의 대답 과 스펙을 참조하십시오 .

이 답변은 동일한 부모 요소 내의 모든 자식 요소가 같은 요소 유형 인 것으로 가정합니다 div. 당신과 같은 다른 유형의 다른 요소가있는 경우 h1또는 p, 당신은 사용해야합니다 :nth-of-type()대신 :nth-child()당신은 단지 계산하기 위해 div요소를 :

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

임의의 선택기와 일치하는 n 번째 자식을 찾고있는 다른 모든 클래스 (속성, 속성 또는 이들의 조합)의 경우 순수한 CSS 선택기로이 작업을 수행 할 수 없습니다. 이 질문에 대한 나의 대답을보십시오 .

그런데 4n과 4n + 4 사이의 차이는별로 없습니다 :nth-child(). n변수 를 사용하면 0부터 계산을 시작합니다. 각 선택기가 일치하는 것입니다.

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

보시다시피, 두 선택기는 위와 동일한 요소와 일치합니다. 이 경우 차이가 없습니다.

답변

div:nth-child(4n+4)

참조 : http://css-tricks.com/how-nth-child-works/

답변

이 시도

div:nth-child(4n+4)

답변

nth-child의사 클래스에 대한 올바른 인수가 필요합니다 .

  • 인수의 형태에 있어야 an + b모든 일치하는 일 B에서 시작하는 아이입니다.

  • 모두 a와 b선택 정수 모두가 제로 또는 마이너스가 될 수 있습니다.

    • 경우 a제로 다음 더 없다 “모든 번째 아이” 절.
    • 경우 a부정적인 다음 매칭이 완료되고 이전 버전은에서 시작 b.
    • 경우 b, 제로 또는 네거티브이다 포지티브하여 등가 식 작성 가능 b예 것은 4n+0동일이다 4n+4. 마찬가지로 4n-1동일하다 4n+3.

예 :

4 번째 어린이마다 선택 (4, 8, 12, …)

li:nth-child(4n) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

스 니펫 확장

1 (1, 5, 9, …)부터 시작하여 4 번째 아이마다 선택

코드 스 니펫 표시

4 개 그룹 (3 및 4, 7 및 8, 11 및 12, …)에서 세 번째 및 네 번째 자식을 모두 선택하십시오.

코드 스 니펫 표시

처음 4 개 항목 선택 (4, 3, 2, 1)

코드 스 니펫 표시

답변