When writing code like the example 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>input[type=text]:focus+#deletebutton {
display: block;
}
input[type=text]:not(:focus)+#deletebutton {
display: none;
}<input type='text'>
<button id='deletebutton'>delete</button>It appears that JavaScript has more influence (higher priority) than CSS on the HTML button. The input element will adhere to the JavaScript eventListener rule and disregard the CSS pseudo-class (:focus).
Does this mean that CSS is less important than JavaScript?
Is the CSS focus event just a selector, while in JavaScript it's an eventListener which holds more significance?
Should I place the script in the header before the CSS stylesheet (currently placed in the body)?
Or am I completely off track?