1

In the Firefox inspector's Inspector tab the CSS rules pane has a search tool but it only searches the element currently selected in the HTML pane. For example, I know there is a rogue width declaration affecting the layout under an article declaration but to find it I would have to move down through the HTML branch, element by element, until I find it.

How can I search all of an element's children's CSS rules for all the width declarations?

Improve this question

1 Answer 1

Reset to default
1

The quickest way I know of still requires to go through the subtree of elements but doesn't require to select the elements manually and check their styles.

What you can do to find the culprit:

  1. In the Inspector switch to the Computed side panel
  2. In there search for "width"
  3. Select the top-most affected element
  4. Navigate through the tree using the arrow keys on the keyboard (↓↑ to select the next/previous element in the tree, →← to open/close a subtree)

In the Computed panel you will see whether the width property is set for it and the element is also highlighted within the page letting you see at a glance whether it is as wide as the top-most element.

Improve this answer
1
  • I'll give this a try and let you know, thanks for taking the time to answer.
    – ian
    Commented Sep 21, 2019 at 7:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .