Not counting the 1st div inside the parent div and using odd and even correctly

Question

I found something weird on using .someclass:nth-of-type(odd) or (even), no matter what I change it keeps counting from the first div (which is on the other class). Please see the example

.mktoFormCol{width:500px;}

.toggle-profile{width:100%;}

.mktoFormRow{
width: 40%;
display: inline-block;
padding: 1rem;
background-color: #7bd5f0a3;
}

fieldset.mktoFormCol .mktoFormRow:nth-of-type(odd) {
  background-color: #e60951a3;
}


  should not count from this
  1 left
  2 right
  3 left
  4 right
  5 left
  6 right



  1 left
  2 right
  3 left
  4 right
  5 left
  6 right

user_2324154 · Answer

nth-of-type only works for tags

You can’t use it for classes or ids.

You’ll need to rework your html and css a little.

fieldset div:nth-of-type(odd) {
    ...
}

Then you’ll have to use a different tag for things you don’t want included.


    ...
    ...
    I’m not affected by nth-of-type because I’m not a div

user_522877 · Answer

I think that nth-of-type looks at the tag of the element, and will not pay attention to the class. If you change this to a

for instance, it works.

.mktoFormCol{width:500px;}

.toggle-profile{width:100%;}

.mktoFormRow{
width: 40%;
display: inline-block;
padding: 1rem;
background-color: #7bd5f0a3;
}

fieldset.mktoFormCol .mktoFormRow:nth-of-type(odd) {
  background-color: #e60951a3;
}


  should not count from this
  1 left
  2 right
  3 left
  4 right
  5 left
  6 right



  1 left
  2 right
  3 left
  4 right
  5 left
  6 right

Not counting the 1st div inside the parent div and using odd and even correctly

2 Answers