CODEWITHSUNDEEP
css
Knubie
Knubie

Reputation: 23

CSS Not Selector: Select All Except Inside of Element

I have the class "item" appearing throughout the page. The styling is the same throughout the page. However, I don't want the styling to be applied when it appears in an element with the class "group". I'd really like to use the :not pseudo selector so I don't have to create another style for this special case.

CSS

.item, .group div:not(.item){
    color:red;
}

HTML

<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

Upvotes: 2

Views: 2845

Answers (3)

Chad
Chad

Reputation: 5418

This isn't a perfect solution, but you could target the .group div and say something like: 

div:not(.group) .item {
    color: red;
}

Here's a fiddle to play with it: http://jsfiddle.net/jqxgetsj/

The only constraint is that you have to have direct parent selectors or something rather targeted.

Upvotes: 1

passatgt
passatgt

Reputation: 4432

Theres no parent selector in CSS, so you can't go inside out. Theres a child selector though, which can be used great in your example:

body > .item {
    color:red;
}
<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207901

You could use the initial value and do it this way:

.item {
    color:red;
}
.group div.item {
    color:initial;
}
<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

Upvotes: 1

Related Questions