CSS specificity when Javascript modifies CSS?

Question

What is the CSS specificity when Javascript modifies CSS?

Such as:

document.getElementById("demo").style.color = "red";

Is it considered inline styling?

@Quentin The CSS is set at the element `style` attribute, that carries the most weight. Can you explain how the comment is "completely wrong"? — guest271314, Feb 12 '19 at 16:39
@guest271314 — Yes … but less weight than the ID selector your comment implied would give it. — Quentin, Feb 12 '19 at 16:41
@Quentin The CSS is set at the element itself. `#demo` at the comment refers to the HTML element itself, not `#demo` CSS selector in a style sheet, which the CSS set at the element will override. `#demo` was used to refer to the HTML element because no HTML appears at the question. — guest271314, Feb 12 '19 at 16:42
Inline styles added to an element (e.g., `style="font-weight: bold;"`) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types — ksav, Feb 12 '19 at 16:44
@ksav, "can be thought of as having the highest specificity" not quite. `!important` increases specificity equally, so a stylesheet could override inline styles with `!important`, but inline styles could override the stylesheet by _also_ adding `!important`. — zzzzBov, Feb 12 '19 at 16:53
@zzzzBov You're right. I guess that's the next section of the linked document ;) — ksav, Feb 12 '19 at 17:01

score 6 · Accepted Answer · answered Feb 12 '19 at 16:39

CSS specificity when Javascript modifies CSS?

Exactly the same as if you modified the CSS by editing the original source code instead of using JS.

document.getElementById("demo").style.color = "red";

In this case, you are modifying the styles attached directly to the element.

<div id="demo" style="color: red">

So maximum specificity. (count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector)

If you had used JS to modify a ruleset, then the specificity would be different.

score 3 · Answer 2 · answered Feb 12 '19 at 16:47

The style property on DOM nodes is essentially an accessor/mutator for the style attribute for those DOM nodes.

For purposes of this answer consider node.style.color = 'red' to be equivalent to node.setAttribute(node.getAttribute('style') + ' color: red')*.

With that the question can be reframed as

What is the CSS specificity of rules in a style attribute?

So of course the answer is that the spec defines this behavior

A selector's specificity is calculated as follows:

...

Note: the specificity of the styles specified in an HTML style attribute is described in CSS 2.1. [CSS21].

_{Yo dawg, I heard you liked specs}

From CSS 2.1:

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

_{emphasis mine}

So the actual calculated specificity of document.getElementById("demo").style.color = "red"; is 1,0,0,0

_{* This is of course ignoring existing rules within style.}

score 2 · Answer 3 · answered Feb 12 '19 at 16:35

2

Through JavaScript you are modifying the DOM tree ( Html File ) not the CSS file, hence it is inline styling.

Generally inline styling in this way is not frowned upon as inline styling on a static HTML document.

answered Feb 12 '19 at 16:35

edward

142
1
6

CSS specificity when Javascript modifies CSS?

3 Answers3