jqueryexample.com jquery basics - Apply CSS Properties - jqueryexample.com

jquery basics – Apply CSS Properties by jqueryexample

How can we apply css to elements using JQuery?
It’s very simple to apply any CSS property using JQuery method css.
Apply the value of one style property for matched elements
$(selector).css("PropertyName", "PropertyValue" )
Apply Multiple CSS Properties for matched elements
$(selector).css({properties});

In below code snippets we have list of un-order item in html.
In head part first we call jquery library and onload function we will set the css property to the selector.
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="/ja/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</body>
</html>

To apply css in even childs of parent node using JQuery library.
$(“ul li:even”).css(“background-color”, “#ccc”);

To apply css in last child of parent using JQuery library.
$(“ul li:last”).css(“background-color”, “#ccc”);

To apply css in first child of parent using JQuery library.
$(“li:first”).css(“background-color”, “blue”);

Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment