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.)

Answer 1

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; }