Подскажите почему bobik:not(:last-of-type)
'не работает' когда после div-а с классом бобик есть div без класса. Я же в CSS делаю выборку по классу, а не по div-ам
Как сделать чтобы стили применялись ко всем блокам с классом бобик, кроме последнего блока с этим классом. БЕЗ ВВОДА ДОПОЛНИТЕЛЬНЫХ КЛАССОВ
HTML
<div class="main">
<div class="bobik">1 --- 'DIV' WITH CLASS "bobik"</div>
<div class="bobik">2 --- 'DIV' WITH CLASS "bobik"</div>
<div class="bobik">3 --- 'DIV' WITH CLASS "bobik"</div>
<div>4 --- 'DIV' WITHOUT CLASS</div>
<p>5 --- 'P' WITHOUT ANY CLASS</p>
<div class="bobik">6 --- 'DIV' WITH CLASS "bobik"</div>
<div class="bobik">7 --- 'DIV' WITH CLASS "bobik"</div>
<div>8 --- 'DIV' WITHOUT CLASS</div>
<div class="bobik">9 --- 'DIV' WITH CLASS "bobik"</div>
</div>
CSS
.main{
display: flex;
flex-flow: column nowrap;
margin: 20px;
max-width: 500px;
border: 1px solid #ccc;
background: #fff;
border-radius: 3px;
font-family: 'Roboto', sans-serif;
}
div{
background: silver;
margin-bottom: 5px;
padding: 10px;
}
.bobik{
border-radius: 3px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
.bobik:not(:last-of-type){
background: #9ED3E9;
font-weight: bold;
}
И так же на фидле есть код