Find All CSS Rules That Apply to an Element

Find all CSS rules that apply to an element

EDIT: This answer is now deprecated and no longer works in Chrome 64+. Leaving for historical context. In fact that bug report links back to this question for alternative solutions to using this.

---

Seems I managed to answer my own question after another hour of research.

It's as simple as this:

window.getMatchedCSSRules(document.getElementById("description"))

(Works in WebKit/Chrome, possibly others too)

Are all CSS rules allowed on all HTML elements and can they all be inherited?

Temani's answer was very helpful and pointed me in the right direction. After a bit of research I think I can now post a more elaborate and properly referenced answer to my own question.

Is it legal to apply any valid CSS rule to any HTML element?

Yes, it is. This is stated quite clearly in the CSS2.1 spec: https://www.w3.org/TR/CSS2/about.html#applies-to (CSS3 is a module-based backwards-compatible extension of CSS2.1, so this still applies). It says:

All elements are considered to have all properties, but some properties have no rendering effect on some types of elements. For example, the 'clear' property only affects block-level elements.

All elements are considered to have all properties implicitly means that any property can be set on any element.

Some properties have no rendering effect on some elements means that some elements simply ignore certain properties when rendering (this does not mean that they can't be inherited, read on).

Can any rule be inherited?

To answer this question, let's look at the CSS Values and Units Module Level 3 spec: https://www.w3.org/TR/css3-values/#common-keywords. It states that:

All CSS properties also accept the CSS-wide keyword values as the sole component of their property value.

There are three CSS-wide keyword values: initial, inherit and unset.

The spec is essentially saying that any property can use inherit as its value, thus the answer to the question is yes. The important detail, however, is how the inherited value is determined. As Temani has already pointed out, it's not as straightforward as it may seem.

How are inherited values computed?

A great read on cascading and inheritance is the CSS Cascading and Inheritance Level 3 spec: https://www.w3.org/TR/css-cascade-3/. It states that:

The inherited value of a property on an element is the computed value of the property on the element’s parent element.

Based on the spec, here's my simplified version of the process of determining the computed value for any property on any element:

1. Collect all the declared values for a property on an element - i.e. all the relevant and valid CSS declarations found in developer stylesheets and style attributes, user agent stylesheets, etc.

2. Determine the cascaded value - the winning value of all the declared values (this is where rules are prioritised and a single one comes out on top).

3. If there is no cascaded value, use the inherited value if the property is inherited.

4. If the property is not inherited (see this question for a list of properties that are inherited by default: Which CSS properties are inherited?), use the initial value. Each and every property has an initial value according to the spec (e.g. the initial font-size is medium; worth noting that it is not an absolute value like 16px!).

5. At this point a property will have some value assigned to it, but it may be a relative value, i.e. dependant on some other CSS properties (e.g. a percentage value depends on some absolute value, such as the parent's absolute dimensions). At this step a value will be resolved as far as possible so that it is unambiguous and ready for inheritance.

   It is important to note that just like the spec defined an initial value for every property, it also defines how to derive the computed value. E.g. MDN specified this computed value for font-size:

as specified, but with relative lengths converted into absolute lengths

So medium remains medium, but 1.2em becomes, say 19.2px (if the parent's font size is 16px).

The important bit

The same Cascading and Inheritance spec points out that:

The computed value exists even when the property does not apply (as defined by the “Applies To” line). However, some properties may change how they determine the computed value based on whether the property applies to the element.

So every element will have a computed value for every property, but may not use it (the so-called used value, which is the next step after computed value, is none). The computed value is what will be inherited.

What all this means for my SVG button example:

1. I am definitely allowed to set stroke and fill on a <button>. It will ignore this property when rendering itself, but will pass it on to its children, if required.
2. The child SVG will inherit these properties by default (I don't even need to explicitly specify that).
3. The computed values for stroke and fill do not have any caveats so I can expect the correct colour to be inherited (and it is!).

How to get all CSS of element

MyDiv001.style.cssText will return only inline styles, that was set by style attribute or property.

You could use getComputedStyle to fetch all styles applied to element. You could iterate over returned object to dump all styles.

function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return s;
}

---

Related Topics