CSS Trick: nth-of-type()

Question

Hi I am looking to something particular and not even sure if it 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 am trying to do in scss is

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 are 4 then apply pseudo-element to 3rd div-x else dont

I tried below but it applies to all odd element

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

Any hint/help will be appreciated Thanks !

could you get by with `:nth-of-type(even):last-child:before` instead of having to do `:after` on the preceding element? — Brad Allred, Oct 04 '14 at 01:35

Spooky · Accepted Answer · 2014-10-04T01:51:19.320

You could 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;
}

The first selector will style the penultimate div only if it is immediately preceded by an even occurrence of div. The second selector is to style the first div when it is also the penultimate div (when there are only two divs). I used two declarations merely for the sake of readability.

Check out this demo.

However, ensure that support of the pseudo-class is sufficient for your requirements. This page (2013) states:

:nth-last-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.

This MDN page states the following browsers have "basic support" as of the given versions:

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

And for mobile browsers:

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

I think OP was asking for something to target the element *before* the last element if the *last* element is even. — Brad Allred, Oct 04 '14 at 01:34
If the _last_ element is even, then the _second-to-last_ element is odd, and the _third-to-last_ element is even. The code I provided styles the _second-to-last_ element if the _third-to-last_ element is even. Am I missing something? Doesn't my code demo target the element you described? — Spooky, Oct 04 '14 at 01:38
hmmm it seems like it *should* work. I checked the demo and it didnt work for me. (in Chrome) — Brad Allred, Oct 04 '14 at 01:42
my monitor is set to dim mode so the fill color on the demo wasn't very prominent. not your fault :) (also im kinda blind) — Brad Allred, Oct 04 '14 at 01:48
Awesome answer. I never imagined that these would be possible with CSS :) — Harry, Jul 06 '15 at 04:54

CSS Trick: nth-of-type()

1 Answers1

Linked