CSS Trick: nth-of-type ()

Question

Hi, I am looking at something specific and not even sure if this can be done using pure CSS:

<div-1> 
  <div-x></div-x>
  <div-x></div-x>
  <div-x></div-x>
  <div-x></div-x>
<div-1> 

What I'm trying to do in scss,

if <div-x> render count is even
  then only apply &:last-child{ something; } to div number len(<div-x>)-1
end

EG: if div-x rendered is 4, then apply the pseudo-element to 3rd div-x else dont

I tried below but apply to all odd elements

&:nth-of-type(odd) {
  border-bottom: none;
}

Any tips / help would be appreciated Thanks!

Answer 1

You can use :nth-last-of-type:

.wrapper div:nth-of-type(even) + div:nth-last-of-type(2) {
    background-color: #ADD8E6;
}

/* for when there are only two occurrences of this element type */
.wrapper div:nth-last-of-type(2):first-of-type {
    background-color: #ADD8E6;
}

div, div. div, div ( div s). .

.

, . (2013) :

:nth-last-of-type CSS Selectors Module 3, , . , . , polyfill IE, , .

MDN , " " :

┌────────┬─────────────────┬───────────────────┬───────┬────────┐
│ Chrome │ Firefox (Gecko) │ Internet Explorer │ Opera │ Safari │
├────────┼─────────────────┼───────────────────┼───────┼────────┤
│   4.0  │   3.5 (1.9.1)   │        9.0        │  9.5  │   3.2  │
└────────┴─────────────────┴───────────────────┴───────┴────────┘

:

┌─────────┬────────────────────────┬───────────┬──────────────┬───────────────┐
│ Android │ Firefox Mobile (Gecko) │ IE Mobile │ Opera Mobile │ Safari Mobile │
├─────────┼────────────────────────┼───────────┼──────────────┼───────────────┤
│   2.1   │       1.0 (1.9.1)      │    9.0    │     10.0     │      3.2      │
└─────────┴────────────────────────┴───────────┴──────────────┴───────────────┘