CSS3 псевдо класс не первый и не последний ребенок

Question

У меня есть следующий HTML-код:

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

Как я могу использовать псевдо-классы CSS3, чтобы сделать любой li элемент, который не является первым или последним, имеет background-color из tomato например? Кажется, я мог бы использовать :not селектор.

Answer 1

Два пути:

Вы можете установить общее правило, а затем переопределить его для :first-child а также :last-child Предметы. Это играет на сильные стороны CSS:

 li { background: red; }
 li:first-child, li:last-child { background: white; }

Или вы можете использовать :not комбинированное ключевое слово, объединяющее два:

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

Из двух я лично предпочитаю первый - его легче понять и поддерживать (на мой взгляд).

Answer 2

Вот ручка http://codepen.io/vendruscolo/pen/AeHtG

Вы должны объединить два :not() псевдо-классы:

li:not(:first-child):not(:last-child) {
  background: red;
}

Вот документация MDN: как там указано, она не поддерживается в IE < 9, хотя она хорошо поддерживается в других браузерах.

Если вам нужна поддержка IE 8, вы должны полагаться на Javascript или использовать другой класс, чтобы указать, какой элемент является последним дочерним элементом. На самом деле, IE 8 (и ниже) не поддерживает :last-child псевдо класс.

Answer 3

Это работает для меня

.candidate_verified_items ul li:not(:last-child),
.candidate_verified_items ul li:first-child:not(:last-child) {
   border-right: 1px dashed #7b8db9;
}