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>
Showing posts with label pseudo selector css. Show all posts
Showing posts with label pseudo selector css. Show all posts
Friday, 13 May 2011
Subscribe to:
Posts (Atom)