Class Ignored by N-Type Classes
So I have this html
<div>
<div class="item"></div>
<div class="item inactive"></div>
<div class="item inactive"></div>
<div>
And this css
.item.inactive:nth-of-type(1) {
do stuff for 1st inactive
}
.item.inactive:nth-of-type(2) {
do stuff for 2nd inactive
}
but it doesn't work as expected.
I see this behavior instead
.item.inactive:nth-of-type(2) {
stuff is happening for 1st inactive
}
so is it easy to ignore when i specified .inactive? How do I get the effect I want?
.item {
color: red;
}
.item.inactive:nth-of-type(2) {
color: green;
}
<ul class='item-list'>
<li class='item'>item 1</li>
<li class='item inactive'>item 2</li>
<li class='item inactive'>item 3</li>
<ul>
source to share
nth-of-type
works with tag type
and no class
. when you write:
.item.inactive:nth-of-type(1) {
color: red;
}
affects the first div
one if both class elements and inactive.first have a class element and are inactive, therefore not selected.
.item.inactive:nth-of-type(2) {
color: blue;
}
affects the second div
if there is both a class element and inactive. The second div has a class element and is inactive that way.
You can use this:
div:nth-child(2) {
color: red;
}
div:nth-child(3) {
color: blue;
}
div:nth-child(2) {
color: red;
}
div:nth-child(3) {
color: blue;
}
<div class="item">This is 0</div>
<div class="item inactive">This is 1</div>
<div class="item inactive">This is 2</div>
source to share
nth-of-type: -Defined in the CSS Selectors Level 3 specification as a "structural pseudo-class", which means it is used to create content based on its relationship to parent and siblings.
Try this CSS
.inactive:nth-of-type(2) {
color:blue;
}
.inactive:nth-of-type(3){
color:red;
}
hope this helps.
source to share