The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title and several paragraphs:

  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>

We want to make the first paragraph larger, as a sort of “lede” or introductory paragraph. Instead of giving it a class, we can use :first-of-type to select it:

p:first-of-type {
  font-size: 1.25em;

Using :first-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-child(1), nothing would happen because the paragraph is not the first child of its parent (the <article>). This reveals the power of :first-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :first-of-type and a related pseudo-class selector, :last-of-type.

Check out this Pen!

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works 3.2+ Works 9.5+ 9+ Works Works

:first-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.


  1. User Avatar

    Thank you for this article. I just learned about pseudo classes via Greg Rickaby’s drop cap tutorial. I used to manually add span tags to the first letter of each post, but I wanted an easy way to do this that would save me the hassle of having to do that. So I simply added some first-of-type CSS and it worked perfectly.

    But I was concerned about browser compatibility. From what I’m reading, this pseudo class is pretty popular and works great in most browsers, including older versions. It seems the only one that’s somewhat of a concern is IE8. Is IE9 the most recent one? If so, then lots of people are probably still running IE8, right?

    Would some Javascript help make drop caps compatible in all browsers?

    Thank you!!

  2. User Avatar
    Permalink to comment#

    For IE 8 && If youre using jQuery you can use:

    $('article p').first().css({fontSize:'1.25em'});
  3. User Avatar
    Permalink to comment#


    I am having issues getting first-of-type to work with my breadcrumbs styles

    See the fiddle demo here http://jsfiddle.net/Lh4aq796/4/

    Everything is working fine except the :first-of-type and :first-of-type:before elements (last two styles)

    I read several article and tried all hacks but nothing seems to work. Looks like span classes in between the a tag causing the issue. Please help with the fix for this (The HTML markup is produced by yoast seo plugin)

    • User Avatar
      Nityagopal Sahoo
      Permalink to comment#

      Pls modify your css code…..

      #breadcrumbs {
      margin-top: 20px;
      line-height: 30px;
      color: #aaaaaa;
      padding: 1px;
      border: 1px solid #f0f0f0;

      #breadcrumbs a {
      display: block;
      float: left;
      background: #f0f0f0;
      padding-right: 10px;
      height: 30px;
      margin-right: 31px;
      position: relative;
      text-decoration: none;
      color: #aaaaaa;}

      #breadcrumbs a:before {
      content: “”;
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -30px;
      border: 15px solid transparent;
      border-color: #f0f0f0;
      border-left-color: transparent;

      #breadcrumbs a:after {
      content: “”;
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      right: -30px;
      border: 15px solid transparent;
      border-left-color: #f0f0f0;

      #breadcrumbs a:hover {
      background: #f36f21;
      color: #fff;
      text-decoration: none;}

      #breadcrumbs a:hover:before {
      border-color: #f36f21;
      border-left-color: transparent;

      #breadcrumbs a:hover:after {
      border-left-color: #f36f21;

      #breadcrumbs span span:first-of-type a {
      padding-left: 15px;

      #breadcrumbs span span:first-of-type a:before {
      display: none;

  4. User Avatar
    Permalink to comment#

    Jules Verne … in the late nineteenth and early twentieth century. Follow him on Twitter.


  5. User Avatar
    Permalink to comment#

    I am not sure if I am misunderstanding how this is supposed to work, or if it doesn’t work as it is supposed to.
    I am trying to target the last element with a given class (see codepen). http://codepen.io/benratelade/pen/dGBYev

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.