CODEWITHSUNDEEP
csscss-selectors
Ian Steffy
Ian Steffy

Reputation: 1234

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.

nth-last-child(1 + odd) doesnt work though, so what should I do?

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

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>affected</li>
  <li>not effected</li>
  <li>affected</li>
</ul>

but if the last child is EVEN, nothing happens, so:

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
</ul>

Upvotes: 1

Views: 1143

Answers (4)

BoltClock
BoltClock

Reputation: 723468

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

Upvotes: 4

user663031
user663031

Reputation:

CSS is a weird programming language. In other languages, we have AND or &&; in CSS we accomplish this by stringing selectors together: (no spaces or commas):

div#foo.bar[attr="baz"]:first-child

selects any element

  • the type of which is DIV and
  • the id of which is foo and
  • one of the classes of which is bar and
  • whose attr attribute has the value baz and
  • is in the first child position.

In your case you want the element which is the last child and in the odd position, so you string them together as above. You used the expression but only if, but that of course is exactly the same as and.

Or

That's how and works; what about the other basic logical operation, which is or? In CSS, that's expressed by specifying multiple selectors selected by commas, so

div, #foo, .bar, [attr="baz"], :first-child

selects any element

  • the type of which is DIV or
  • the id of which is foo or
  • one of the classes of which is bar or
  • whose attr attribute has the value baz or
  • is in the first child position.

Not

The last basic logical operation, of course, is not. How would I express this in CSS? Now we have the :not pseudo-class, but it has some limitations and can sometimes trip you up. The classic CSS approach to not is to give two rules, one more general and one giving the exceptions. Taking the example of "not the first child":

div { color: blue }
div:first-child { color: inherit; }

which means, "make the div blue if not the first child.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

I'd suggest a slightly different approach using two pseudo-classes:

:nth-child(odd):last-child

This first selects all odd child elements, and refines the selection to only the last-child of the parent element.

div {
  margin: 0 0 0.5em 0;
}
span {
  display: inline-block;
  counter-increment: spanIndex;
  width: 2em;
  height: 2em;
  border: 2px solid #000;
  border-radius: 25%;
  margin: 0 0.5em 0 0;
}

span::before {
  content: counter(spanIndex, decimal-leading-zero);
}

span:nth-child(odd):last-child {
  background-color: #f90;
}
<div><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>

Upvotes: 6

dschu
dschu

Reputation: 5362

You can combine both selectors like this:

:last-child:nth-child(odd)

DEMO http://codepen.io/dschu/pen/XmbKmq

SCSS

ul 
{
  li
  {
    &:last-child:nth-child(odd)
    {
      background-color: red;
    }
  }
}

Upvotes: 2

Related Questions