CSS Last Odd Child

CSS Last Odd Child?

nth-last-child counts backwards from the last child, so to grab the second to last, the expression is:

li:nth-last-child(2)

You can combine pseudo-selectors, so to select the 2nd to last child, but only when it's odd, use:

li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

And so, the whole thing should be:

li:last-child,
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

In answer to @ithil's question, here's how I'd write it in SASS:

li
  &:last-child,
  &:nth-last-child(2):nth-child(odd)
    border-bottom: none

It's not that much simpler, since the selection of the 'second-to-last odd child' is always going to require the 'two step' selector.

In answer to @Caspert's question, you can do this for arbitrarily many last elements by grouping more selectors (there feels like there should be some xn+y pattern to do this without grouping, but AFAIU these patterns just work by counting backwards from the last element).

For three last elements:

li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}

This is a place where something like SASS can help, to generate the selectors for you. I would structure this as a placeholder class, and extend the element with it, and set the number of columns in a variable like this:

$number-of-columns: 3

%no-border-on-last-row
 @for $i from 1 through $number-of-columns
   &:nth-last-child($i):nth-child(odd)
     border-bottom: none

//Then, to use it in your layout, just extend:

.column-grid-list li
  @extend %no-border-on-last-row

Select last child when odd, 2 last childs when even

Here is one way...

.wrap div:last-child,

.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {

    color: red;

}

<div class="wrap">

    <div>Odd</div>

    <div>Even</div>

    <div>Odd</div>

    <div>Even</div>

    <div>Odd</div>

    <div>Even</div>

</div>

<hr>

<div class="wrap">

    <div>Odd</div>

    <div>Even</div>

    <div>Odd</div>

    <div>Even</div>

    <div>Odd</div>

</div>

How make: nth-last-child(1 + odd)

I want to make something like nth-last-child(1 + odd), where the last child is affected but ONLY if the element is odd.

As has already been addressed, :nth-child(odd):last-child (or vice versa — order of pseudo-classes doesn't matter).

Bonus: A more flexible answer allowing me to grab the last child, only if it is odd and the odd child before it.

I'm not sure I would consider this more flexible, but selector syntax is pretty limited right now so it's the best you've got:

:nth-child(odd):nth-last-child(3),
:nth-child(odd):last-child

:nth-child(odd):nth-last-child(-n+3) comes pretty close, but that will match the second last child if that child is odd-numbered, which is not what you want.

Nothing a little negation couldn't handle if you really must have a single compound selector though:

:nth-child(odd):nth-last-child(-n+3):not(:nth-last-child(2))

Nth Child Last child where Odd

You can combine both :nth-child(odd) and :last-child together:

.photoset img:nth-child(odd):last-child

Note that while :nth-last-child() is also available, it's not the right selector to use here because it counts backwards, which means :nth-last-child(odd) will always match :last-child regardless of whether there is an odd or even number of children.

Note also that the display: block declaration isn't necessary in either case because floating elements are always display: block.

CSS Selectors - Determining even/odd children starting with last child

Yes, :nth-last-of-type() exists for this purpose:

tr:nth-last-of-type(even)

However, there isn't a way to provide a fallback for browsers and email clients that don't support this selector with just CSS. You will need to have your application add a class name to the appropriate rows and target by that class instead. If you're unable to modify the application, then you might well be stuck.

CSS Get last-child that doesn't have a class

Unfortunately what you want cannot be achieved using CSS only.

:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?

Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.

It is not even planned for selectors level 4 that you can specifiy a class or other limiting property.
See

https://www.w3.org/TR/selectors4/#the-last-child-pseudo

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

Making last child of a table the same color as the table element above it

You can test both for last child and for odd or even.

tr:last-child:nth-child(odd) td{
  background: #f0f0f0;
}
tr:last-child:nth-child(even) td{
  background: #fff;
}

---

Related Topics