Inspect single letter in Google Chrome Inspector or Firebug

Question

I am working on a template that has a lot of existing CSS. One of the things that the CSS does is enlarges and bolds the first letter of the first paragraph of an article. I am assuming this is a pseudo class (like :first-letter) but I can't seem to find it in the CSS stylesheets.

I can't inspect a single letter in the Inspector or Firebug because it's not wrapped in an HTML tag and the

tag it is in has different styling than this one letter.

Is there a way to inspect an element for all of it's pseudo elements or inspect a single letter in a

element? Thanks!

Answer 1

if you inspect the element that the pseudo-class is on, and scroll down in the styles pane, it will show all associated pseudo classes.

Answer 2

I don't know of a way to have Chrome identify ALL psuedo selectors. But I'd just do a search in Chrome for :first-letter (that's likely the styling that you're looking for - unless it's JS based)

From the DevTools, push ctrl + shift + f and then search for :first-letter

This should search all files within the website. If you only had one CSS file, you could just navigate to it via the sources tab. and then just do ctrl + f to search that one file.

You may also try one of these others. The ones that stand out to me: first-letter, nth-letter, first-letter, first-word

List of all the psuedos from CSS-Tricks:

:first-child        :first-of-type        :only-child
:last-child         :last-of-type         :only-of-type                  
:nth-child          :nth-of-type    
:nth-last-child     :nth-last-of-type

::first-letter      ::first-line          ::first-word
::last-letter       ::last-line           ::last-word
::nth-letter        ::nth-line            ::nth-word
::nth-last-letter   ::nth-last-line       ::nth-last-word

If it's not one of those, then it's time to start looking at JavaScript. To rule JS out, I'd just disable JS all together and see if that affects your issue.