Как применить несколько селекторов css в одном правиле

Question

Если я допустим хочу выбрать элемент который будет являться не первым и не последним в моем родительском блоке .main, то как объеднить два селектора в один?

.main :not(:last-child),
.main :not(:first-child) {
 background: blue;
}

Я пробовал так, но я понял что он безсмысленный и выбирает все элементы

Answer 1

Вот вам пример как вы можете это сделать

.main {
  display: flex;
  justify-content: space-between;
}

.child {
  width: 40px;
  height: 40px;
  background: red;
}

.main .child:not(:first-child):not(:last-child) {
  background: green;
}

<div class="main">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

БЛОГ НА HUSL

Как применить несколько селекторов css в одном правиле

Ответы (1 шт):