Я написал что-то вроде этого в CSS:
tr.red > td:not(:last-of-type):not(:first-of-type)
{
color: #E53B2C;
border-bottom: 4px solid #E53B2C;
}
Я пытаюсь применить это к ячейкам таблицы, которые не являются первыми и не последними в строке с классом .red.
Кажется, он работает так, как ожидалось, но действительно ли это правильный способ?
Синтаксически корректно, так как вы можете быстро проверить с помощью W3C CSS Validator. Известно, что валидатор имеет ошибки, поэтому в принципе вы должны проверить правило на спецификации CSS, особенно Селекторы уровня 3. В результате все еще есть да, это правильно.
Он также имеет желаемое значение, поскольку именно так сочетаются селекторы. Вы можете использовать селектор :not(...), чтобы выразить условие типа "не... и не...".
Это применяется при условии, что все дочерние элементы tr являются td. Если есть также элементы заголовка, то есть th, то селектор применяется к этим ячейкам данных (td), которые не являются первой ячейкой данных или последней ячейкой данных в строке с классом .red.
Возможно, это поможет
tr.red td:not(:first-child):not(:last-child)
{
//your styles
}
Как сказали некоторые, 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, и придать ему другой стиль.