Weird behaviour of CSS nth-of-type

Question

I use CSS nth-of-type(even) for sorting divs. Normally it is working fine, but when I make AJAX request and put new HTML div after another one, selector starts working weird.

.row > .cd-timeline-block-sort:nth-of-type(even) > .cd-timeline-content {
  float: right;
}

Printscreen of timeline (before)

<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284">
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="268">
<div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

and after AJAX request:

Printscreen of timeline (after)

<!-- 1 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284">
<!-- 2 --><div class="cd-timeline-block" data-event-id="268" style="display: none;">
<!-- 3 --><div class="cd-timeline-block cd-timeline-block-sort eventForm" id="eventEditForm" style="display: block;">
<!-- 4 --><div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282">

In my second example are 4 divs and 3 of them with class .cd-timeline-block-sort . I need put (1) on left, (3) on right and (4) on left side.

could you post relevant html? – Bhojendra Rauniyar Jul 10 '15 at 10:15 — Bhojendra Rauniyar, Jul 10 '15 at 10:15
Ok, I updated the post – Jean Sapharick Jul 10 '15 at 10:24 — Jean Sapharick, Jul 10 '15 at 10:24

score 2 · Accepted Answer · edited May 23 '17 at 12:14

Apparently you want an "nth-class" pseudo selector which does not exist. Since you are using JavaScript I suggest these workarounds:

Either remove the unwanted element from DOM
If this is not possible then change the tag name of the unwanted element to something else:

(1st div) div.cd-timeline-block.cd-timeline-block-sort
(1st del) del.cd-timeline-block
(2nd div) div.cd-timeline-block.cd-timeline-block-sort
(3rd div) div.cd-timeline-block.cd-timeline-block-sort

And the CSS would be:

.row > div:nth-of-type(even) { }
.row > del                   { display: block; }

Another solution is to group your elements differently:

(1st div) div.group
              .cd-timeline-block.cd-timeline-block-sort
(2nd div) div.group
              .cd-timeline-block
              .cd-timeline-block.cd-timeline-block-sort
(3rd div) div.group
              .cd-timeline-block.cd-timeline-block-sort

And the CSS:

.row > div:nth-of-type(even) { }

That looks fine! I can't remove the unwanted element.. But is it fine when I use non-existent tag name? — Jean Sapharick, Jul 10 '15 at 10:52
This question explains the issue: http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name. I have posted three workarounds. The second one uses [`del`](http://www.w3.org/TR/html-markup/del.html) tag which is a valid HTML tag (but you can use span or something else). I recommend the third one. — Salman A, Jul 10 '15 at 10:59

score 0 · Answer 2 · answered Jul 10 '15 at 10:43

You could find element you need with JQuery.

// 3rd element with class "cd-timeline-block-sort"
var $block = $('.cd-timeline-block-sort').eq(2);
// Check, whether we found it
if (typeof($block) != 'undefined') {
   // Set CSS styles you need
   $block.css('float', 'right');
}

You could write more complex logic if you need.

Weird behaviour of CSS nth-of-type

2 Answers2