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
React Pseudo Selector Inline Styling
CSS Font-Size Changes When Font-Family Falls Back
Smart Way to Add Corner Image to Div Border on All Four Corners
Can Flexbox Divide Items Evenly on Multiple Rows
CSS Spec - Atomic Inline Level Boxes
Css: Stretching Image to 100% Width
What Happens If Multiple Classes of the Same Element Define a :Before Pseudo-Element
Safari Ignoring CSS Max-Width Media Queries Below a Certain Point
Hovering Over CSS Transition in Safari Lightens Certain Font Color
:Hover:Before Text-Decoration None Has No Effects
How to Override the Minimum-Font-Size in Firefox
How to Hide Default Choose File Button
Why Do Flexbox Item Images Resize Differently According to Their Initial Size
CSS Transitions with :Before and :After Pseudo Elements