Ie: Nth-Child() Using Odd/Even Isn't Working

IE: nth-child() using odd/even isn't working

IE8 doesn't support the nth-child selector I'm afraid:

http://reference.sitepoint.com/css/pseudoclass-nthchild

Why is nth-child selector not working?

The nth-child selector counts siblings (i.e., elements having the same parent).

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div
.
.
.

nth-child doesn't work in IE7/IE8

That's because :nth-child isn't supported in IE7/IE8.

One solution to this problem would be to use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8."

All you need to do is include the Selectivizr script and, if you aren't already using one, decide which JavaScript library you'd like to use (jQuery, Mootools etc.) and you will have support for the :nth-child selector (amongst various other pseudo-selectors/attribute selectors) in IE6 through to IE8.

Edit:

In reply to your comment, here's a quick tutorial showing you how to set up and use Selectivizr.

p:nth-child(even) and p:nth-child(odd) losing count with intermediate div's placed after a few p 's

I think you probably want the functionality of nth-of-type instead of nth-child based on what you're describing. Article on the difference here https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Your example: https://jsfiddle.net/nh16ytq7/

:nth-child() and :nth-of-type() not working

:nth-child should be applied to the child itself, not the wrapper:

So instead of:

.postPrevWrap:nth-child(odd)

do this:

.postPrev:nth-child(odd)

nth-child:odd/even removes td border on IE9

Remove the position:relative in this declaration and it will work.

tbody td{
font-size:12px;
position: relative;
}

How to get nth child to work when interrupted

Hold onto your butts, it's time to get hacky:

Using the (deep breath) ~ general sibling combinator, we can change how elements AFTER a certain element are displayed.

             .test:nth-child(odd)  { background: #933C96; }
.test:nth-child(even) { background: #EB811C; }
.interrupt ~ .test:nth-child(odd) { background: #EB811C; }
.interrupt ~ .test:nth-child(even) { background: #933C96; }


<h1>This is a heading</h1>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>

Here, we've applied your initial styling, and then added an additional cascading rule for any rows that come AFTER .interrupt which swaps the colors. .interrupt can be anything, you could even do some fancy work with :not() to make it way more general, but the idea is the same.

But what if you have more than one interrupting element?! Still possible! but a bit (way) more rigged:



                                                    .test:nth-child(odd)  { background: #933C96; }

.test:nth-child(even) { background: #EB811C; }

.interrupt ~ .test:nth-child(odd) { background: #EB811C; }

.interrupt ~ .test:nth-child(even) { background: #933C96; }

.interrupt ~ .interrupt ~ .test:nth-child(odd) { background: #933C96; }

.interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }

.interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd) { background: #EB811C; }

.interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #933C96; }

.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd) { background: #933C96; }

.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }
<h1>This is a heading</h1>

<p class="test">The first paragraph.</p>

<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

<p class="test">The second paragraph.</p>

<p class="test">The third paragraph.</p>

<p class="test">The first paragraph.</p>

<p class="test">The second paragraph.</p>

<p class="test">The third paragraph.</p>

<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

<p class="test">The first paragraph.</p>

<p class="test">The second paragraph.</p>

<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

<p class="test">The third paragraph.</p>

CSS Selectors - Determining even/odd children starting with last child

Yes, :nth-last-of-type() exists for this purpose:

tr:nth-last-of-type(even)

However, there isn't a way to provide a fallback for browsers and email clients that don't support this selector with just CSS. You will need to have your application add a class name to the appropriate rows and target by that class instead. If you're unable to modify the application, then you might well be stuck.



Related Topics



Leave a reply



Submit