Showing posts with label pseudo selector css. Show all posts
Showing posts with label pseudo selector css. Show all posts

Friday 13 May 2011

Pseudo Selectors using jQuery

There are quite a few useful pseudo selectors in CSS, but they don't all work in IE. You can overcome this problem using jQuery. Below are a few examples of how.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectors using jQuery</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
font-size:1em;
line-height:1.5em;
padding:1em;
}
h1, h2
{
margin-bottom:0.5em;
}
h1
{
font-size:2em;
}
h2
{
margin-top:0.5em;
font-size:1.5em;
}
#nth-child ul, #only-child ul, #last-child ul, #empty ul, #checked, #enabled, #disabled
{
width:30%;
border-bottom:0.2em dotted #CCCCCC;
}
#nth-child span, #only-child span, #last-child span, #empty span, #checked span, #not span
{
color:blue;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1");
 google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#nth-child ul li:nth-child(2)").append("<span> - 2nd!</span>");
$("#only-child ul li:only-child").append("<span> - only child</span>");
$("#last-child ul li:last-child").append("<span> - last child</span>");
$("#empty ul li:empty").append("<span>Empty</span>");
$("#checked form input:checked").append("<span> - checked</span>");
$("#enabled form input:enabled").val("I am enabled");
$("#disabled form input:disabled").val("I am disabled");
$("#not form input:not(:checked)").append("<span> - not checked</span>");
});
</script>
</head>
<body>
<h1>Selector test</h1>
<h2>nth-child</h2>
<section id="nth-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>only-child</h2>
<section id="only-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>last-child</h2>
<section id="last-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>empty</h2>
<section id="empty">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li></li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>checked</h2>
<section id="checked">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
<h2>enabled</h2>
<section id="enabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>disabled</h2>
<section id="disabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>not</h2>
<section id="not">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
</body>
</html>