Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select all children except first and last with CSS selectors

How would I select all the children in a table except for the first and last? I've tried this, but it ends up selecting all children that aren't first and all children that aren't last, which ends up being all children:

table.programs tr td:not(:first-child), table.programs tr td:not(:last-child) { } 

I want all children that are neither first nor last. How can I do this?

like image 528
gsingh2011 Avatar asked Dec 20 '12 21:12

gsingh2011


People also ask

How do you select all child elements in CSS except last?

When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.

How do you select all children except first?

To select all child elements except the first with JavaScript, we can use jQuery with the not pseudo-selector to select all elements except the first element. and we want to select the last 2 li elements, then we can write: $("li:not(:first-child)").

How do I apply CSS to all elements except one?

Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.

How do you select every element except first?

By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.


2 Answers

Use two :not() selectors combined, thereby referring to elements that match both of them, i.e. to elements that match neither of the selectors used as operands of :not():

table.programs td:not(:first-child):not(:last-child) 
like image 193
Jukka K. Korpela Avatar answered Sep 25 '22 08:09

Jukka K. Korpela


The jQuery solution is fine, but if you want to do it in pure CSS I'd suggest you to apply the rules to the whole table and then reset them for the first and last children. i.e:

table.programs tr td {    /* your rules here */ }  table.programs tr:first-child td:first-child,  table.programs tr:last-child td:last-child {   /* reset your rules here */ } 

jsFiddle demo

like image 43
Simone Avatar answered Sep 26 '22 08:09

Simone