CSS :first-child and :last-child Pseudo-Classes: Complete Guide with Examples

selector:first-child {
    /* CSS properties */
}

• Home
• About
• Services
• Contact

selector:last-child {
    /* CSS properties */
}

• Home
• Products
• Services
• About
• Contact

CSS Code for Interactive Menu:

.interactive-nav li:first-child {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.interactive-nav li:last-child {
    border-right: none;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Remove top margin from first paragraph */
.content p:first-child {
    margin-top: 0;
}

/* Remove bottom margin from last paragraph */
.content p:last-child {
    margin-bottom: 0;
}

/* Remove border from last table row */
.table tr:last-child {
    border-bottom: none;
}

/* Highlight first article in a list */
.article-list article:first-child {
    font-size: 1.2em;
    background: #f8f9fa;
    border: 2px solid #007acc;
}

/* Add special icon to last item */
.checklist li:last-child::after {
    content: " ✓";
    color: green;
    font-weight: bold;
}

/* Style first form field differently */
.form-group:first-child input {
    border-top: 3px solid #007acc;
}

/* Add margin to all form groups except the last */
.form-group:not(:last-child) {
    margin-bottom: 20px;
}

:first-child Support

• Internet Explorer: 7+
• Firefox: 1.0+
• Chrome: 1.0+
• Safari: 1.0+
• Opera: 9.5+

:last-child Support

• Internet Explorer: 9+
• Firefox: 1.0+
• Chrome: 1.0+
• Safari: 3.1+
• Opera: 9.5+

/* Target first child of specific elements */
div.container > p:first-child {
    font-size: 1.5em;
}

/* Combine with attribute selectors */
input[type="text"]:first-child {
    border-radius: 8px 0 0 8px;
}

/* Use with pseudo-elements */
.breadcrumb li:first-child::before {
    content: "🏠 ";
}

.breadcrumb li:last-child::after {
    content: " 📍";
}

/* Hide first item on mobile */
@media (max-width: 768px) {
    .nav-list li:first-child {
        display: none;
    }
}

/* Stack last child on small screens */
@media (max-width: 480px) {
    .flex-container .item:last-child {
        order: -1;
        width: 100%;
    }
}

Best Practices for Performance:

• Specificity: Use specific selectors to avoid unnecessary DOM traversal
• Caching: Browsers cache pseudo-class calculations, so repeated use is efficient
• DOM Changes: Be aware that dynamic content changes may trigger recalculations
• Nesting: Avoid deep nesting with pseudo-classes for better performance

Problematic Code:

<div>
    Some text here
    <p>This might not be :first-child</p>
</div>

Better Approach:

<div><p>This is :first-child</p></div>

/* More robust selector for dynamic content */
.container > *:first-child {
    /* Styles apply to any first child element */
}

/* Use :first-of-type for specific element types */
.container p:first-of-type {
    /* Only targets first paragraph, ignoring other elements */
}

Key Takeaways:

• Use :first-child and :last-child to target positional elements without extra HTML classes
• Common applications include removing margins, creating visual hierarchies, and styling forms
• Both pseudo-classes have excellent browser support
• Be mindful of whitespace and dynamic content when implementing these selectors
• Combine with other CSS features for advanced styling techniques