CODEWITHSUNDEEP
csscss-selectors
Karthik T
Karthik T

Reputation: 31952

Is it possible to get nth-of-type to work if the elements do not share an immediate parent?

I want to use a class to color elements according to a loop, as below (SCSS)

    @for $i from 1 through $logo_clr_cnt {
        .header:nth-of-type(#{$logo_clr_cnt}n+#{$i}){
            background-color: nth($logo_clrs, $i)
        }
    }

This works when the .header elements are all children of the same element,but is there a way to get it to work otherwise? i.e nth element on this page. Or any way to get a similar behaviour?

For e.g below (HAML for brevity)

.row
  .header
.row
  .header

Upvotes: 0

Views: 41

Answers (2)

Karthik T
Karthik T

Reputation: 31952

I solved this by adding a layer of abstraction. I use 2 classes, one to select and one to style. 

.row.header-container
  .header
.row.header-container
  .header

@for $i from 1 through $logo_clr_cnt {
    .header-container:nth-of-type(#{$logo_clr_cnt}n+#{$i}){
        .header{
            background-color: nth($logo_clrs, $i)
        }
    }
}

This is not an exact answer, but if anyone else is trying to do the same thing, this might help. As the old adage goes, all problems can be solved with an extra layer of abstraction...

Upvotes: 0

Jon
Jon

Reputation: 437336

No, it's not possible. The specification for nth-of-type is worded in terms of "sibling elements" in the DOM.

If you want to target elements matching a selector no matter where they are in the DOM you will have to do this in JavaScript, e.g.

var all = document.querySelectorAll(".header");
var filtered = Array.prototype.slice.call(all, 1, 3); // 2nd and 3rd .header
for (var i = 0; i < filtered.length; ++i) {
    // do something with filtered[i]
}

Upvotes: 1

Related Questions