The Second Child Is Not Always the Second Resource Card

Lena maintains a small reading-resource page on Cloudflare Pages. She wants a border around the second resource card, so she writes .resource:nth-child(2). The border appears around the first card instead. Changing the color makes the same wrong card brighter; changing the number to three seems to fix it, until she adds an introductory paragraph.

The problem is not the hosting service or a delayed deployment. Her section contains a heading before the cards. The selector counts that heading too. Before choosing another number, Lena needs to decide what “second” means: the second child element, the second element of a particular tag, or the second sibling carrying the resource class. Those are three different questions.

Start with the siblings, not the visible cards

Lena reduces her page to this small example. The card contents are shortened so that the surrounding structure remains easy to inspect. In the real guide, each card would include its own meaningful title and description.


<section class="resources">
  <h2>Reading resources</h2>
  <article class="resource">Local history</article>
  <article class="resource">Garden records</article>
  <article class="resource">Walking maps</article>
</section>

There are four child elements inside the section. The heading occupies position one, Local history occupies position two, Garden records occupies position three, and Walking maps occupies position four. Indentation and line breaks do not create additional element positions for this count.

The rule .resources > .resource:nth-child(2) asks for a direct child that has the resource class and occupies the second element position. Local history satisfies both conditions. The class outside the parentheses does not first remove the heading from the counting sequence.

The > keeps the rule focused on direct children. It prevents a matching card nested deeper inside another component from being included by this selector. It does not change how those direct children are numbered. Open the browser's element inspector and identify their shared parent before editing the stylesheet; the rendered page alone can conceal these relationships.

Decide which group the number should describe

Replacing the selector with .resources > article:nth-of-type(2) matches Garden records in this example. It counts sibling article elements, so the heading does not occupy a place in that particular sequence. That can be appropriate when the intended group really is every article under the section.

It is not the same as counting a class. Suppose Lena inserts an editorial note as an article without the resource class, between Local history and Garden records. That note becomes the second article. A selector using .resource:nth-of-type(2) would not magically skip it; the second article lacks the required class, so that combined selector would match nothing here.

If her intention is specifically the second resource-class sibling, the filtered form expresses that intention:


.resources > :nth-child(2 of .resource) {
  outline: 2px solid #8b4938;
  outline-offset: 4px;
}

Here the counting group is the siblings matching .resource. In Lena's original example, that means Local history, Garden records, and Walking maps. Garden records is second. A heading, introductory paragraph, or unrelated article without that class does not enter the filtered sequence. Confirm support in the browsers your readers actually use before depending on the filtered syntax.

Separate a positional style from a named recommendation

Lena pauses before adopting the new rule. Why is the second card receiving a border? If the border merely creates a visual rhythm in the layout, a positional selector may accurately describe her design. If the border means “start with Garden records,” position is an unreliable substitute for that editorial decision.

Imagine that a volunteer sorts the resources alphabetically. Garden records moves to the first position. A rule selecting the second resource would now emphasize Local history. The CSS would still be working exactly as written, but the message Lena intended to communicate would have changed.

For a named recommendation, Lena can attach a separate class such as resource--recommended to the intended card and style that class directly. She also adds visible wording explaining the recommendation, rather than expecting every reader to infer a meaning from a border. The class records a decision; the selector does not make that decision for her.

This distinction is useful during review. Ask a colleague to complete one sentence: “This card is highlighted because…” If the answer names a resource, purpose, or review status, record that information explicitly. If the answer describes an alternating pattern or a position, count-based styling may be suitable. Do not choose a numeric rule simply because it happens to highlight the right item today.

Test one change to the surrounding content

Lena keeps a disposable copy of the example and inserts a short paragraph after the section heading. She does not change any resource titles. With the unfiltered second-child rule, the second child is now the paragraph, so no resource receives the outline. With the filtered rule, Garden records remains the second resource and stays outlined.

She next inserts the unrelated article described earlier. That case separates tag-based counting from class-based counting. Finally, she puts a new resource before Local history. The filtered rule now selects Local history, because it really has become the second resource. This last result is not a regression: it confirms that the selector follows position, not identity.

When gathering examples for a small index, Lena may use 주소타임 사이트모음 as a discovery starting point. She still checks each destination and writes her own descriptions. A directory listing does not establish that a resource is current, that it deserves a recommendation, or that its markup demonstrates the correct CSS behavior.

Her test notes name the expected card for each fixture instead of saying only “the border looks right.” This makes a later review less dependent on memory. A narrow mobile layout is another useful check: when cards stack vertically, the intended emphasis should remain understandable without relying on their earlier desktop arrangement.

Use a short selector review before deployment

Lena follows five steps before moving the corrected page into her normal publishing process.

  1. Write the intended outcome in words. Specify whether the rule should select a numbered resource, a numbered article element, or a particular named resource.
  2. Inspect the immediate children of the relevant container. Include headings, notes, and other elements in the unfiltered count; do not count only the boxes that look like cards.
  3. Choose a selector that expresses that outcome. Compare the existing rule against the smallest example before applying the change across the full page.
  4. Insert one unrelated sibling and one new resource in the disposable example. Record which card should match after each insertion, then compare that expectation with the browser result.
  5. Review the final page at wide and narrow widths. Check that descriptions remain readable, the emphasis still has the intended meaning, and the stylesheet being tested is the one included in the deployment files.

She keeps the test copy separate from the public article. There is no need to publish every experimental variant or leave confusing temporary outlines on the live guide. After an authorized deployment, she checks the actual public page again. A successful local example supports the selector decision, but it does not prove that the correct assets reached the public address.

Questions that help catch a counting mistake

Does nth-child start counting at zero?

No. The first child element is position one. In Lena's section, the heading is first and Local history is second. Starting at zero is a tempting habit for someone learning JavaScript arrays alongside CSS, but it gives the wrong expectation here. Name the first few elements aloud if the count feels uncertain.

Will nth-of-type count only elements with my class?

No. Its sequence is based on the element type, not the class. Adding a class condition outside that pseudo-class restricts which elements can match; it does not turn the type sequence into a class sequence. Use the filtered child form when that is your intention, or give the intended card an explicit class when identity matters more than position.

Can I fix the example by changing two to three?

That would select Garden records in the original markup, but it would encode the heading as an accidental offset. An inserted paragraph could break the assumption again. Choose three only when “third child element” is genuinely the rule you want. The durable fix is to define the counting group before choosing the number.