Selectors Side Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Added sentence to the list of elements)
m (Updated image file name)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
[[Image:Elements_Side_Panel.png|thumb|400px|Elements Side Panel]]
+
[[Image:SelectorsSidePanel.png|thumb|400px|''Selectors'' side panel]]
-
The ''Elements'' side panel lets you try out CSS selectors and lists all matching elements on the page.
+
The ''Selectors'' side panel lets you try out CSS selectors and lists all matching elements on the page.
Selectors can be entered via the ''Try a selector...'' field or by right-clicking a selector inside the [[CSS Panel]] and choosing ''Get Matching Elements'' from the context menu.
Selectors can be entered via the ''Try a selector...'' field or by right-clicking a selector inside the [[CSS Panel]] and choosing ''Get Matching Elements'' from the context menu.
 +
Doing so will list all elements that match the entered selector.
-
Doing so will list all elements, that match the entered selector.
+
You can create several selector trials, which are displayed as foldable groups showing the entered CSS selector in the header and listing the matching elements below.
 +
These groups are persisted on page reloads and updated dynamically as elements on the page are added, removed or changed. To remove a selector trial there's a button at the right side of its header.
 +
 
 +
Clicking a matching element directs you to the [[HTML Panel]] and select the element there.
== Context Menu ==
== Context Menu ==
The context menu for the matching elements is the same as for the [[HTML Panel#Context Menu|HTML elements inside the ''HTML'' panel]].
The context menu for the matching elements is the same as for the [[HTML Panel#Context Menu|HTML elements inside the ''HTML'' panel]].

Latest revision as of 19:15, 4 July 2013

Selectors side panel

The Selectors side panel lets you try out CSS selectors and lists all matching elements on the page. Selectors can be entered via the Try a selector... field or by right-clicking a selector inside the CSS Panel and choosing Get Matching Elements from the context menu. Doing so will list all elements that match the entered selector.

You can create several selector trials, which are displayed as foldable groups showing the entered CSS selector in the header and listing the matching elements below. These groups are persisted on page reloads and updated dynamically as elements on the page are added, removed or changed. To remove a selector trial there's a button at the right side of its header.

Clicking a matching element directs you to the HTML Panel and select the element there.

[edit] Context Menu

The context menu for the matching elements is the same as for the HTML elements inside the HTML panel.

Personal tools