Comments on: :first-of-type

By: Howard Brown

Howard Brown — Wed, 16 Nov 2022 16:01:12 +0000

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

By: Lisa

Lisa — Mon, 29 Mar 2021 06:03:30 +0000

In reply to Jay. 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!

By: Daniel Bateman

Daniel Bateman — Sun, 26 Jul 2020 13:34:43 +0000

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.

By: Jay

Jay — Mon, 02 Mar 2020 06:23:32 +0000

You could also use:

article h1 + p

to select the first paragraph that follows any h1 tag inside an article.

By: Michael Campanella

Michael Campanella — Wed, 20 Nov 2019 13:41:06 +0000

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?

By: Nityagopal Sahoo

Nityagopal Sahoo — Mon, 13 Aug 2018 06:48:58 +0000

In reply to keshavhl.

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;
}

By: James Andersen

James Andersen — Fri, 04 Mar 2016 15:11:23 +0000

In reply to Ben. Unforunately it doesn't work that way; see this SO answer for details on why and a workaround.

By: Ben

Ben — Sat, 20 Feb 2016 23:05:14 +0000

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

By: Jim

Jim — Thu, 10 Sep 2015 14:36:08 +0000

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

Lol.

By: keshavhl

keshavhl — Tue, 06 Jan 2015 07:30:24 +0000

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)

By: Charlie

Charlie — Wed, 06 Nov 2013 19:25:56 +0000

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


$('article p').first().css({fontSize:'1.25em'});

By: Carla

Carla — Wed, 08 May 2013 16:18:55 +0000

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!!