CSS Apply Styling to All Elements Except Those in The Last Row

div:not(#bar){    color:red;}

<div>foo</div><div id="bar">bar</div>

CSS nth-child expression to avoid the last row with at most 3 elements

So far, I've created a selector that applies a style to the last row

/* all the cells */
li {
   background: #ccc;
}

/* last row, doesn't matter how many cells */
li:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li /* all its following elements */
{
   /* reset the style, eg: */
   background: transparent;
}

You can see a live example here http://jsbin.com/ufosox/1/edit

Of course this doesn't support IE8 and less.

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.

Is there any way to specify a CSS shorthand for all elements except the first/last?

For all p elements except the first child, use either one of these (the second one is better-supported):

p:not(:first-child)
p:first-child ~ p

For all p elements except the last child:

p:not(:last-child)

For all p elements except the first and the last children:

p:not(:first-child):not(:last-child)

As usual, CSS3's :not() and :last-child aren't supported until IE9+ and relatively new versions of other browsers. You're not going to reach very far in terms of browser support (IE8 and older) unless you add classes to your first and last children, using JavaScript or otherwise.

Remember that vertical margins collapse between in-flow paragraphs and their ancestor(s), so unless you want to zero out the margins of the container element for these paragraphs as well, you shouldn't need to zero out the margins of the first and last p elements specifically. Here's a fiddle to illustrate.

how to select even rows and exclude last column

You can target the tr elements that are even with tr:nth-child(even) followed by excluding the last td td:not(:last-child), the selector becomes tr:nth-child(even) td:not(:last-child)

tr:nth-child(even) td:not(:last-child) {  background-color: #f00;}

/** only for demo purposes **/
table,tr,td {  border: 1px solid #000;}
td {  padding: 8px;}

<table>  <tr>    <td>1</td>    <td>name</td>    <td>age</td>    <td>country</td>    <td id="rmv"><button>remove</button></td>  </tr>  <tr>    <td>1</td>    <td>name</td>    <td>age</td>    <td>country</td>    <td id="rmv"><button>remove</button></td>  </tr>  <tr>    <td>1</td>    <td>name</td>    <td>age</td>    <td>country</td>    <td id="rmv"><button>remove</button></td>  </tr>  <tr>    <td>1</td>    <td>name</td>    <td>age</td>    <td>country</td>    <td id="rmv"><button>remove</button></td>  </tr></table>

.box:not(:last-of-type) > .row {    color: red;}

<ul class="box">    <li class="row">One</li>    <li class="row">Two</li>    <li class="row">Three</li>    </ul><ul class="box">    <li class="row">FOur</li>    <li class="row">Five</li>    <li class="row">Six</li>    </ul><ul class="box">    <li class="row">Seven</li>    <li class="row">Eight</li>    <li class="row">Nine</li>    </ul>