jQuery & CSS Last Child example

Posted: March 18, 2013 in Java Scripts

<<!DOCTYPE html>
<html>

<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
</head>

<body>
<ul class =”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
</ul>
</body>
</html>

============================================================================
Script:

<script>
$(“ul.menu li”).last().addClass(‘menu-last’);
$(“ul.menu li a”).last().addClass(‘menu-lasta’);
</script>

============================================================================
CSS:

ul.menu {width:auto;}
ul.menu li {list-style:none; float:left; padding:0 30px 0 30px;}
ul.menu li a{font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#666; font-weight:bold; }
.menu-last {padding-right:0px !important; }
.menu-lasta {color:red !important;}

============================================================================

USE SECOND STYLE

============================================================================
Script:

$(“div span:first-child”)
.css({margin:”0″})

HTML :

John, Karl, Brandon, Sam
Glen, Tane, Ralph, David

CSS :
span.solast { text-decoration:line-through; cursor:pointer}
div span {margin-right:20px;}

============================================================================
$(“ul li:nth-child(4n)”).append(“ – 1nd!“);

Node Options :
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1)
p:nth-child(4n+2)
p:nth-child(4n+3)
p:nth-child(4n+4)

When the value b is preceded by a negative sign, the “+” character in the expression must be removed (it is effectively replaced by the “-” character indicating the negative value of b).

Examples:

:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */

for More Option plz check below URL :
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s