Middle Child Pseudo-Class

Question

Is there a way to use CSS selectors to get the middle child in a list of elements?

I know that there is no literal :middle-child selector, but is there another way without resorting to Javascript?

Answer 1

This has been working well for me:

*:not(:first-child):not(:last-child) {
    ...
}

You can see an example of this here: http://codepen.io/bentomas/pen/Gwqoe

The one caveat to this is that it only works in IE 9+: http://caniuse.com/#feat=css-sel3

Answer 2

While not elegant, if you know the upper and lower limits of the total number of elements, you could take a brute force approach to select the middle element.

For example, the following rules will select the middle element in a set of 5, 7, or 9 elements.

div:nth-child(3):nth-last-child(3) {
  /* The middle element in a set of 5 is the 3rd element */
}

div:nth-child(4):nth-last-child(4) {
  /* The middle element in a set of 7 is the 4th element */
}

div:nth-child(5):nth-last-child(5) {
  /* The middle element in a set of 9 is the 5th element */
}

Or with Sass:

@for $i from 3 through 5 {
    div:nth-child(#{$i}):nth-last-child(#{$i}) {
        /* The middle element */
    }
}