Is there a CSS selector for the first direct child only?

Other ways to customize your selection

Flexible coding? Yes please! Here are a few variations:

• Target the initial child of any type:

  .container > *:first-child {
      /* First child, no matter what! */
  }
  

• For IE6 support, strategically place your specific classes:

  .section > .first-child-class {
      /* Build bridges for IE6 */
  }
  

• Avoid trickling styles to nested elements with simple descendant selection:

  .container > div {
      /* Grandchildren are safe from these styles */
  }
  

Pseudo-classes, new alternatives and browser support

• The alternative to :first-child is ":nth-child(1)" - great for all first child afficionados.
• Browser inconsistencies got you down? Perform cross-browser testing, especially for tricksy IE6's lack of > support.
• For clean syntax, skip the * before :first-child:

  .container > :first-child {
      /* No need for asterisks on this stage */
  }
  

Upping your CSS game: Performance, simplicity and maintainability

To curb the DOM's adventurous spirit — minimize traversal and improve performance, try these:

• Isolate your CSS laser focus to certain elements or classes to cut down on DOM exploration time:

  div.section > div:first-of-type {
      /* More Sherlock, less Dora the explorer */
  }
  

• Railroad your CSS to be maintainable. Use classes over tag-based selectors.

Writing semantically while testing across browsers

• Embrace semantic HTML. Use accurate tags (<section>, <article>) for readability and SEO.
• Validate CSS behavior across variegated browsers to ensure consistent application.

Best practices: Keep your CSS well-behaved

Managing CSS structure:

• Get to know specificity: More specific selectors override less specific ones.
• Avoid the CSS waterfall effect: Use direct child selectors.
• Selector efficiency: Seek balance between brevity and clarity.

Catering to older browsers: Be inclusive

With IE6 tripping over certain selectors, adopt classes for child elements. This ensures universal compatibility for your styles, even on legacy platforms.