Выберите все, кроме первого и последнего элемента td, в одном селекторе

Я написал что-то вроде этого в CSS:

tr.red > td:not(:last-of-type):not(:first-of-type)
{
    color: #E53B2C;
    border-bottom: 4px solid #E53B2C;
}

Я пытаюсь применить это к ячейкам таблицы, которые не являются первыми и не последними в строке с классом .red.

Кажется, он работает так, как ожидалось, но действительно ли это правильный способ?

Ответы

Ответ 1

Синтаксически корректно, так как вы можете быстро проверить с помощью W3C CSS Validator. Известно, что валидатор имеет ошибки, поэтому в принципе вы должны проверить правило на спецификации CSS, особенно Селекторы уровня 3. В результате все еще есть да, это правильно.

Он также имеет желаемое значение, поскольку именно так сочетаются селекторы. Вы можете использовать селектор :not(...), чтобы выразить условие типа "не... и не...".

Это применяется при условии, что все дочерние элементы tr являются td. Если есть также элементы заголовка, то есть th, то селектор применяется к этим ячейкам данных (td), которые не являются первой ячейкой данных или последней ячейкой данных в строке с классом .red.

Ответ 2

Возможно, это поможет

tr.red  td:not(:first-child):not(:last-child)
{
//your styles
}

Пример

Ответ 3

Как сказали некоторые, td: first-of-type дает вам первый TD, где td: first-child выбирает первый дочерний элемент этого tR, если он TD. Это означает, что ваш код не даст вам всех ячеек, которые не являются первыми или последними, если у вас есть TH.

tr.red > *:not(:last-child):not(:first-child)
    { /* ... your css code ... */ }

Я думаю, что это будет хорошо работать. Даже если вы хотите иметь отдельный код для TH и TD, вы можете сделать это как th: not (: first-child) и td: not (: first-child). Ваш код будет лучше, если вы захотите найти первый элемент с некоторым именем тега, например p: first-of-type, и придать ему другой стиль.