Referring to CSS Selectors in Javascript

Question

So, in my HTML document I have a button. It's styled in CSS normally, but I also have two pseudo classes to style it, ":not(:hover)" and ":hover". When I need to make an onclick function to have an effect with this button, do I need to use the name ".button:hover", or does "button" affect all of the others pseudo classes as well?

Answer 1

Defining css rules for an element such a button give it default styling, and will be applied to the different states possible until you overwrite them with explicit target...

In the next code examples, I will use 'button' but it could be 'input[type=button]' or anyway an id or a class (to not say more complex targeting rule build with combination of all ^^). So, take this css code:

button { background:red; }

This will fill all <button> element with a red background, for all its different states (ie. with any css pseudo selector...

Adding this:

button:hover { background:yellow; }

... will overwrite the default previous definition for the specific state targeted (:hover correspond to pointer -- cursor -- moving upon the element).

So, the selector 'button:not(:hover)' will target the element in all states except the 'hover' one: not exactly the same as a simple 'button', but very near ;) (in most of the cases, it could be define with the simplest form)

The other important thing to know is about how the rules can or not overwrite other definition:

+ first rule is very obvious: later declaration will have more priority than sooner... take this:

button { background:red; }
button { background:yellow; }

... all button will be yellow ^^

+ second rule is that each selector get a kind of score measuring how much priority attribute to a selector rule, so highest prirority declaration can overwrite later declaration:

button.myclass { background:red; }
button { background:yellow; }

... first rule define a yellow background for all <button>s with a class 'myclass'; second will set a red background to all <buttons>. Anyway, the first rule isn't overwrite by this second one because it have more weight (an element selector + an class selector rather than only ond element selector)

Rules for calculating the weight of selectors isn't obvious, and I advise you to dive into css references to get more accurate informations about it and the related stuff than my poor memory can :P