CODEWITHSUNDEEP
csscss-selectors
Mitch
Mitch

Reputation: 1

Issue applying nth-child to a single class.

First, thanks so much for your time in advance.

I work for a higher ed institution in Philadelphia. We're trying to utilize the nth-child pseudoclass to make every other row in our tables gray.

The line of code I've written in our Styles.css files is

table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}

I used 2n+3 because the first row of the table will be a darker gray than every other row because it will be a header, so I want it to start applying the background color to the 3rd row, and then every two rows after that (i.e. 3,5,7, etc.)

We use Ektron's CMS (version 8.01 SP1), and for whatever reason, the class just won't show up in the available class list, and when I try to apply it manually (i.e. manually putting <table class="oddrows" width="500"><tbody> in the body of the code) it STILL doesn't work.

I've cleared my cache on several occasions, and am still drawing a blank. (I'm using IE 8, for the record)

Any ideas? Everything I've read says my syntax is correct, and I'm about ready to tear my hair out.

Thanks again for your time!

Upvotes: 0

Views: 145

Answers (2)

Keefer
Keefer

Reputation: 2289

In order to get something like that to work, you may have to stray from pure CSS, and use some jQuery. If you're already using jQUery for other things in the site, this is a no-brainer, as it would only be adding a couple lines to your document ready statement like so:

jQuery(document).ready(function() {
   $('.oddrows tr:nth-child(2n+3)).addClass("darker");  
});

You would also then have a CSS class of .darker:

.darker {background-color:#eee}

Now if you're not already using jQuery (or don't have the option), this obviously won't work.

Upvotes: 0

Nate B
Nate B

Reputation: 6356

The nth-child selector isn't supported in IE8. For IE, it's only available in 9 and up.

Upvotes: 2

Related Questions