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

```

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

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