0

While doing codes something like below:

document.querySelector('input[type=text]').addEventListener('focus', function() {
  document.querySelector('#deletebutton').style.display = 'none'
})
input[type=text]:focus+#deletebutton {
  display: block;
}

input[type=text]:not(:focus)+#deletebutton {
  display: none;
}
<input type='text'>
<button id='deletebutton'>delete</button>
what is looks like with JS event: 

input[type=text]:focus+#deletebutton {
  display: block;
}

input[type=text]:not(:focus)+#deletebutton {
  display: none;
}
<input type='text'>
<button id='deletebutton'>delete</button>

It seems like JS has more control (higher priority) than CSS does to the HTML button. The input will follow the rule for JS eventListener and ignore the CSS pseudo-class (:focus).

Does this means CSS has less priority than JS?

Or the css focus event is a selector, but JS it is an eventListener where eventListener is more important?

Or I should put the script in the header before the css stylesheet (now i put it in the body)

Or all my attempt is wrong?

vvvvv
  • 25,404
  • 19
  • 49
  • 81
James
  • 2,732
  • 2
  • 5
  • 28
  • 1
    The word you're looking for is "specificity"—which refers to the priority in which styles are applied to an element. Adding styles to an element via JavaScript sets them as inline styles via the `style` HTML attribute. Inline styles have higher specificity than other styles. – Sean Apr 03 '22 at 17:50
  • It's not JS having priority over CSS, it's the inline setting (using style) which has priority. – A Haworth Apr 03 '22 at 17:53
  • 2
    `element.style.cssText = str` is also just an inline style. Setting it is the same as if you did `element.setAttribute('style', str)` – connexo Apr 03 '22 at 18:22
  • 1
    Close voters only read the title of the question and not the body. I've update the title to match the body. This question shouldn't have been closed. – Sean Apr 04 '22 at 02:02

1 Answers1

2

CSS gets applied based on the principle that "the most specific rule wins", explained in detail over on https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

When you directly manipulate one, and only one, element's styling, either through JS by working with element.style or through HTML by having a style attribute: that is the most specific you can get. Those values will always "win".

The only exception is if you're directly setting values that you also have regular CSS for, marked as !important. However, if you find yourself needing !important that's a good indication that you've probably modeled your cascade or even your element tree wrong.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Interesting and tahnks, I check the mdn document again. It seems more likely like the id v.s. class v.s element in css. So, based on your answer, does that mean JS is more important? do you mind explain more a little bit? – James Apr 03 '22 at 17:56
  • No, it's not, it's still about specificity: ids are more specific than classes, and so will win. But the style attribute (and note that the HTML style attribute and JS style property point to _the same thing_) is even more specific than ids, and so _that_ will win. – Mike 'Pomax' Kamermans Apr 03 '22 at 17:58
  • 1
    Quoting MDN: 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. – Jakub Kotrs Apr 03 '22 at 17:59
  • @Mike'Pomax'Kamermans, thanks that make more sense, So I could just understand like other people mentioned in the comment that `Adding styles to an element via JavaScript sets them as inline styles `? – James Apr 03 '22 at 18:03
  • Yes, because that's literally what's happening. The HTML `style="..."` and the JS `element.style.[...] = ...` work with the same underlying styling object for a specific DOM node. HTML is (by definition) a setter only, whereas JS can both get and set. – Mike 'Pomax' Kamermans Apr 03 '22 at 18:05
  • Thanks, so is it the same idea for `cssText`? – James Apr 03 '22 at 18:07
  • 1
    You tell me: where does `.cssText` live? Because that will let you answer that question yourself already, by remembering that CSS application is all about specificity. – Mike 'Pomax' Kamermans Apr 03 '22 at 18:07
  • @Mike'Pomax'Kamermans, in my understanding that cssText is just like teh style Tag, it direcely over write it? So does that mean it has less specifity? – James Apr 03 '22 at 18:11
  • There are several `.cssText` properties, so: again, you tell me. Which one? `CSSStyleDeclaration.cssText`? `CSSRule.cssText`? `CSSValue.cssText`? – Mike 'Pomax' Kamermans Apr 03 '22 at 18:12
  • Sorry for the confusion, like the way this answer use: https://stackoverflow.com/a/3968772/17743647 – James Apr 03 '22 at 18:14
  • 1
    That's [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration), so read up on what `CSSStyleDeclaration` represents, and you will have your answer. (hint: look for "A CSSStyleDeclaration object can be exposed using three different APIs") – Mike 'Pomax' Kamermans Apr 03 '22 at 18:15