By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,950 Members | 1,035 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,950 IT Pros & Developers. It's quick & easy.

Find all style rules matching an element

P: n/a
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.
Oct 23 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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
Oct 23 '06 #2

P: n/a
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.
Oct 23 '06 #3

P: n/a
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
Oct 23 '06 #4

P: n/a
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.
Oct 23 '06 #5

P: n/a
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.
Oct 23 '06 #6

P: n/a
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
Oct 23 '06 #7

P: n/a
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!
Oct 23 '06 #8

P: n/a
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.
Oct 23 '06 #9

P: n/a
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
Oct 23 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.