Find all style rules matching an element

[Harlan Messinger]

Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

[Spartanicus]

Harlan Messinger <hm*******************@comcast.netwrote:

>Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

Mozilla DOM Inspector?

--
Spartanicus

[Harlan Messinger]

Spartanicus wrote:

Harlan Messinger <hm*******************@comcast.netwrote:

>Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

Mozilla DOM Inspector?

Unless I'm overlooking a feature, for a given element the DOM Inspector
only lists the computed style property values, without indicating how it
arrived at them.

[Spartanicus]

Harlan Messinger <hm*******************@comcast.netwrote:

>>Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

Mozilla DOM Inspector?

Unless I'm overlooking a feature, for a given element the DOM Inspector
only lists the computed style property values, without indicating how it
arrived at them.

That should allow you to establish *if* there is an unexpected property
or value being applied through inheritance or the cascade other than
through the style properties directly attached to the element.

If you then have difficulty establishing which rule causes this, and
this happens frequently enough to be an annoyance, then this suggest
that your stylesheets are to complex.

--
Spartanicus

[Harlan Messinger]

Spartanicus wrote:

Harlan Messinger <hm*******************@comcast.netwrote:

>>>Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.
Mozilla DOM Inspector?

Unless I'm overlooking a feature, for a given element the DOM Inspector
only lists the computed style property values, without indicating how it
arrived at them.

That should allow you to establish *if* there is an unexpected property
or value being applied through inheritance or the cascade other than
through the style properties directly attached to the element.

If you then have difficulty establishing which rule causes this, and
this happens frequently enough to be an annoyance, then this suggest
that your stylesheets are to complex.

It's more like, different sheets are being provided by different
authorities over different parts of the web page. Unfortunately, the
others didn't wrap their parts of the HTML in a DIV with an ID and then
use that ID consistently to differentiate their selectors.

[Ben Bacarisse]

Harlan Messinger <hm*******************@comcast.netwrites:

Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element,
along with the properties applied in connection with each of them? In
other words, a tool to help identify why a particular element looks as
it does when it isn't consistent with my expectations.

Have you tried the "Web Developer" FireFox extension? It does not do
exactly what you ask, but the live "display element information"
together with "view style information" comes damn close.

--
Ben.

[Eric Lindsay]

In article <4q************@individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

Does http://www.culturedcode.com/ Xyle scope do what you want?

--
http://www.ericlindsay.com

[Harlan Messinger]

Eric Lindsay wrote:

In article <4q************@individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

>Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

Does http://www.culturedcode.com/ Xyle scope do what you want?

From "In Cascade Mode all rules from associated style sheets that apply
to the currently selected HTML element and its ancestors are shown in
their proper order known as the CSS cascade" I'd say it sounds like it.
I'll have to check it out. Thanks!

[Harlan Messinger]

Harlan Messinger wrote:

Eric Lindsay wrote:

>In article <4q************@individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

>>Has anyone produced a tool that identifies and lists all the
selectors found among a page's stylesheets that match a particular
element, along with the properties applied in connection with each of
them? In other words, a tool to help identify why a particular
element looks as it does when it isn't consistent with my expectations.

Does http://www.culturedcode.com/ Xyle scope do what you want?

From "In Cascade Mode all rules from associated style sheets that apply
to the currently selected HTML element and its ancestors are shown in
their proper order known as the CSS cascade" I'd say it sounds like it.
I'll have to check it out. Thanks!

Or not! It's for Mac only.

[dorayme]

In article <4q************@individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

Eric Lindsay wrote:

In article <4q************@individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:

Has anyone produced a tool that identifies and lists all the selectors
found among a page's stylesheets that match a particular element, along
with the properties applied in connection with each of them? In other
words, a tool to help identify why a particular element looks as it does
when it isn't consistent with my expectations.

OP may find

<http://penguin.theopalgroup.com/cgi-...er/selectoracl
e.py>

useful in tracking down problems when getting a bit confused...

--
dorayme