CODEWITHSUNDEEP
cssfirefoxcss-selectors
notypist
notypist

Reputation: 25

Firefox not applying styles to "first-child:first-letter"

I'm trying to apply a certain style to the first letter in my header, which is made up of text. My webpage is here: http://smarterinfive.com

It works well in Chrome, but not at all in FF. Here are properties I already tried applying my styles to, with no avail (in FF):

header[role="banner"] .branding:first-letter {
background: #000;
}

.branding:first-child:first-letter {
background: #000;
 }

.branding h1 a:first-child:first-letter {
background: #000;
}

It seems that anything with first-letter or first-child:first-letter isn't working, but everything with first-child only IS.

I also tried:

  1. Adding !important at the end of these.
  2. Viewing it in the developer tools, which didn't show the property at all.

Upvotes: 0

Views: 1067

Answers (1)

bookcasey
bookcasey

Reputation: 40473

The problem for .branding h1 a:first-child:first-letter is that first-letter can only be applied to block elements, not inline elements like a. See this previous question

I also don't understand why the others aren't working...

But why do you need to even use first-child?

You can get the same effect and solve the problem with this:

.branding h1:first-letter {
  background: black;
}

It's actually more simple.

Demo

Upvotes: 2

Related Questions