How to interpret css into jQuery?

Question

I am using this css. But as IE7 and IE8 do not support nth child so I want to do it with jQuery so it work in all browser

#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1  /*this is the column number*/){
    text-align: center;
    width:30px
}

#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(2 /*this is the column number*/){ 
    width:250px
}

#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(3 /*this is the column number*/){ 
    width:250px
}

#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(4 /*this is the column number*/){ 
    width:60px
}

#localFileCopyingDiv #supplementaryMaterialsDiv, #assetsDiv  table tr td:nth-child(5 /*this is the column number*/){ 
    width:220px
}

#courseInfoDiv table tr td:nth-child(1 /*this is the column number*/){  
    width: 200px;
}

#courseInfoDiv table tr td:nth-child(2 /*this is the column number*/){  
    width: 600px;
}

How can I convert above css into jQuery?

Thanks

EDIT: --------------------------------------------

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Status Report</title>

    <script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="javascript/selectivizr-min.js"></script>
        <noscript><link rel="stylesheet" href="brands/default/en/css/exportComplete.css" /></noscript>
    <![endif]--> 
    <script type="text/javascript" src="javascript/jquery-migrate-1.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="brands/default/en/css/exportComplete.css" />
</head>

Is it ok?

Do you add some of the content affecfted by the css's rules dynamically? — Rune FS, Jun 12 '13 at 08:30
You could consider this solution: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before — AllWorkNoPlay, Jun 12 '13 at 08:30

dsgriffin · Accepted Answer · 2013-06-12T09:29:57.673

2

One option would be to use a plugin such as Selectivizr to get the :nth-child selector (amongst various other pseudo/attribute selectors) functioning in older versions of IE.

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

As you're already using a JavaScript library (jQuery), all you need to do is include the Selectivizr <script> in your <head> and voila.

Here's a tutorial where you can see a simple example of its use, and an explanation of how it actually works under the cover.

edited Jun 12 '13 at 09:29

answered Jun 12 '13 at 08:30

dsgriffin

66,495
17
137
137

yes i am including jquery into my HTML like `` – Basit Jun 12 '13 at 08:37
check my edit, is it ok ? that's it or do i need to do something with my css too ? – Basit Jun 12 '13 at 08:43
@Basit You'll need to change [fallback css] to a .css file. I've added a link you may find useful :) – dsgriffin Jun 12 '13 at 09:30
Thanks alot. One thing that i need to ask is, i need to include my css after the script right? But what about ` – Basit Jun 12 '13 at 10:00
@Basit Yeah, include the .CSS file after. The – dsgriffin Jun 12 '13 at 10:06

How to interpret css into jQuery?

1 Answers1