Targeting :nth-child(2) in IE7 / IE8

Question

I have a question regarding the implementation of nth-child(2) in the following code. the code works well in Chrome/Firefox, and first child matrix transformations perform well in IE. However, I have run into an issue with the second child selector. While I'm aware that IE8 and below does not support nth child, I have attempted to utilize selectizr and jQuery to enable, however I believe it may not work in my situation (as these are server side jsp files and the targeted div is computed dynamically via Javascript).

I am searching for a workaround for this...i need only the second child targeted.

I did a search and came across this post: IE8 :nth-child and :before

Is there a way to apply this method of first child+ li a in my situation?

If not, does anybody have any suggestions for a method to target this div? If it helps, this is being used to target the floating aggregates above the StackedArea Chart modified from the InfoVis toolkit.

thanks

.fte-chart-container .node > div > :first-child {
font-family: Arial;
color: black;
font-size: 11px;
width: 35px !important;
transform:rotate(-80deg);
-ms-transform:rotate(-80deg); /* IE 9 */
-moz-transform:rotate(-80deg); /* Firefox */
-webkit-transform:rotate(-80deg); /* Safari and Chrome */
-o-transform:rotate(-80deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.17364817766693044,
    M12=0.984807753012208, M21=-0.984807753012208, M22=0.17364817766693044, 
    SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.17364817766693044,
        M12=0.984807753012208,
        M21=-0.984807753012208,
        M22=0.17364817766693044,
        SizingMethod='auto expand'); /* IE 6 and 7 */

}

.fte-chart-container .node > div > :nth-child(2) {
font-family: Arial;
color: black;
font-size: 10px;
transform:rotate(-60deg);
-ms-transform:rotate(-60deg); /* IE 9 */
-moz-transform:rotate(-60deg); /* Firefox */
-webkit-transform:rotate(-60deg); /* Safari and Chrome */
-o-transform:rotate(-60deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997, 
M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997,   
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.4999999999999997,
        M12=0.8660254037844388,
        M21=-0.8660254037844388,
        M22=0.4999999999999997,
        SizingMethod='auto expand'); /* IE 6 and 7 */

}

On a side note, as you have IE 6 in your comments. IE6 doesn't support the ">" (child) selector treats is as " " (descendant). [Reference](http://stackoverflow.com/a/2402754/210336) — Matthijs Wessels, Feb 05 '13 at 08:43

score 4 · Answer 1 · answered Feb 05 '13 at 08:35

You can replace :nth-child(2) with :first-child + * in CSS if you don't know what exactly the second child is going to be:

.fte-chart-container .node > div > :first-child + *

But having * at the end of a complex selector may have poor performance in older browsers, so you should try and identify the element you want to select and replace * with whatever type/class/etc that element is.

Targeting :nth-child(2) in IE7 / IE8

1 Answers1