Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mozilla Firefox Developer tools - what are the grayed out selectors?

In the Firefox developer tools rules view the selectors are pink. Sometimes there grayed out selectors together with the pink ones. What do they do?

like image 704
Bar Akiva Avatar asked Dec 17 '15 16:12

Bar Akiva


People also ask

Why is html greyed out?

Developer Tools grays out any non-visible elements. So, for example, the <head> , <meta> , and <title> tags are all grayed out, since they are not actually visible to the user. Similarly, an element with display: none will be grayed out. It's nothing to worry about—the browser is simply trying to be helpful.

Where is my CSS selector in Firefox?

Simply right click and click Inspect Element. This will bring up the CSS selectors for that element.

What is special in Firefox Developer Edition?

All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector. A separate profile and path so you can easily run it alongside Release or Beta Firefox.

How do I reset developer tools in Firefox?

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk. (3) Use the button toward the right end of the row with the left-pointing arrow to reset the devtools.


2 Answers

In my experience, the greyed out html elements are those with display: none;

like image 148
relipse Avatar answered Oct 27 '22 00:10

relipse


If a rule has multiple selectors, the ones that apply to the selected element are brighter (for me, green; but apparently for you, pink) and the ones that do not apply to the selected element are dimmed.

like image 41
Tom Tromey Avatar answered Oct 27 '22 01:10

Tom Tromey