Geek Answers Handbook

Inspect one letter in Google Chrome Inspector or Firebug

I am working on a template that contains a lot of existing CSS. One of the things CSS does is expand and highlight the first letter of the first paragraph of the article. I assume this is a pseudo-class (ex: first-letter), but I cannot find it in CSS styles.

I cannot verify a single letter in Inspector or Firebug because it was not wrapped in an HTML tag and a tag

in which he is, has a different style than this letter.

Is there a way to check an element for all its pseudo-elements or check a single letter in an element

? Thanks!

+6
source share
2 answers

if you check the element that the pseudo-class is in and scroll down in the styles area, it will display all the associated pseudo-classes.

+6
source

I do not know how to determine how Chrome identifies ALL psuedo selectors. But I just did a Chrome search for :first-letter (most likely the style you are looking for, unless it is based on JS)

In DevTools, press ctrl + shift + f , and then search :first-letter

This should search all the files on the website. If you have only one CSS file, you can simply go to it through the sources tab. and then just do ctrl + f to find this file.

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

List of all 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 this is not one of them, then it's time to look at JavaScript. To disable JS, I just turned off JS and looked to see if this affects your problem.

+2
source

More articles:


All Articles