I would like to stack more than one class in not() selector but ,;: does not work.
input[type=text]:hover:not(.ui-pg-input .mandatory){ background-color: #D9EDF7;}
So, what is proper way to stack classes in css not() selector?
Add a comment
|
2 Answers
Two syntactic alternatives:
- use two classes in one
:notoperator:
input[type=text]:hover:not(.ui-pg-input.mandatory){background-color: #D9EDF7;}
(note the removed blank between the classes)
- use the
:notoperator twice:
input[type=text]:hover:not(.ui-pg-input):not(.mandatory){background-color: #D9EDF7;}
Note however that both have different meaning: the first uses an or operator, so it matches all elements not having both classes (so having none or one), whilst the second uses an and operator, thus matching all elements not having one or the other class (so having none). So it depends on what you want to do...
1 Comment
Chris O'Kelly
a note - I don't think #1 works, even though it seems like it should. I am still trying to figure out how to do exactly what this answer suggests #1 does (apply a rule if element has neither class a nor class b, or only one of them, but not both), See here for an example: jsfiddle.net/9jhu0qc5/1 - if this worked you would expect the first 2 boxes to have a black border, but not so.
You can use twonot() to do this example:
p:not(.class_one):not(.class_two){
p:not(.one):not(.two){
color:red;
}<p class="one">Text</p>
<p class="two">Text</p>
<p class="three">Text</p>