How to Use :not() and :first-child in CSS Selectors

By the end of this page, you will understand how :first-child, :not(), and related CSS selectors work together. You will also learn why :not(:first-child) sometimes appears not to work, how child position is actually calculated, and which selector patterns are best for targeting all elements except the first.

In CSS, pseudo-classes like :first-child let you select elements based on their position in the DOM. The selector :first-child matches an element only if it is the very first child of its parent.

The :not() pseudo-class excludes elements that match a condition. So this selector:

ul:not(:first-child)

means:

• select every ul
• except those that are the first child of their parent

This is valid CSS.

The important detail is that :first-child does not mean "the first ul". It means "an element that is the first child among all siblings".

So if your HTML looks like this:

<div>
  <h2>Title</h2>
  <ul>...</ul>
  <ul>...</ul>
  <ul>...

Imagine children standing in a line inside a room.

• :first-child means the person standing in position 1, no matter what type of person they are.
• :first-of-type means the first person wearing a specific uniform, such as the first ul among its siblings.
• :not(...) means everyone except the people matching the rule inside it.

So:

• ul:first-child = a ul that stands in the very first position
• ul:not(:first-child) = all ul elements that are not standing in position 1
• ul:not(:first-of-type) = all ul elements except the first ul

That last one is often what people really mean.

The core selectors are:

/* A ul only if it is the first child of its parent */
ul:first-child {
  background: #900;
}

/* Every ul that is not the first child */
ul:not(:first-child) {
  background: #900;
}

/* Every ul except the first ul among siblings */
ul:not(:first-of-type) {
  background: #900;
}

/* Every ul that directly follows another ul */
ul + ul {
  background: #900;
}

Example 1: When :not(:first-child) works

<div>
  <ul>First</ul>
  <ul>Second</ul>
  <ul>Third</ul>
</div>

Consider this HTML:

<div>
  <ul>One</ul>
  <ul>Two</ul>
  <ul>Three</ul>
</div>

And this CSS:

div ul:not(:first-child) {
  background-color: #900;
}

Step-by-step

1. CSS looks for every ul inside a div.
2. It checks the first ul:
   • Is it the first child of its parent? Yes.
   • Because of :not(:first-child), it is excluded.
3. It checks the second ul:
   • Is it the first child? No.
   • It matches, so the style is applied.
4. It checks the third ul:

This selector pattern is common in real layouts where you want repeated items styled differently after the first one.

Common examples

• Add spacing between list sections except before the first one
• Add borders to repeated cards except the first card
• Style navigation items after the first item
• Apply margins to stacked form sections except the top section
• Add separators between content blocks

Example: add spacing between repeated blocks

.section + .section {
  margin-top: 24px;
}

This avoids adding unnecessary spacing before the first section.

Example: style every menu except the first

.sidebar ul:not(:first-of-type) {
  border-top: 1px solid #ddd;
  padding-top: 12px;
}

Example: add a divider between items

.item + .item {
  border-top: 1px solid #eee;
}

This is often more maintainable than styling everything and then trying to remove the style from the first item.

In real projects, developers usually choose the selector that best matches the document structure rather than forcing :not() everywhere.

Common patterns

1. Adjacent sibling selector for spacing

.card + .card {
  margin-top: 16px;
}

This is extremely common because it naturally means "every card after the first card".

2. :not(:first-of-type) for repeated tags

article p:not(:first-of-type) {
  margin-top: 1rem;
}

Useful when the repeated elements are the same tag type.

3. Utility classes in component systems

.menu-list + .menu-list {
  border-top: 1px solid #ccc;
}

Teams often prefer class selectors over raw tag selectors because they are easier to maintain.

4. Guarding against fragile HTML structure

Instead of writing:

1. Writing :not:first-child instead of :not(:first-child)

This is invalid because :not must contain parentheses.

/* Broken */
ul:not:first-child {
  color: red;
}

/* Correct */
ul:not(:first-child) {
  color: red;
}

2. Confusing :first-child with :first-of-type

<div>
  <h2>Title</h2>
  <ul>A</ul>
  <ul>B</ul>
</div>

() {
  : pink;
}

/* First child of parent */
selector:first-child

/* Not the first child */
selector:not(:first-child)

/* First element of this type */
selector:first-of-type

/* Not the first element of this type */
selector:not(:first-of-type)

/* Any selector directly after same sibling pattern */
selector + selector

Quick rules

• :not() must use parentheses.
• :first-child checks position among all siblings.
• :first-of-type checks position among siblings of the same tag type.
• A + B matches B only if it comes immediately after A.

Useful examples

ul:not(:first-child) { ... }
ul:not(:first-of-type) { ... }
ul + ul { ... }

Why does ul:not(:first-child) not work sometimes?

Because :first-child checks whether the element is the parent's first child overall. If another element appears before the first ul, then that ul is not :first-child, so it also gets matched.

What is the difference between :first-child and :first-of-type?

:first-child means first among all siblings. :first-of-type means first of a specific tag type among siblings.

How do I select every ul except the first ul?

Usually use:

ul:not(:first-of-type)

If the ul elements are consecutive siblings, you can also use:

ul + ul

Is valid CSS?

• :last-child — useful when you want to style the final sibling instead of the first.
• :nth-child() — lets you target elements by numeric position.
• :nth-of-type() — targets positions within the same tag type.
• :not() — excludes elements matching a selector.
• Adjacent sibling selector + — useful for styling every repeated element after the first.
• General sibling selector ~ — matches later siblings, not just the immediate next one.
• CSS specificity — helps explain why a rule may not seem to apply.
• Pseudo-elements — related because :after and :before are often confused with pseudo-classes.