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


i'm trying apply style first letter in header, made of text. webpage here: http://smarterinfive.com

it works in chrome, not @ in ff. here properties tried applying styles to, 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 first-letter or first-child:first-letter isn't working, first-child only is.

i tried:

  1. adding !important @ end of these.
  2. viewing in developer tools, didn't show property @ all.

the problem .branding h1 a:first-child:first-letter first-letter can applied block elements, not inline elements a. see previous question

i don't understand why others aren't working...

but why need use first-child?

you can same effect , solve problem this:

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

it's more simple.

demo


Comments

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

php - HTTP_REFERER woes: How can I allow access to a specific page, only when a visitor has visited another specific page beforehand? -

java Extracting Zip file -