How Can I Efficiently Select Every Nth Element in CSS?-CSS Tutorial-php.cn

How Can I Efficiently Select Every Nth Element in CSS?

Patricia Arquette

Release： 2024-12-24 20:28:11

Original

647 people have browsed it

How Can I Efficiently Select Every Nth Element in CSS?

Select Every Nth Element in CSS

Question:

Is there an efficient way to select every nth element in a set of elements, without listing each element individually?

Answer:

Yes, using the :nth-child() pseudo-class with arithmetic expressions, you can select elements based on their position in the child list.

The syntax of :nth-child() allows for various arithmetic operations, including:

Addition ( )
Subtraction (-)
Coefficient multiplication (an)

To select every fourth element, for example, use the following selector:

:nth-child(4n)

Copy after login

This expression starts the count at 0, so it will select:

4 (0th child)
8 (1st child)
12 (2nd child)
16 (3rd child)

Note: If you have elements of different types (e.g., div, h1, p) within the parent element, you should use :nth-of-type() instead of :nth-child() to ensure you only count elements of the specified type.

Example:

Assuming the following HTML:

<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>

Copy after login

To select every fourth div element, use:

div:nth-of-type(4n)

Copy after login

This will select:

div 1
div 5
div 9
div 13

Special Case:

Using 4n is equivalent to 4n 4 in terms of :nth-child(). This is because the count starts at 0. Therefore, the following selectors will select the same elements:

:nth-child(4n)
:nth-child(4n 4)

However, this may not always be the case for other nth operators and values.

The above is the detailed content of How Can I Efficiently Select Every Nth Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!