<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>/my/cssQuery/test.html - modified!</title>
<style type="text/css">
p.test a {background-color: red;}
#test1-1 p a {background-color: yellow;}
#test1-2 :link {background-color: yellow;}
#test2-1 p.test.link a {background-color: yellow;}
#test2-2 p > a {background-color: yellow;}
#test2-3 span + a {background-color: yellow;}
#test2-4 p:first-child a {background-color: yellow;}
#test2-5 a:lang(en) {background-color: yellow;}
#test2-6 a[href] {background-color: yellow;}
#test2-7 a[title="This is a link"] {background-color: yellow;}
#test2-8 a[title~="is"] {background-color: yellow;}
div[id|=test2-9] a {background-color: yellow;}
#test3-1 span ~ a {background-color: yellow;}
#test3-2 p:last-child a {background-color: yellow;}
#test3-3 a:contains("test") {background-color: yellow;}
#test3-4 p :not(span) {background-color: yellow;}
#test3-5 p:only-child a {background-color: yellow;}
#test3-6 p *:nth-child(0) {background-color: yellow;}
#test3-7 p *:nth-last-child(2n+1) {background-color: yellow;}
html:root #test3-8 a {background-color: yellow;}
#test3-9 a[title^="This"] {background-color: yellow;}
#test3-10 a[title*="is a"] {background-color: yellow;}
#test3-11 a[title$="link"] {background-color: yellow;}
</style>
<script type="text/javascript" src="/static/js/jquery-1.4.1.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/jquery_noconflict.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/cssQuery-jquery.js" charset="UTF-8"></script>
<script type="text/javascript">
onload = function() {
// retrieve the style rules stored in the <pre> tags
var styles = document.getElementsByTagName("pre");
for (var i = 0; i < styles.length; i++) test(styles[i]);
function test(style) {
try {
// get the CSS rule from the <pre> tag
var rule = style.firstChild.nodeValue;
// extract the selector part
var selector = rule.slice(0, rule.indexOf("{"));
// execute cssQuery to find the matching elements
var elements = cssQuery(selector);
// the tests have been constructed to match only one element
elements[0].style.backgroundColor = "lime";
} catch(e) {}
};
};
</script>
</head>
<body lang="en">
<div class="document">
<div class="header">
<p>This page is modified from Dean Edwards' <a href="http://dean.edwards.name/my/cssQuery/test.html">cssQuery test page.</a> It's here for telling how are jQuery and cssQuery compatible with or different from each other. The background color of all "test" links should turn lime. If no, that means the rule above is failed to applied.</p>
<hr />
</div>
<div class="content">
<h2>cssQuery Test Page</h2>
<h3><abbr>CSS</abbr> Level 1</h3>
<pre>#test1-1 p a {background-color: lime;}</pre>
<div id="test1-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test1-2 :link {background-color: lime;}</pre>
<div id="test1-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<h3><abbr>CSS</abbr> Level 2</h3>
<pre>#test2-1 p.test.link a {background-color: lime;}</pre>
<div id="test2-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-2 p > a {background-color: lime;}</pre>
<div id="test2-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-3 span + a {background-color: lime;}</pre>
<div id="test2-3"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-4 p:first-child a {background-color: lime;}</pre>
<div id="test2-4"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-5 a:lang(en) {background-color: lime;}</pre>
<div id="test2-5"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-6 a[href] {background-color: lime;}</pre>
<div id="test2-6"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-7 a[title="This is a link"] {background-color: lime;}</pre>
<div id="test2-7"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test2-8 a[title~="is"] {background-color: lime;}</pre>
<div id="test2-8"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>div[id|=test2-9] a {background-color: lime;}</pre>
<div id="test2-9"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<h3><abbr>CSS</abbr> Level 3</h3>
<pre>#test3-1 span ~ a {background-color: lime;}</pre>
<div id="test3-1"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-2 p:last-child a {background-color: lime;}</pre>
<div id="test3-2"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-3 a:contains("test") {background-color: lime;}</pre>
<div id="test3-3"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-4 p :not(span) {background-color: lime;}</pre>
<div id="test3-4"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-5 p:only-child a {background-color: lime;}</pre>
<div id="test3-5"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-6 p *:nth-child(even) {background-color: lime;}</pre>
<div id="test3-6"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-7 p *:nth-last-child(2n+1) {background-color: lime;}</pre>
<div id="test3-7"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>html:root #test3-8 a {background-color: lime;}</pre>
<div id="test3-8"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-9 a[title^="This"] {background-color: lime;}</pre>
<div id="test3-9"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-10 a[title*="is a"] {background-color: lime;}</pre>
<div id="test3-10"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
<pre>#test3-11 a[title$="link"] {background-color: lime;}</pre>
<div id="test3-11"><p class="test link"><span>This</span> is a <a href="#" title="This is a link">test</a> link.</p></div>
</div>
</div>
</body>
</html>