Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Select all except first and last td element in one selector

Select all except first and last td element in one selector

Problem

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?

Problem courtesy of: Kamil

Solution

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.

Solution courtesy of: Jukka K. Korpela

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Select all except first and last td element in one selector

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×