Select All Except First and Last Td Element in One Selector

Select all except first and last td element in one selector

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.

How to select not first tr and not last td

Use the :not(), :first-child and :last-child.

#myTable tr:not(:first-child):hover td:not(:last-child) {
      background: #dfdfdf;
}

Also see this example.

CSS select all preselected elements except the last of them

Unfortunately, after further reading I came to a conclusion that as of now it's not possible to achieve what I want with pure CSS. There is hope for (near?) future though.

What I want to achieve can be "simplified" by, first, hiding everything, then overriding that styling only for one or two selected items (thanks @Kaiido for your comment to OP). For now, out of 4 possible cases (required overrides), css can handle only 3:

last item in full true list with [data-attr="true"]:last-child,
first item in full false list with [data-attr="false"]:first-child,
first false item in mixed list with [data-attr="true"]+[data-attr="false"]

For the 4th case, this draft has to become working standard and be implemented by major browser engines:

last true item in mixed list with :has(+[data-attr="false"]) (I hope that's the right code for current draft).

There are ways to simulate "previous sibling selector" functionality, although that won't work when you need both previous and next sibling selectors. More on that here

Example below (I've grayed out items instead of hiding them so that original lists are visible):

div {  border: 1px solid red;  margin: 5px;}
/* virtual display: none; on every item */.container .item {  background: gray;}
/* "unhiding" required items */.container .item[data-attr="true"]:last-child,.container .item[data-attr="false"]:first-child,.container .item[data-attr="true"]+[data-attr="false"]{  background: lime;}
/* 4th case, that might work in the future with introduction of CSS selectors level 4 */.container .item[data-attr="true"]:has( +[data-attr="false"] ){  background: lime;}

<!DOCTYPE html><html lang="en" dir="ltr"><head>  <meta charset="utf-8"></head><body>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="true">3 true</div>    <div class="item" data-attr="true">4 true</div>  </div>  <div class="container">    <div class="item" data-attr="false">1 false</div>    <div class="item" data-attr="false">2 false</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div></body></html>

How to select first and last TD in a row?

You could use the :first-child and :last-child pseudo-selectors:

tr td:first-child,
tr td:last-child {
    /* styles */
}

This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).

Select all 'tr' except the first one

By adding a class to either the first tr or the subsequent trs. There is no crossbrowser way of selecting the rows you want with CSS alone.

However, if you don't care about Internet Explorer 6, 7 or 8:

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

Select all tr except last and first ones with .on()

:first and :last match the first and last element in the jQuery object. Since you're using on(), that selector will be evaluated in the context of a jQuery object containing a single element (the event target). Therefore, that element will never be matched, as it is both the first and last item in the set.

Contrast :first-child and :last-child, which match the first and last element in the parent element. Using them should solve your problem:

$("#id").on("click", "td:not(:first-child, :last-child)", callback);

jquery selecting all elements except the last per group

Use this:

$('tr td:not(:last-child)').css('background-color', 'red');

It's saying each <td> that's not the last in that particular <tr>

Select All Except First and Last Td Element in One Selector