Geek Answers Handbook

How to CSS select every first div without class after div with class?

How to CSS select every first div without the next class after a div with a specific class? Example:

<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div> <!-- must be selected -->
<div></div>
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div> <!-- must be selected -->
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div> <!-- must be selected -->
<div class="someclass"></div>
<div class="someclass"></div>
<div></div> <!-- must be selected -->
<div></div>
<div></div>
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>

Is it possible to select it without JS / jQuery?

+4
source share
7 answers

try https://jsfiddle.net/jr9wsr49/

CSS

.someclass + div:not(.someclass) {
  background:green
}
+3
source

you can try using the following CSS

   .someclass + div:not(.someclass, .someclass) {
    }

Usage can pass multiple values ​​in a non-selector if you have different classes in this structure

+6
source

:not()

: https://css-tricks.com/almanac/selectors/n/not/

div{
  width: 100%;
  height: 50px;
  background-color:yellow;
  border: 1px solid #ccc;
}
.someclass + div:not(.someclass) {
  background-color: red;
}
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div>
<!-- must be selected -->
<div></div>
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div>
<!-- must be selected -->
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div class="someclass"></div>
<div></div>
<!-- must be selected -->
<div class="someclass"></div>
<div class="someclass"></div>
<div></div>
<!-- must be selected -->
<div></div>
<div></div>
<div></div>
<div class="someclass"></div>
<div class="someclass"></div>
Hide result
+3

.

, , css, HTML, , .

, HTML- CMS, , <br /> <p> (, Wordpress), css-, , . ( ) html. , , .

jsfiddle <p class="some-unexpected-future-situation"></p>, , css

, HTML CSS. HTML , <div> , css , .

jsfiddle - , , HTML CSS ?

, , , :not, IE 9.

+1

As far as I understand the OP, he wants to target only every first vanilla <div>immediately following <div class="someclass">, and that they specifically want to target this <div>one only if it has no class , instead of not .someclass.

This can be achieved using a combination :not, an attribute selector, and an adjacent sibling selector +:

.someclass + div:not[class] {
    /* put your styles here */
}
+1
source

Yes, this is possible with CSS. Check selector :not:

.someclass + :not(.someclass){
     /* style here */
}
0
source

use the selector: not () ...

div.someclass+div:not(.someclass) {color: red;}
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<!-- must be selected -->
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<!-- must be selected -->
<div>Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<!-- must be selected -->
<div class="someclass">Lorem Ipsum</div>
<div class="someclass">Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<!-- must be selected -->
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div class="someclass"></div>
<div class="someclass"></div>
Run codeHide result
0
source

More articles:


All Articles