<p>CSS structure pseudo-classes such as: nth-child() apply styles through the position of elements in the same level, and support formulas and keywords to select specific child elements. :nth-child(n) Select the nth child element based on the count of all child elements of the parent element. Formulas such as 2n 1 or even/odd can achieve the effects of table zebra patterns; while :nth-of-type() only calculates matching type elements. Common pseudo-classes include: first-child, : last-child, : only-child, etc., which are suitable for list, layout adjustment and other scenarios. Note: :nth-child() does not distinguish between tag types, but :nth-of-type() only takes effect for elements of the specified type; avoid complex modes affecting performance, and note that blank nodes may interfere with counting.

<p>

<p> When you want to target specific elements in a group without adding extra classes or IDs, CSS structural pseudo-classes like :nth-child() comes in really handy. These selectors let you apply styles based on the position of an element among its siblings, which is super useful for things like zebra-striping tables, styling every other item in a list, or making layout adjustments without touching your HTML.

---

How :nth-child() Actually Works

<p> At first glance, :nth-child() might seem a bit confusing — especially with that odd-looking formula an b . But once you get the hang of it, it's pretty straightforward.

<p> Let's break it down:

<li> The basic idea is that :nth-child(n) selects the nth child of its parent. <li> You can use formulas like 2n 1 or keywords like odd and even .

<p> For example:

 li:nth-child(2n) {
  background-color: #f0f0f0;
}

<p> This would select every even-numbered <li> in a list and give it a light gray background — perfect for altering row colors in a table or list layout.

<p> One common mistake is thinking :nth-child() looks only at elements of the same type. It actually counts all children, regardless of tag type. So if you have a mix of <p> , <div> , and <span> inside a container, :nth-child() will count them all.

---

Other Useful Structural Pseudo-Classes

<p> While :nth-child() is powerful, there are several related pseudo-classes that are worth knowing:

<li> :first-child – targets the first child if it matches the element type.<li> :last-child – same logic, but for the last child.<li> :nth-of-type() – similar to :nth-child() , but only considers elements of the matching type.<li> :only-child – apply if the element is the only one inside its parent.

<p> Here's a quick comparison:

<p> If you have this structure:

 <div>
  <p>First paragraph</p>
  <span>Just a span</span>
  <p>Second paragraph</p>
</div>

<p> Then:

 p:nth-child(1) { color: red; } /* Won&#39;t match anything because first child is a <p>, but it&#39;s not ap:nth-child(1) */
p:nth-of-type(1) { color: blue; } /* This matches the first <p> */
p:nth-of-type(2) { color: green; } /* Matches the second <p> */

<p> So when working with mixed content, :nth-of-type() is usually more reliable for targeting specific element types.

---

Practical Uses in Layouts and Lists

<p> These selectors are especially handy in real-world layouts where you want to tweak spacing or visual hierarchy without bloating your HTML with extra classes.

<p> Some examples:

<li><p> Remove margin from the last item in a grid or flexbox layout:

 .card:last-child {
  margin-right: 0;
}

<li><p> Style the first paragraph differently (like making it larger):

 p:first-of-type {
  font-size: 1.2em;
  font-weight: bold;
}

<li><p> Highlight the first and last columns in a table:

 td:first-child {
  border-left: 1px solid #ccc;
}

td:last-child {
  border-right: 1px solid #ccc;
}

<p> They're also great for responsive design tweaks — say you want to hide certain items on small screens based on their position, or adjust padding on mobile only for specific children.

---

A Few Gotchas to Keep in Mind

<p> Like any CSS feature, these selectors can trip you up if you're not careful.
<p> Here are a few things to watch out for:
<li> Whitespace matters — sometimes an invisible text node (like a line break) can throw off your count. <li> Performance isn't usually an issue , but avoid overusing complex :nth-child() patterns on large pages. <li> Test visually — browser dev tools sometimes make it hard to see what's being selected, so double-check how your styles are applied.
<p> Also, remember that these pseudo-classes don't change layout flow — they just apply styles. If you need to reorder elements visually, look into Flexbox or Grid instead.

---

<p> That's basically it. Once you get used to using structural pseudo-classes, they become second nature — and they save you from writing extra markup or JavaScript just to handle simple styling logic.

The above is the detailed content of Using CSS nth-child and other structural pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!