Select Last Child When Odd, 2 Last Childs When Even

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 to add style to second-to-last only if total number of children are even?

You can use a combination of two selectors like in the below snippet.

When the parent has an even number of children elements, the second last element must be an odd numbered one and so if an element matches both nth-last-child(2) and nth-child(odd) then it means that it is the second last child of the parent and the parent has an even number of elements.

li:nth-last-child(2):nth-child(odd) {  color: red;}

<ul>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li></ul>
<ul>  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

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 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

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 select all child elements except first two and last two

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

Check it out here.

CSS nth-child select all but last element when length is unknown

Use :not(:last-child) to target all except the last.

http://jsfiddle.net/96nd71e3/1/

Selector nth-child producing odd results in CSS

you should use .box-media:nth-child(4n+1) to select odd .box-media children.

.box-media:nth-child(4n+1) {  color: red;}
.box-media2 {  display: none;}

<div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div><div class="box-media">Test</div><div class="box-media2"></div>

---

Related Topics