1

I am trying to alternate color for elements of a certain class and ignore any elements of different classes in between them. nth-of-type should provide this capability but in Firefox and Chrome, it acts incorrectly.

http://jsfiddle.net/rbe5oz52/

<div class="parent">
    <div class="section">Section</div>
    <div class="section">Section</div>
    <div class="ignoreMe">IgnoreMe</div>
    <div class="section">Section</div>
    <div class="section">Section</div>
</div>

.parent .section
{
    background-color: yellow;
}

.parent .section:nth-of-type(2n+1)
{
    background-color: red;
}

It should show the sections as red, yellow, red, yellow, but the ignoreMe element throws this off and causes two yellows in a row.

The definition says this should work the way I want: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

How do i fix this?

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330

1 Answers1

-1
 .parent .section
{
    background-color: red;
}

.parent .section:nth-of-type(2n+1)
{
    background-color: yellow;
}

http://jsfiddle.net/shellyjindal/hL97tn2x/5/

Shelly
  • 355
  • 1
  • 7