CSS Child Selector (>)

What You’ll Learn

The element > element selector — also called the child combinator — targets only direct children of a parent. It gives you precise control over nested HTML without accidental styling of deeper elements.

Introduction

The element > element selector in CSS is a child combinator that selects elements which are direct children of a specified parent element.

This selector lets you target one level deep in the DOM tree. Styles apply to immediate children only and do not cascade to grandchildren or deeper nested elements.

Definition and Usage

Write the parent selector, a greater-than sign (>), then the child selector. The rule applies only when the child is an immediate descendant of the parent. If another element sits between them, the selector does not match.

📝 Syntax

The signature of the child combinator is:

parent > child {
  /* CSS properties */
}

Basic Example

.container > h1 {
  color: #2563eb;
  font-size: 1.5rem;
}

.container > .content {
  background: #eff6ff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

Syntax Rules

• The child must be a direct descendant of the parent.
• Grandchildren and deeper nested elements are not matched.
• Spaces around > are conventional: .parent > p.
• Works with element types, classes, IDs, and attribute selectors.
• Can be chained: nav > ul > li for each level.

Related Selectors

• element element — descendant combinator (any nested level)
• element + element — adjacent sibling combinator
• element ~ element — general sibling combinator

When to Use element > element

The child combinator is ideal when you need one-level precision:

• Layout sections — Style only top-level blocks inside a container without affecting nested widgets.
• Navigation menus — Target ul > li for top-level items while leaving dropdown sub-menus alone.
• Article content — Style direct paragraphs in .content > p but not quotes inside nested divs.
• Tables — Use table > thead or table > tbody for structural styling.
• Component boundaries — Prevent styles from bleeding into child components rendered inside a parent.

Examples Gallery

Practice the > combinator with containers, navigation, direct paragraphs, and child vs descendant comparison.

.container > h1 {
  color: #2563eb;
  font-size: 1.5rem;
}

.container > .content {
  background: #eff6ff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.menu {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.menu > li {
  padding: 0.45rem 0.85rem;
  background: #f1f5f9;
  border-radius: 6px;
  font-weight: 600;
}

.content > p {
  color: #16a34a;
  font-weight: 600;
}

/* Direct children only */
.child-only > p {
  color: #2563eb;
  font-weight: 600;
}

/* All nested paragraphs */
.all-nested p {
  color: #dc2626;
  font-weight: 600;
}

⚠️ Common Pitfalls

• Expecting nested matches — > only selects direct children. Grandchildren need a separate rule or the descendant combinator.
• Wrong HTML structure — If an extra wrapper div sits between parent and child, the selector will not match.
• Confusing > with + — > is parent-to-child. + is sibling-to-sibling at the same level.
• Over-specificity — Long chains like div > div > div > p are fragile when markup changes; prefer classes when structure varies.

♿ Accessibility

• Semantic HTML — Use proper elements (nav, ul, li, main) so child selectors align with meaningful structure.
• Navigation — When styling ul > li, ensure keyboard users can reach all menu items and sub-menus remain accessible.
• Don’t hide content accidentally — Be careful with display: none on child selectors that might hide important nested content.
• Focus styles — Child selectors for layout should not remove :focus outlines from interactive elements inside.

💡 Best Practices