Are there any scenarios where pseudo classes wouldn't work?

Question

This sounds like an abstract question, but I'm trying to troubleshoot this project I'm working on and I am at a loss.

I had to take over a project because the first developer was fired, so I made the rookie mistake of not starting it over from day 1. I've been fixing hundreds of mistakes and pretty much redoing everything. Everything from non-semantic code, in-line layout elements, unnecessarily sliced text images, and having to convert everything from CSS2 to CSS3.

I'm saying all this because there is way too much code to include on here, and I'm hoping that maybe me describing my situation will dredge up someone else's bad experience to advise me.

PROBLEM: I have one page that nothing works on. I deleted the appropriate CSS from the external stylesheet, and have been rewriting it in an internal stylesheet. The two biggest problems I'm having are that pseudo elements and pseudo classes aren't working. I struggled for awhile trying to figure out if it was something that I was using, but then I experimented with different pseudo classes like p:first-child {color:red} and nothing.

I'm also having problems with image replacement on the page. My usual text-indent isn't working, the text just stays on the page.

I'm not sure what other information would be relevant so if you need to see anything or ask any questions, please ask away. I thank you in advance for saving a noob like me from pulling out her hair :)

EDIT

Here's a link with the page code: http://jsfiddle.net/syren/Zsj2T/ Everything else on the site works so I have to assume that it something to do with the code on the page.

Answer 1

I see that you're using #history p:first-child.

You're probably expecting this selector to select the first <p> element of #history, but that's wrong. The :first-child selector only select elements which are a first child.

To select the first <p> element, you have to use #history p:first-of-type.

Your code structure, in a tree view:

div#history    
    h2        :first-child 
    a.share   :nth-child(2)
    p         :nth-child(3)  p:first-of-type

Fiddle: http://jsfiddle.net/Zsj2T/1/
PS. Quick reference MDN: Pseudo-classes

Answer 2

read this article check the compatibility with browsers of each pseudo element.

TIP: don't use color name(RED), instead use color hex value (#F00) as color name has been deprecated according to w3c