Web Dev Tool Firefox

HTML & CSS
1

When I click on the element on the right side of the tool I see rule for this element. I have 2 questions…

  • What is “element”?

  • How to inspect where from is rule inherited?

2

“element” refers to styling applied directly onto the element, or in other words in-line styling such as:-

<p style="color:red;background:#000">Red on Black.</p>
4 Likes
3

Hi,

Answering your second question:

  • How to inspect where from is rule inherited?

If you click on the inherited from element-button in the css panel, the marker in the html panel moves to that element and that’s style are displayed instead.

The style sheet the rule comes from and its line number shows for each rule. You can see that rules coming after overrides the earlier ones.

Not all developer tools has the “inherited from button”, or even shows what style sheet the rule comes from, but they all show below the styles for the ancestors the selected element inherits from in parent-grand parent order.

5 Likes
4

Yes but if you can see from the image in my case this is what I have

Element {
}

And nothing else. So does that mean I don’t have any elements with inline styling?

5

It means that element has no inline styling, nor does it inherit any from ancestors.

5 Likes
6

You can also use it to add inline styling to just that one element which is useful for testing if the rule below applies to many elements.

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.