css nth-child with other way to find element

Question

Is there a way to for instance target the 5th .slide element with a css code like this:

HTML

<div id="slides">

    <section>
        <div class='slide'></div>   this should be 1
        <div class='slide'></div>   this should be 2
        <div class='slide'></div>   this should be 3
    </section>

    <section>
        <div class='slide'></div>   this should be 4
    </section>

    <section>
        <div class='slide'></div>   this should be 5     I target this one
        <div class='slide'></div>   this should be 6
        <div class='slide'></div>   this should be 7
    </section>

</div>

CSS

.slide:nth-of-type(5) {
    background:red;
}

I thought something like that would work but it didn't.

I basically want to acces each element with the corresponding number so the 7th with a seven in the css

i'm open for jquery solutions if needed

I suppose you could do this in CSS4 with [`match`](http://css4-selectors.com/selector/css4/structural-pseudo-class/), though it isn't supported yet. — Bram Vanroy, Aug 07 '15 at 17:10
I'm afraid without JQuery you won't be able to select that element. Since the divs all have different parents, you will not be able to select them with the use of `nth-` like selectors. Jquery can do the trick since it can count all the `.slide` elements and than select the 5th element. — ArBro, Aug 07 '15 at 17:33
@Bram Vanroy: Nope. That site even gets the syntax wrong (and the whole thing doesn't look very well-written anyway) - `p:nth-match(2n+1)` is actually equivalent to `p:nth-child(2n+1)`. It should have been `:nth-match(2n+1 of p)`, and even then that is equivalent to `p:nth-of-type(2n+1)`, despite what the name might suggest. This is why the CSSWG [got rid of that name altogether](http://stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/31415015#31415015). — BoltClock, Aug 09 '15 at 04:24
@BoltClock Thanks for the clarification. I suppose I should always check the official docs before making statements. — Bram Vanroy, Aug 10 '15 at 18:49

score 1 · Answer 1 · answered Aug 07 '15 at 17:01

It will not work like that, it will only target the .slide in that section :

section:nth-of-type(3) .slide:first-of-type {
    background:red;
}

<div id="slides">

    <section>
        <div class='slide'></div>   this should be 1
        <div class='slide'></div>   this should be 2
        <div class='slide'></div>   this should be 3
    </section>

    <section>
        <div class='slide'></div>   this should be 4
    </section>

    <section>
        <div class='slide'>this should be 5      I target this one </div>
        <div class='slide'>this should be 6</div>   
        <div class='slide'>this should be 7</div>   
    </section>

</div>

score 1 · Accepted Answer · answered Aug 07 '15 at 19:10

Jquery Solution

$('#slides .slide').eq(4).css("color", "red");

$('#slides .slide').eq(4).css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">

  <section>
    <div class='slide'>this should be 1</div>
    <div class='slide'>this should be 2</div>
    <div class='slide'>this should be 3</div>
  </section>

  <section>
    <div class='slide'>this should be 4</div>
  </section>

  <section>
    <div class='slide'>this should be 5 I target this one</div>
    <div class='slide'>this should be 6</div>
    <div class='slide'>this should be 7</div>
  </section>

</div>

score 0 · Answer 3 · answered Aug 07 '15 at 17:03

Here ya go http://jsfiddle.net/DIRTY_SMITH/ns3u7uf5/12/

css

section:nth-child(3) > .slide:nth-child(1) {
    color:red;
}

html

<div id="slides">

    <section>
        <div class='slide'>  this should be 1</div>
        <div class='slide'>  this should be 2</div>
        <div class='slide'>  this should be 3</div>
    </section>

    <section>
        <div class='slide'>  this should be 4</div>
    </section>

    <section>
        <div class='slide'>   this should be 5     I target this one</div>
        <div class='slide'>  this should be 6</div>
        <div class='slide'>   this should be 7</div>
    </section>

</div>

score -1 · Answer 4 · edited May 23 '17 at 11:44

-1

You are trying to use a selector designed for types in a class. Hence the nth-of-type name. Sadly, as far as I know there is no way to use this selector for classes.

You might want to use programmatic logic to add new classes for every interval you want. Then you could use something like this:

section.highlight {
    color:red;
}

Someone ran into the same situation here: css3 nth of type restricted to class

edited May 23 '17 at 11:44

Community

1
1

answered Aug 07 '15 at 17:04

William Troy

98
1
7

Downvoter, care to comment what is the problem here? – William Troy Aug 07 '15 at 18:40

css nth-child with other way to find element

4 Answers4