Select all except first and last td element in one selector

Question

I wrote something like this in CSS:

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

I'm trying to apply this to table cells, which are not first and not last in the row with .red class.

It seems to work as expected, but is this really the right way to do it?

Answer 1

May be this would help

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

Sample

Answer 2

As some have mentioned, td:first-child selects the first child element of the parent TR if it is a TD, whereas td:first-of-type selects the first TD regardless of any TH that may come before it.

As a result, if you have any TH elements in your rows, your code won't give you all the cells that aren't first or last.

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

I think it should work well this way. Even if you wanted to have separate code for TH and TD, you could do it like th:not(:first-child) and td:not(:first-child).

Typically, :first-of-type is more intuitive when you want to style the first instance of a tag name, (like p:first-of-type).

Answer 3

It is syntactically correct, as you can quickly check using the W3C CSS Validator. The validator is known to have errors, so in principle, you should check the rule against CSS specifications, especially Selectors Level 3. The result is still that yes, it is correct.

It also has the desired meaning, since this is how selectors combine. You can use :not(...) selectors to express a condition of type “not ... and not ...”.

This applies provided that all children of tr elements are td. If there are header cells, i.e. th elements as well, then the selector applies to those data cells (td elements) that are not the first data cell or the last data cell in a row with .red class.