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?

Sharkskin

Does the number of children change? – Batrachian

The number of elements is set at page load and may vary user to user. – Sharkskin

If you're working in PHP or Ruby or whatever, you could certainly write a function to add a class to the middle element. – Batrachian

You're absolutely right, and that's what I'm already doing. I was mostly looking for some sort of CSS trick I wasn't aware of. – Sharkskin

Such a pseudo-class wouldn't make sense, because what would be the middle child in an even number of elements? Your code may be able to guarantee an odd number of elements, but not every page can guarantee such a situation. – Silvia

Answer 1

Javascript is the only way to do this client side.

Expedition

There should be sass solution – Legofmutton

Answer 2

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

Pas

Wouldn't that only work if there's three items? At the time I was looking for something with more elements than that in it. – Sharkskin

Nope, this will select all elements that are not the first child and not the last child. You can see it in action here: codepen.io/bentomas/pen/Gwqoe – Pas

Oh, unless you want the exact middle child (i.e. only one element should ever be matched). I was thinking you wanted to select all the children that are in the middle. At least that's what I expected a :middle-child pseudo class to do when I went looking for it and found this thread. – Pas

@Pas - Well, you just solved my little problem in a very powerful way. So, thank you. =) – Dumpish

unfortunately it does select not only one middle element – Kinesiology

Answer 3

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 */
    }
}

Agony

If there can be an even number of elements, one might include div:nth-child(-1+#{$i}):nth-last-child(#{$i}) and/or div:nth-child(#{$i}):nth-last-child(-1+#{$i}) to select the element just left or right of center, respectively. – Beckiebeckley

Answer 4

You can use the "not first and not last" approach, like so:

CSS

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

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

Check the JsFiddle

Stettin

what if there is 5 items ? – Legofmutton

@Legofmutton this will apply to all middle children. Go to the JsFiddle link provided, add a couple more <li> in the middle and re-run it. You'll see them all turn red! – Northnorthwest

OP: "the middle child" meaning one – Almire

Answer 5

If you want to apply a style to all elements that are neither first children nor last children, you could use :not(:first-child), apply the style, and then use :last-child to 'take the style away' from the last element. But you'd have to think about what happens when there are less than 3 elements.

Alford

If you want to avoid the duplication (of the 'take the style away' section), check my answer, that combines two 'not' selectors, in order to catch all of the middle elements... :-) – Stettin

Answer 6

I've encountered the need to target the middle child on several occasions, and I've taken to using this sass mixin I wrote after referencing many similar questions, and their respective answers.

// Generate a reasonable number rules limited by $n.
@mixin middle-child($n) {
  // There is no middle for nChildren less than 3,
  // so lets just start at 3.
  @for $i from 3 to $n {
    // Find the middle, bias right for odd numbers.
    $mid: math.ceil(math.div($i, 2));
    // Select only those sets of children that number $i.
    &:first-child:nth-last-child(#{$i}) {
      // Select the middle child of that set.
      ~ :nth-child(#{$mid}) {
        @content; // Apply your styles.
      }
    }
  }
}

Usage:

.navigation {
  background-color: #ba0020;

  .nav-item {
    color: white;
    
    @include middle-child( 8 ) {
      font-weight: 900;
    }
  }
}

Grassofparnassus

Answer 7

Have you tried :nth-child(#) ?

Depending on which one you want to select you just replace # with the number.

Mf

That only works if the number of elements is known to begin with. I'm looking for something that will work for a list of unknown length. – Sharkskin

Well, I suppose if you don't know the total number this won't help either, but in case you DO - take a look at this CSS3-nth-child on SO it's a similar question to yours. – Mf

Answer 8

    /* Selects the single middle element */
.parent :nth-child(odd) {
    /* styles */
}

/* Selects the middle elements if there are multiple */
.parent :nth-child(n) {
    /* styles */
}

middle element when there's an odd number of elements

.parent :nth-child((n+1)/2) {
    /* styles */
}

middle elements when there's an even number of elements

.parent :nth-child(n/2),
.parent :nth-child((n/2)+1) {
    /* styles */
}

Washbasin