Select first and second of class

Question

My SCSS looks like this:

.wrapper {
    .part {
        ...
        &.wheel {
            ... // code goes here
        }
     }
}

And my html looks like this:

<div class="wrapper">
    <img src="..." class="part wheel"/>
    <img src="..." class="part wheel"/>
</div>

How can I select first and second wheel using CSS? I want to give them different properties.

have a look at `:nth-child` selector but beware as it is an element selector (rather than class) so if you have any other elements in between, it won't work — Pete, Jun 22 '17 at 14:03

score 1 · Answer 1 · answered Jun 22 '17 at 14:03

1

.wheel:nth-of-type(1){...}
.wheel:nth-of-type(2){...}

or

.wheel:nth-child(1){...}
.wheel:nth-child(2){...}

answered Jun 22 '17 at 14:03

mikepa88

score 0 · Answer 2 · answered Jun 22 '17 at 14:05

0

Use nth-of-type

.wrapper {
    .part {
        ...
        &.wheel {
            &:nth-of-type(1) { ... }
            &:nth-of-type(2) { ... }
        }
     }
}

answered Jun 22 '17 at 14:05

StudioTime

2 Answers2