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?
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.
Simply right click and click Inspect Element. This will bring up the CSS selectors for that element.
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.
(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.
In my experience, the greyed out html elements are those with display: none;
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With