css modification (can use ! not)?

Question

I can do .one.two and that targets any element with the class "one" AND the class "two" right?

What if I want to target any element with class "one" but that can't be coupled with "two" ? eg .one !.two or something like that.

Thx all.

score 2 · Answer 1 · edited May 23 '17 at 12:19

2

Try the :not pseudo-class

Or use a negation class: Is there any way to get the CSS :not() selector working in IE and Chrome?

edited May 23 '17 at 12:19

Community

1
1

answered Apr 04 '11 at 20:41

Thomas Li

3,358
18
14

score 2 · Accepted Answer · answered Apr 04 '11 at 20:41

2

CSS3 includes :not(), but it's not yet supported by IE, I think. Works in recent versions of other browsers:

.one:not(.two) {
  //your styles
}

answered Apr 04 '11 at 20:41

Jacob Mattison

50,258
9
107
126

I may try your css3 approach using some jquery (wouldn't be the first time). not preferable, but I'll take it. Thanks. – Jacksonkr Apr 04 '11 at 20:57

score 2 · Answer 3 · answered Apr 04 '11 at 20:46

2

.one {background: red;}
.two {background: green;}
.one.two {background: blue;}

I don't see why you'd need 'not' there as .one would style the same as .one but not .two. If you are already using multiple classes, you should be good to go.

answered Apr 04 '11 at 20:46

DA.

39,848
49
150
213

this would have worked, but I'm working with JS gen classes (builds up to 12 sometimes) so using :not is easier than taking the logical approach. thanks for the good answer though! – Jacksonkr Apr 04 '11 at 20:56
Hmm...perhaps expand your question with a larger example so we can get an idea of your ultimate goal. There might be a different way to think about this. – DA. Apr 04 '11 at 20:59

score 0 · Answer 4 · answered Apr 04 '11 at 20:58

It sounds like you need to read about specificity.

.one will select all class="one" elements, .two will select all class="two" elements.

.one.two will select all class="one two" elements and will override any rules that may have been set for .one or .two for that element.

The .one:not(.two) selector will perform the negation you desire, but it's not cross-browser compatible.

The most cross-browser compatible way of adding a rule like .one:not(.two) is to add an override:

.one
{
  color: blue;
}

.one.two
{
  color: black;
}

css modification (can use ! not)?

4 Answers4