예를 들어 일련의 요소에서 모든 네 번째 요소를 선택할 수 있습니까?
예 : 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)답변
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)
답변
