MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam English (US).

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

/* Selects any paragraph, but only if it is the last paragraph inside */
/* its parent element (not necessarily the last child) */
p:last-of-type {
  color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:last-of-type

Example

To match the last <em> element inside a <p> element, you can use this:

p em:last-of-type {
  color: lime;
}
<p>
  <em>I'm not lime :(</em>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <strong>I'm also not lime :(</strong>
</p>

<p>
  <em>I'm not lime :(</em>
  <span>
    <em>I am lime!</em>
  </span>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <span>
    <em>I am also lime!</em>
    <strike> I'm not lime </strike>
  </span>
  <strong>I'm also not lime :(</strong>
</p>

...will result in:

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':last-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':last-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 10.0 3.2

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: mfluehr,