DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
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:
<article>
<h1>A Title</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
</article>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.
Other Resources
- Related to: last-of-type, nth-of-type, nth-last-of-type
- Mozilla Docs
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.
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!!
For IE 8 && If youre using jQuery you can use:
$('article p').first().css({fontSize:'1.25em'});Hi,
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)
Pls modify your css code…..
#breadcrumbs {
margin-top: 20px;
margin-left:20px;
font-size:14px;
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;
}
Lol.
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
Unforunately it doesn’t work that way; see this SO answer for details on why and a workaround.
I am trying to use this to style the first paragraph in an article. While I am able to make it style the first paragraph in the article I find it also applies to the first paragraph tag in any child elements that are also in the article.
How can I refine it so it overlooks any p tags that are in the article but within child elements?
You could also use:
to select the first paragraph that follows any h1 tag inside an article.
I didn’t known until now, that you could use + element-below to select the first element after another element. How do you call this kind of selection? I’d like to read more about it. Thanks!
Thanks a bunch! That really explained first-of-type selectors well, I was having trouble grasping the concept. Well done, now I know where to come to get good resources. And is this like a blog where I can post a piece of code Im having trouble with and then people try to solve the problem? That would be so cool, Iv been looking for a place like that. thanks a bunch.
I ran into an issue with Chrome, the version current as of this comment, where using the CSS attribute selector and the first-of-type selector in the same selector to not find any matches, but with the either the attribute selector or the first-of-type selector matches were found. Switching the order of these selectors when using both didn’t help.
Here is my selector:
div#receipt table[print] tbody tr[header]:first-of-type th span