CSS :last-of-type Pseudo-Class

CSS :last-of-type Pseudo-Class

The CSS :last-of-type pseudo-class selects an element that is the last sibling of its HTML element type. It is useful for styling the final paragraph, heading, list, or other element of a particular type within a parent.

:last-of-type Syntax

selector:last-of-type {
  property: value;
}

The :last-of-type pseudo-class is added directly to a selector without a space. It matches an element when no later sibling has the same element type.

Basic Example

p:last-of-type {
  color: #006699;
}

This rule selects the last <p> element among the children of each parent.

Heading Example

h2:last-of-type {
  border-bottom: 2px solid #006699;
}

This rule adds a bottom border to the last <h2> element within each parent.

Class Selector Example

p.note:last-of-type {
  font-weight: bold;
}

This rule matches a paragraph with the note class only when it is also the last paragraph among its siblings.

How :last-of-type Works

The :last-of-type pseudo-class checks an element's position among siblings that share the same element type.

HTML Example

<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <span>Additional information.</span>
</div>

CSS Example

p:last-of-type {
  color: #006699;
  font-weight: bold;
}

The second paragraph matches even though a <span> follows it. The span is a different element type and does not affect which paragraph is last of its type.

Element Type Matters

The browser compares elements by their element type, not by class name, ID, or text content.

Evaluated Per Parent

Each parent has its own group of children. The final element of a given type is determined separately within each group.

Automatic Updates

If sibling elements are added, removed, or reordered, the browser updates which elements match :last-of-type.

Mixed Element Types

The :last-of-type pseudo-class is particularly useful when a parent contains different types of elements.

HTML Example

<div>
  <h2>Section Heading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <ul>
    <li>List Item</li>
  </ul>
  <span>Final note.</span>
</div>

CSS Example

p:last-of-type {
  color: #006699;
}
ul:last-of-type {
  border: 1px solid #ccc;
}

The second paragraph matches p:last-of-type, and the list matches ul:last-of-type. Neither needs to be the final child of the parent.

Each Type Is Evaluated Separately

A parent can have a last paragraph, a last list, and a last span at the same time. Each is the last sibling of its own type.

Text Nodes and Comments

Text nodes and HTML comments do not count as element siblings for this selector.

:last-of-type vs. :last-child

The :last-of-type and :last-child pseudo-classes differ when elements of different types appear after one another.

Comparison

HTML Example

<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <span>Final element.</span>
</div>

CSS Example

p:last-child {
  color: #cc3333;
}
p:last-of-type {
  color: #006699;
}

The second paragraph matches p:last-of-type, but not p:last-child. The span is the final child of the parent.

Choosing Between Them

Use :last-child when the final child position matters. Use :last-of-type when the final element of a particular HTML type matters.

:last-of-type vs. :first-of-type

The :last-of-type and :first-of-type pseudo-classes select opposite positions among siblings of the same element type.

Comparison

CSS Example

p:first-of-type {
  color: #008000;
}
p:last-of-type {
  color: #006699;
}

The first paragraph appears green, and the last paragraph appears blue when they are different elements.

When Both Match

If a parent contains only one paragraph, that paragraph matches both p:first-of-type and p:last-of-type, even when other element types are present.

:last-of-type vs. :nth-last-of-type()

The :nth-last-of-type() pseudo-class selects elements by positions counted backward among siblings of the same element type.

Comparison

CSS Example

p:last-of-type {
  font-weight: bold;
}
p:nth-last-of-type(2) {
  font-style: italic;
}

The last paragraph appears bold, while the second-to-last paragraph appears italic.

Equivalent Selectors

p:last-of-type and p:nth-last-of-type(1) match the same elements.

Nested Elements

The :last-of-type pseudo-class is evaluated separately for the children of each parent.

HTML Example

<div class="groups">
  <section>
    <p>First paragraph in section one.</p>
    <p>Last paragraph in section one.</p>
  </section>
  <section>
    <p>First paragraph in section two.</p>
    <p>Last paragraph in section two.</p>
  </section>
</div>

CSS Example

.groups section p:last-of-type {
  color: #006699;
  font-weight: bold;
}

The last paragraph in each section matches because each section has its own group of paragraph children.

Direct Child Selector

.groups > section:last-of-type {
  border: 2px solid #006699;
}

This rule selects the final <section> among the direct children of the groups container.

Avoiding Unintended Matches

Include an appropriate parent or container selector when the same element type appears in multiple nested groups.

Classes and Element Types

The :last-of-type pseudo-class compares HTML element types, not class names.

HTML Example

<div>
  <p class="notice">First notice.</p>
  <p class="notice">Second notice.</p>
  <p class="regular">Regular paragraph.</p>
</div>

CSS Example

.notice:last-of-type {
  color: #006699;
}

No element matches this selector. Although the second notice is the last element with the notice class, another paragraph follows it.

Selecting the Last Matching Class

.notice:nth-last-child(1 of .notice) {
  color: #006699;
}

This selector matches the last child with the notice class among its siblings, regardless of later siblings with different classes.

Important Distinction

Use :last-of-type for HTML element types. Use :nth-last-child(1 of .class) when the final sibling matching a class is required.

Single Element of a Type

An element that is the only sibling of its HTML element type matches both :first-of-type and :last-of-type.

HTML Example

<div>
  <h2>Section Heading</h2>
  <p>Only paragraph.</p>
  <span>Additional note.</span>
</div>

CSS Example

p:first-of-type {
  color: #008000;
}
p:last-of-type {
  font-weight: bold;
}

The paragraph appears green and bold because it is both the first and last paragraph among its siblings.

The :only-of-type Pseudo-Class

p:only-of-type {
  border: 1px solid #006699;
}

Use :only-of-type when selecting an element that has no siblings of the same element type.

Combining Selectors

p:first-of-type:last-of-type {
  margin: 0;
}

This selector matches a paragraph that is the only paragraph among its siblings.

:last-of-type Specificity

The :last-of-type pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

p {
  color: #333;
}
p:last-of-type {
  color: #006699;
}

When both selectors match and other cascade factors are equal, the :last-of-type rule takes precedence because it has greater specificity.

Practical Uses

The :last-of-type pseudo-class is useful when the final occurrence of an HTML element type needs different styling.

Removing Final Paragraph Spacing

article p:last-of-type {
  margin-bottom: 0;
}

Remove the bottom margin from the last paragraph within each parent inside an article.

Styling the Final Heading

section h2:last-of-type {
  border-bottom: 2px solid #006699;
}

Add a border to the last second-level heading in each section.

Highlighting the Final List

article ul:last-of-type {
  background-color: #eaf6fc;
}

Apply a background to the last unordered list within each parent inside an article.

Styling Final Table Rows

tbody tr:last-of-type {
  font-weight: bold;
}

Emphasize the final table row within each table body.

Mixed Content Layouts

Use :last-of-type when other element types may appear after the element being styled.

Limitations

The :last-of-type pseudo-class depends on element types and sibling positions.

Does Not Compare Classes

The selector does not identify the last element with a particular class unless that element is also last of its HTML element type.

Evaluated Per Parent

The selector does not find the final element of a type across the entire document. Each parent's children are evaluated separately.

Hidden Elements Still Count

Elements hidden with CSS, including display: none, still count when determining the last sibling of a type.

Structure Changes Affect Matching

Adding another sibling of the same element type can change which element matches.

Different Element Types Are Independent

A later element of a different type does not prevent an earlier element from matching :last-of-type.

Best Practices

• Use :last-of-type when styling the final sibling of a particular HTML element type.
• Use :last-child when the element must be the final child regardless of type.
• Use :nth-last-of-type() for more flexible positions counted from the end.
• Use :only-of-type when an element has no siblings of the same type.
• Remember that class names do not determine element types.
• Include appropriate parent selectors to avoid unintended matches.
• Remember that hidden elements still affect sibling positions.
• Test selectors when elements are dynamically added or removed.

:last-of-type Example

This example contains three paragraphs followed by a span. The :last-of-type pseudo-class highlights the third paragraph even though it is not the last child of the container.

HTML

<div class="last-of-type-demo">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
  <span>This span comes after the paragraphs.</span>
</div>

CSS

.last-of-type-demo p {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
}
.last-of-type-demo p:last-of-type {
  border: 2px solid #006699;
  background-color: #eaf6fc;
  color: #006699;
  font-weight: bold;
}
.last-of-type-demo span {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
}

Browser Result

Play in Editor

Note: The third paragraph matches p:last-of-type because no later paragraph follows it. The span does not affect the paragraph's position among siblings of the same element type.

Browser Support

Baseline: Widely available. The :last-of-type pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

For current compatibility information, visit Can I Use? .

Specifications

The :last-of-type pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It matches an element that is last among its siblings of the same element type.

Selectors Level 4 - :last-of-type