CSS first-child Selector: Selecting the First Child in CSS

The CSS first-child selector applies styles to the first child element of a parent element.

How to Use the CSS first-child Selector

The CSS first-child selector, written as :first-child, targets the first child of a parent element.

                  

                    css
                    
                      
                    
                  
                  

                    element:first-child {
  /* Styles */
}

                  
                

• element: The element to target as the first child element of a parent element.
• :first-child: The selector to target the first child element of the parent element.

Basic Usage

                  

                    css
                    
                      
                    
                  
                  

                    p:first-child {
  font-weight: bold;
}

                  
                

When to Use the CSS Selector first-child

The first-child selector is useful to style elements based on their position within a parent.

Styling Lists

You can use first-child to highlight the first item in lists, improving usability and visual hierarchy.

                  

                    css
                    
                      
                    
                  
                  

                    li:first-child {
  color: blue;
  font-style: italic;
}

                  
                

Form Inputs

When working with forms, you might want to style the first input field differently to draw attention or follow design requirements.

                  

                    css
                    
                      
                    
                  
                  

                    input:first-child {
  border-color: green;
}

                  
                

Highlighting the First Paragraph

Use first-child to give special formatting to the first paragraph in a section or article, enhancing readability.

                  

                    css
                    
                      
                    
                  
                  

                    article p:first-child {
  font-size: 1.2em;
  margin-top: 20px;
}

                  
                

Examples of Using First Child in CSS

Navigation Menus

Websites often use first-child to style the first navigation link differently, making it stand out.

                  

                    css
                    
                      
                    
                  
                  

                    nav a:first-child {
  background-color: yellow;
}

                  
                

Product Listings

In e-commerce, first-child can emphasize the first product in a listing, indicating a featured item.

                  

                    css
                    
                      
                    
                  
                  

                    .products li:first-child {
  border: 2px solid red;
}

                  
                

Article Elements

Blogs or news sites often apply first-child to the first element of articles to varying sections, improving navigation.

                  

                    css
                    
                      
                    
                  
                  

                    article h2:first-child {
  border-bottom: 3px solid black;
}

                  
                

Learn More About CSS Child Selectors

Combining Selectors

You can also combine the first-child selector with other classes or IDs for more specific styling.

                  

                    css
                    
                      
                    
                  
                  

                    ul.special-list li:first-child {
  font-size: 1.5em;
  color: purple;
}

                  
                

CSS Not First Child

To target elements that are not the first child, you can combine :not with :first-child.

                  

                    css
                    
                      
                    
                  
                  

                    ul li:not(:first-child) {
  background-color: lightgray;
}

                  
                

CSS nth-child Selector

The nth-child selector allows you to target elements based on their position within a parent element. This is useful for styling every nth element or specific children.

                  

                    css
                    
                      
                    
                  
                  

                    ul li:nth-child(3) {
  color: orange;
}

                  
                

This example styles the third child of each list to be orange.

CSS Second Child Selector

Unlike first-child, there’s no specific CSS selector for the second child. However, to target the second child of a parent element, you can use :nth-child(2).

                  

                    css
                    
                      
                    
                  
                  

                    ul li:nth-child(2) {
  color: orange;
}

                  
                

CSS Last Child Selector

The last-child selector targets the last child element within a parent. This is helpful for applying styles to the final element in a list or group.

                  

                    css
                    
                      
                    
                  
                  

                    ul li:last-child {
  font-weight: bold;
}

                  
                

CSS Only Child Selector

The only-child selector targets an element that is the only child of its parent. This ensures that the styles apply only when an element is the sole child.

                  

                    css
                    
                      
                    
                  
                  

                    div p:only-child {
  text-align: center;
}

                  
                

Pseudo-Classes and Pseudo-Elements

Understanding the difference between pseudo-classes like :first-child and pseudo-elements like ::before is crucial for effective CSS.

                  

                    css
                    
                      
                    
                  
                  

                    p::before {
  content: "Note: ";
  font-weight: bold;
}