[css] CSS에서 모든 N 번째 요소를 선택
예를 들어 일련의 요소에서 모든 네 번째 요소를 선택할 수 있습니까?
예 : 16 개의 <div>
요소가 있습니다 … 같은 것을 쓸 수 있습니다.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
더 좋은 방법이 있습니까?
답변
이름에서 알 수 있듯이 상수와 함께 변수를 사용하여 산술 표현식을 구성 할 수 있습니다 . 넌 (또한 수행 할 수있다 ), 감산 ( )와 계수를 승산 ( 양수, 음수를 제로를 포함한 정수이다).:nth-child()
n
+
-
an
a
위의 선택기 목록을 다시 작성하는 방법은 다음과 같습니다.
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)
답변
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>