Middle Child Pseudo-Class

Question

Есть ли способ использовать селектор CSS для получения среднего ребенка в списке элементов?

Я знаю, что нет литерала :middle-child селектор, но есть ли другой способ, не прибегая к Javascript?

Answer 1

Javascript - это единственный способ сделать эту клиентскую сторону.

Answer 2

Вы попробовали :nth-child(#)?

В зависимости от того, какой из них вы хотите выбрать, вы просто замените # номером.

Answer 3

Если вы хотите применить стиль ко всем элементам, которые не являются ни первыми детьми, ни последними детьми, вы можете использовать :not(:first-child), применить стиль, а затем использовать :last-child, чтобы «удалить стиль» из последнего элемента. Но вам нужно подумать о том, что происходит, когда есть менее 3 элементов.

Answer 4

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

*:not(:first-child):not(:last-child) { 
    ... 
} 

Вы можете увидеть пример этого здесь: http://codepen.io/bentomas/pen/Gwqoe

Одно предостережение к этому является то, что он работает только в IE 9+: http://caniuse.com/#feat=css-sel3

Answer 5

Хотя вы не изящны, если вы знаете верхние и нижние пределы общего количества элементов, вы можете применить подход грубой силы, чтобы выбрать средний элемент.

Например, следующие правила будут выбирать средний элемент в наборе из 5, 7 или 9 элементов.

div:nth-child(3):nth-last-child(3) { 
    /* The middle element in a set of 5 is the 3rd element */ 
} 

div:nth-child(4):nth-last-child(4) { 
    /* The middle element in a set of 7 is the 4th element */ 
} 

div:nth-child(5):nth-last-child(5) { 
    /* The middle element in a set of 9 is the 5th element */ 
} 

Или с Sass:

@for $i from 3 through 5 { 
    div:nth-child(#{$i}):nth-last-child(#{$i}) { 
     /* The middle element */ 
    } 
} 

Answer 6

Вы можете использовать "не первый и не последний" подход, например, так:

CSS

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

HTML

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul> 

Проверить JsFiddle