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: 
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;
    }
  }
}

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