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
– Rune FS, Commented Jun 12, 2013 at 8:30
You could consider this solution: stackoverflow.com/questions/8492121/ie8-nth-child-and-before — AllWorkNoPlay
– AllWorkNoPlay, Commented Jun 12, 2013 at 8:30

dsgriffin · Accepted Answer · 2013-06-12 09:29:57Z

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, 2013 at 9:29

answered Jun 12, 2013 at 8:30

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Basit Over a year ago

yes i am including jquery into my HTML like <script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>

Basit Over a year ago

check my edit, is it ok ? that's it or do i need to do something with my css too ?

dsgriffin Over a year ago

@Basit You'll need to change [fallback css] to a .css file. I've added a link you may find useful :)

Basit Over a year ago

Thanks alot. One thing that i need to ask is, i need to include my css after the script right? But what about <noscript> tag. The css in this tag can contain css3 selectors or not?

dsgriffin Over a year ago

@Basit Yeah, include the .CSS file after. The <noscript> shouldn't contain CSS3, it is for if the user has JavaScript disabled

Collectives™ on Stack Overflow

How to interpret css into jQuery?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related