Link to home
Start Free TrialLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

Pseudo element :first-child isn't working

Hi,
I can't figure out why :first-child isn't working to remove the border at the top of the first entry. I can't even get the rule to show up in Firebug when it's in my CSS.
I've got this:

.blog .hentry {
	border-top: 1px solid #c54d05;
	}
  .blog .hentry:first-child {
       border: none;
	}

Open in new window


http://sandbox.intrepidrealist.com/lamaraheartwell/blog

Thanks!
Avatar of David S.
David S.
Flag of United States of America image

The first thing to do is to correct the 6 CSS errors (not counting the "behavior" property ones). http://jigsaw.w3.org/css-validator/

If you're not going to specify a value for a property, either remove it or comment it out.

That rule is not being applied because the first element with the "hentry" class is not the first child of its parent. You want to use the ":first-of-type" pseudo-class instead of ":first-child".

P.S. ":first-child" is a pseudo-class, not a pseudo-element. One way to think about it is that pseudo-elements don't exist in the DOM.
the reason youre not seeing it is because its not there :)
I can't believe anyone would expect thing to go without a hitch when there are 10, 12, or more classes applied to a single element.  They are called cascading stylesheets for a reason.

Cd&
Avatar of Alicia St Rose

ASKER

Thanks Kravimir,
First I've heard of
:first-of-type

Open in new window

a true sign that my CSS Pocket reference is out of date! Anyway, I've applied your solution like this:

.blog .hentry {
    border-top: 1px solid #c54d05;
    }
.blog .hentry:first-of-type {
    border-top: none;
    }

Open in new window

And I'm still not seeing the top border disappear. Am I still doing something wrong?

 I corrected the CSS errors. A good idea to comment them out. I had them there in case I was going to use, then delete before going live. I'm working from a parent theme that has a lot of styles I often change. I think I'm going to use the Skeleton theme from now on. No pre-existing styles, just mine!

And thank you for the tip on pseudo elements vs classes!

COBOLdinosaur: you might want to ask Justin Tadlock about the classes. He's the one who built the theme, Hybrid, that I use as a framework. I imagine he added them for infinite styling options of a child theme built from Hybrid.
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
FYI - first-of-type doesn't work with classes. It for selecting element of a given type (DIV, P etc), so this won't work:

.blog .hentry:first-of-type { }

But this will

.blog div:first-of-type { }

Although not in IE8 or less :(
Hmm... I don't know how I didn't know this (perhaps because I haven't used them much because IE7 doesn't support most of the selectors new in CSS3), but ":first-of-type" literally means the element type, which in this case is "div". The problem here is that while the first-child has completely different class(es) it's also a <div>.

While we could use ":nth-of-type(2)", a more robust workaround is to use the "general sibling" selector:
.blog .hentry, .blog .hentry ~ .hentry {
  border-top: 1px solid #c54d05;
}
.blog .hentry {
  border-top: none;
}

Open in new window

which in this case could be shortened to a single rule, which selects all elements with the class "hentry" that have a previous sibling with the class "hentry":
.blog .hentry ~ .hentry {
  border-top: 1px solid #c54d05;
}

Open in new window

I recommend SitePoint's CSS Reference. Here's the relevant section: http://reference.sitepoint.com/css/css3psuedoclasses

Out of curiosity, which edition of the Pocket Reference do you have?
Wow! I learned so much from this question!
Thanks everyone!
ChrisStanyon has offered the clearest and most accessible solution.

Thank you so much.
Out of curiosity, which edition of the Pocket Reference do you have?


Kravimir, you don't really want to know...
Okay...2nd edition, 2004.  :|

But I do most of my searching online...
You're welcome.

Yeah, I can see how using the class is clearer than the general sibling selector.

Another solution using the class would be to use the ":not()" selector (but it won't work in IE8 and older):
.blog .hentry:not(.post-1) { border-top: 1px solid #c54d05; 	}

Open in new window