CSS [ Negate the parent element ]

Question

Can I do the following:

.content:not([class="no-touch"]) {

    .content-index-container {

        .chr-selector {

            select {
                margin-top: 5px;
            }
        }
    }
}

when the no-touch class in not in the content class, but the other way around.

I know that my CSS won't work because it's wrong, but how can I achieve what I'm trying to do: style the content but ignore the styling if the content it's not within the touch class? (Modernizr appends the class to the HTML if touch devices are detected.)

Or maybe something like this : `:not(.no-touch > .content)` ? — Roland, Oct 17 '12 at 08:51
i think the easiest option is to work with two separate stylesheet, if that is possible in the system you work with. Or you could overwrite one style with the other, but then you'll have to write those stylerules twice. Or if you like the syntax you proposed, you could try LESS or SASS. — besluitloos, Oct 17 '12 at 08:53
Sorry, I don't have any experience with LESS, But I thought i recognized the format... As you prefer to avoid JS (your comment below), I would recommend write and overwrite your styles with the no-touch class, or use two different stylesheets. — besluitloos, Oct 17 '12 at 09:03

score 3 · Accepted Answer · answered Oct 17 '12 at 08:55

You could reverse your thinking and modify the no-touch child instead....

select { margin-top: 5px; }
.content.no-touch .content-index-container .chr-selector select {
    margin-top: 0;
}

or

select { margin-top: 5px; }
.content.no-touch select {  margin-top: 0; }

Mild Fuzz · Answer 2 · 2012-10-17T09:00:44.647

1

No, I am afraid not. Javascript is your friend or add extra classes to your markup.

edited Oct 17 '12 at 09:00

answered Oct 17 '12 at 08:48

Mild Fuzz

29,463
31
100
148

1

I was thinking the same .... god damn it ... so I cannot use the `:not()` css selector like this ... ? – Roland Oct 17 '12 at 08:50
1

@Roland: Nope, you can't. You can, however, use it in that manner in a JavaScript library like jQuery: http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css – BoltClock Oct 17 '12 at 08:56
I kind of prefer avoiding JS as much as possible (: – Roland Oct 17 '12 at 08:58

CSS [ Negate the parent element ]

2 Answers2