Playing with CSS in jQuery – How to work with CSS in jQuery?

How can we apply css to elements using JQuery library.

The below example is to apply css on div element that has id itself as DivId.

$(”#DivId “).css(”border”,”4px  red”);

To apply css in odd childs of parent node using JQuery library.

$(”tr:odd”).css(”background-color”, “#bbbbff”);

To apply css in even childs of parent node using JQuery library.

$(”tr:even”).css(”background-color”, “#bbbbff”);

To apply css in last child of parent using JQuery library.

$(”tr:last”).css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’});

Now How can we modify css class using JQuery library?

Suppose that Css class has following definition

.class

{

font-size:10px;

font-weight:normal;

color:#000000;

}

Now if we are interested to add border property on above class, so we should follow below code.

$(“.class”).css(“border”,”1px solid blue”);

Where $(“.class”) name of css class. Now .class will automatically add border property in his class definition.