diff options
38 files changed, 5483 insertions, 14586 deletions
diff --git a/samples/pom.xml b/samples/pom.xml index b4f3be73..10590804 100644 --- a/samples/pom.xml +++ b/samples/pom.xml @@ -37,7 +37,7 @@ <logLevel>${gwt.loglevel}</logLevel> <style>${gwt.outputstyle}</style> <gwtVersion>${gwtversion}</gwtVersion> - <soyc>true</soyc> + <soyc>false</soyc> <modules> <module>gwtquery.samples.GwtQueryEffects</module> <module>gwtquery.samples.GwtQuerySample</module> diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java index c1b76429..64a5910a 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java @@ -1,285 +1,2336 @@ package gwtquery.samples.client;
+import static com.google.gwt.query.client.GQuery.$;
+import static com.google.gwt.query.client.GQuery.document;
+
+import java.util.ArrayList;
+
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
-import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
-import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.query.client.DeferredGQuery;
+import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.GQuery;
import com.google.gwt.query.client.SelectorEngine;
+import com.google.gwt.query.client.impl.SelectorEngineCssToXPath;
+import com.google.gwt.query.client.impl.SelectorEngineImpl;
+import com.google.gwt.query.client.impl.SelectorEngineJS;
+import com.google.gwt.query.client.impl.SelectorEngineSizzle;
+import com.google.gwt.query.client.impl.SelectorEngineSizzleGwt;
+import com.google.gwt.query.client.impl.SelectorEngineXPath;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.IncrementalCommand;
+import com.google.gwt.user.client.Timer;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.PopupPanel;
+import com.google.gwt.user.client.ui.RootPanel;
+/**
+ * Module to test and compare the performance of each Js-Library and
+ * each Gwt selector implementation.
+ *
+ * It is possible to select which benchmarks to run. Be aware that
+ * not all of them work in all browsers.
+ * By default selected options are gwt_compiled, gwt_dynamic, jquery and prototype.
+ *
+ * It uses iframes to avoid interferences when updating the document.
+ * By default the iframe is shared for all libraries, but you can use
+ * a different one for each benchmark appending the parameter share=false.
+ *
+ * Parameters available in the url
+ * share=false Use different iframes for each bench
+ * min=200 Minimum time running each selector
+ * track=false Don't draw the horse race
+ * ask=false Run default benchmarks, don't ask the user.
+ *
+ */
public class GwtQueryBenchModule implements EntryPoint {
- private StringBuffer log = new StringBuffer();
-
- private static final int MIN_TIME = 200;
+ public interface Benchmark {
+ String getId();
+ int runSelector(DeferredGQuery dq, String selector);
+ }
+
+ /**
+ * Benchmark for the default dynamic selector implementation
+ */
+ private class DynamicBenchmark extends GQueryDynamicBenchmark {
+ private SelectorEngineImpl engine;
- private static final String GCOMPILED = "gwt";
+ DynamicBenchmark(SelectorEngineImpl engine, String name) {
+ super(name);
+ this.engine = engine;
+ }
- private static final String JQUERY = "jquery";
+ public int runSelector(DeferredGQuery dq, String selector) {
+ return engine.select(selector, gwtiframe).getLength();
+ }
+ }
- private static final String GDYNAMIC = "dgwt";
+ /**
+ * Benchmark for the compiled selectors
+ */
+ private class GQueryCompiledBenchmark implements Benchmark {
+
+ String id;
+
+ GQueryCompiledBenchmark(String id) {
+ this.id = id;
+ }
+
+ public String getId() {
+ return id;
+ }
- private static final String DOJO = "dojo";
+ public int runSelector(DeferredGQuery dq, String selector) {
+ return dq.array(gwtiframe).getLength();
+ }
+ }
- private static final String PROTOTYPE = "prototype";
+ /**
+ * Benchmark for others dynamic selectors
+ */
+ private class GQueryDynamicBenchmark implements Benchmark {
- public void onModuleLoad() {
- final MySelectors m = GWT.create(MySelectors.class);
+ private SelectorEngine engine;
+ private String id;
- final DeferredGQuery dg[] = m.getAllSelectors();
- HTML h = HTML.wrap(Document.get().getElementById("startrace"));
- initResultsTable(dg, "GQuery", GCOMPILED, "DGQuery", GDYNAMIC, "jQuery"
- /*"DOMAssistant 2.7" */, JQUERY, "Dojo", DOJO, "Prototype", PROTOTYPE);
+ GQueryDynamicBenchmark(String name) {
+ this.id = name;
+ this.engine = new SelectorEngine();
+ }
- h.addClickHandler(new ClickHandler() {
- public void onClick(ClickEvent clickEvent) {
+ public String getId() {
+ return id;
+ }
- runBenchmarks(dg,new GQueryDynamicBenchmark(), new GQueryCompiledBenchmark(), new JQueryBenchmark(),
- new DojoBenchmark(), new PrototypeBenchmark());
- }
- });
+ public int runSelector(DeferredGQuery dq, String selector) {
+ return engine.select(selector, gwtiframe).getLength();
+ }
}
- public interface Benchmark {
+ /**
+ * Benchmark for external libraries
+ */
+ private class IframeBenchmark implements Benchmark {
+ private String id;
- public int runSelector(DeferredGQuery dq, String selector);
+ IframeBenchmark(String name) {
+ this.id = name;
+ }
- String getId();
- }
+ public String getId() {
+ return id;
+ }
- public void runBenchmarks(final DeferredGQuery[] dg,
- final Benchmark... benchmark) {
- DeferredCommand.addCommand(new IncrementalCommand() {
- int selectorNumber = 0;
+ public int runSelector(DeferredGQuery dq, String selector) {
+ return runSelector(dq, id, selector);
+ }
- int numCalls = 0;
+ public native int runSelector(DeferredGQuery dq, String id, String selector) /*-{
+ return eval("$wnd." + id + "benchmark('" + selector + "')");
+ }-*/;
+ }
- int benchMarkNumber = 0;
+ private int min_time = 200;
+
+ private boolean shareIframes = true;
+
+ private boolean useTrack = true;
+ private boolean ask = true;
- double totalTimes[] = new double[benchmark.length];
+ /**
+ * List of available benchmarks.
+ */
+ private final Benchmark[] benchmarks = new Benchmark[] {
+ new GQueryCompiledBenchmark("gwt_compiled"),
+ new GQueryDynamicBenchmark("gwt_dynamic"),
+ new DynamicBenchmark(new SelectorEngineSizzle(), "gwt_sizzle_jsni"),
+ new DynamicBenchmark(new SelectorEngineSizzleGwt(), "gwt_sizzle_java"),
+ new DynamicBenchmark(new SelectorEngineJS(), "gwt_domassist_java"),
+ new DynamicBenchmark(new SelectorEngineXPath(), "gwt_xpath"),
+ new DynamicBenchmark(new SelectorEngineCssToXPath(), "gwt_css2xpath"),
+ new IframeBenchmark("jquery"),
+ new IframeBenchmark("dojo"),
+ new IframeBenchmark("prototype"),
+ new IframeBenchmark("sizzle"),
+ new IframeBenchmark("domassistant")
+ };
+
+ /**
+ * Pre-selected benchmarks
+ */
+ private String[] defaultBenchmarks = {"gwt_compiled", "gwt_dynamic", "jquery", "prototype", "dojo"};
- double runTimes[] = new double[benchmark.length];
+ private DeferredGQuery dg[];
+ private FlexTable grid = new FlexTable();
+ private Element gwtiframe;
+ private Benchmark[] selectedBenchmarks;
+ private double trackWidth;
+ private PopupPanel selectPanel = new PopupPanel();
+
+ private Function askBenchMarks = new Function(){
+ public void f(Element e) {
+ selectPanel.center();
+ }
+ };
- long cumTime = 0;
+ /**
+ * Main function to run all the selected benchmarks
+ */
+ private Function runBenchMarks = new Function() {
+ public void f(Element elem) {
+
+ selectedBenchmarks = readBenchmarkSelection();
+ selectPanel.hide();
+ $("#startrace").hide();
- int numRuns = 0;
+ initResultsTable(dg, selectedBenchmarks);
+ initTrack(selectedBenchmarks);
+
+ DeferredCommand.addCommand(new IncrementalCommand() {
+ int benchMarkNumber = 0;
+ int numCalls = 0;
+ int row = 0;
+ double runTimes[] = new double[selectedBenchmarks.length];
+ int selectorNumber = 0;
+ double totalTimes[] = new double[selectedBenchmarks.length];
+ int winner = -1;
+ double winTime = Double.MAX_VALUE;
- int winner = -1;
+ public boolean execute() {
+ if (benchMarkNumber >= selectedBenchmarks.length) {
+ benchMarkNumber = 0;
+ numCalls = 0;
+ row ++;
- double winTime = Double.MAX_VALUE;
+ moveHorses(selectedBenchmarks, row, totalTimes);
+ setResultClass(selectorNumber, winner);
- public boolean execute() {
- if (benchMarkNumber >= benchmark.length) {
- benchMarkNumber = 0;
- numCalls = 0;
- cumTime = 0;
- numRuns = 0;
- setResultClass(benchmark[winner].getId(), selectorNumber, "win");
- double totalMovement = (790.0 - 124.0) / dg.length;
- moveHorse(benchmark[winner].getId(), totalMovement);
-
- for (int i = 0; i < benchmark.length; i++) {
- if (i != winner) {
- moveHorse(benchmark[i].getId(),
- (int) (totalMovement * (double) (winTime
- / (double) runTimes[i])));
- setResultClass(benchmark[i].getId(), selectorNumber, "lose");
- }
- }
- selectorNumber++;
- winner = -1;
- winTime = Double.MAX_VALUE;
- if (selectorNumber >= dg.length) {
- double min = Double.MAX_VALUE;
- for (int i = 0; i < totalTimes.length; i++) {
- if (totalTimes[i] < min) {
- min = totalTimes[i];
+ selectorNumber++;
+ winner = -1;
+ winTime = Double.MAX_VALUE;
+ if (selectorNumber >= dg.length) {
+ double min = Double.MAX_VALUE;
+ for (int i = 0; i < totalTimes.length; i++) {
+ if (totalTimes[i] < min) {
+ min = totalTimes[i];
+ }
}
- }
- for (int i = 0; i < totalTimes.length; i++) {
- d(benchmark[i].getId(), dg.length,
- (((int) (totalTimes[i] * 100)) / 100.0) + " ms");
- setResultClass(benchmark[i].getId(), dg.length,
- totalTimes[i] <= min ? "win" : "lose");
- if (totalTimes[i] <= min) {
- flagWinner(benchmark[i].getId());
+
+ d(selectorNumber, -1, "Total");
+ for (int i = 0; i < totalTimes.length; i++) {
+ d(selectorNumber, i, (((int) (totalTimes[i] * 100)) / 100.0) + " ms");
+ if (totalTimes[i] <= min) {
+ flagWinner(selectedBenchmarks[i].getId());
+ $("#startrace").show();
+ setResultClass(selectorNumber, i);
+ }
}
+ return false;
}
-
- return false;
}
+ DeferredGQuery d = dg[selectorNumber];
+ long start = System.currentTimeMillis();
+ int num = 0;
+ long end = start;
+ Benchmark m = selectedBenchmarks[benchMarkNumber];
+ String selector = d.getSelector();
+ double runtime = min_time;
+ int found = 0;
+ try {
+ do {
+ num += m.runSelector(d, selector);
+ end = System.currentTimeMillis();
+ numCalls++;
+ } while (end - start < min_time);
+ runtime = (double) (end - start) / numCalls;
+ if (runtime < winTime) {
+ winTime = runtime;
+ winner = benchMarkNumber;
+ }
+ found = num / numCalls;
+ } catch (Exception e) {
+ found = -1;
+ }
+ runTimes[benchMarkNumber] = runtime;
+ d(selectorNumber, benchMarkNumber, runtime, found);
+ totalTimes[benchMarkNumber] += runtime;
+ numCalls = 0;
+ benchMarkNumber++;
+ return true;
}
- DeferredGQuery d = dg[selectorNumber];
- long start = System.currentTimeMillis();
- int num = 0;
- long end = start;
- Benchmark m = benchmark[benchMarkNumber];
- String selector = d.getSelector();
-
- do {
- num += m.runSelector(d, selector);
- end = System.currentTimeMillis();
- numCalls++;
- } while (end - start < MIN_TIME);
- double runtime = (double) (end - start) / numCalls;
- if (runtime < winTime) {
- winTime = runtime;
- winner = benchMarkNumber;
- }
- runTimes[benchMarkNumber] = runtime;
- d(m.getId(), selectorNumber, runtime, (num / numCalls));
- totalTimes[benchMarkNumber] += runtime;
- numCalls = 0;
- benchMarkNumber++;
- return true;
- }
- });
- }
-
- private native void flagWinner(String id) /*-{
- $wnd.flagWinner(id);
- }-*/;
+ });
+ }
+ };
- private native void moveHorse(String id, double totalMovement) /*-{
- $wnd.moveHorse(id, totalMovement);
- }-*/;
+ /**
+ * EntryPoint
+ */
+ public void onModuleLoad() {
+ final MySelectors m = GWT.create(MySelectors.class);
+ dg = m.getAllSelectors();
+
+ String par = Window.Location.getParameter("min");
+ if (par != null) {
+ min_time = Integer.parseInt(par);
+ }
+ par = Window.Location.getParameter("share");
+ if (par != null && "false".equals(par)) {
+ shareIframes = false;
+ }
+ par = Window.Location.getParameter("track");
+ if (par != null && "false".equals(par)) {
+ useTrack = false;
+ }
+ par = Window.Location.getParameter("ask");
+ if (par != null && "false".equals(par)) {
+ ask = false;
+ }
+
+ initSelects(benchmarks);
+ initIFrames();
- private void setResultClass(String id, int i, String clz) {
- Element td = Document.get().getElementById(id + i);
- td.setClassName(clz);
+ $("#startrace").click(ask ? askBenchMarks: runBenchMarks);
}
- private void d(String type, int i, String text) {
- Element td = Document.get().getElementById(type + i);
- td.setInnerHTML(text);
+ private void d(int selnumber, int benchnumber, String text) {
+ grid.setText(selnumber + 1, benchnumber + 1, text);
+ Element td = grid.getCellFormatter().getElement(selnumber + 1, benchnumber + 1);
DOM.scrollIntoView((com.google.gwt.user.client.Element) td);
}
- private void d(String type, int i, double v, int i1) {
+ private void d(int selnumber, int benchnumber, double time, int found) {
+ String text = found < 0 ? "Error" : "" + (((int) (time * 10)) / 10.0) + " ms | " + found + " found";
+ d(selnumber, benchnumber, text);
+ }
- Element td = Document.get().getElementById(type + i);
- td.setInnerHTML(
- "" + (((int) (v * 100)) / 100.0) + " ms, found " + i1 + " nodes");
- DOM.scrollIntoView((com.google.gwt.user.client.Element) td);
+ private void flagWinner(String idWinner) {
+ GQuery g = $("#" + idWinner + "horse" + " nobr");
+ $(".flag").appendTo(g).show();
}
+
+ /**
+ * Insert the iframes for benchmarking.
+ * Depending on the parameter share, we will generate one iframe
+ * for each benchmark or we will share the same one.
+ */
+ private void initIFrames() {
+ String i = "<iframe class=ibench id=%ID%bench src=html/%ID%bench.html></iframe>";
+ if (! shareIframes ) {
+ $(i.replaceAll("%ID%", "gwt")).appendTo(document).hide();
+ for (Benchmark b : benchmarks) {
+ if (b instanceof IframeBenchmark) {
+ $(i.replaceAll("%ID%", b.getId())).appendTo(document).hide();
+ }
+ }
+ } else {
+ $(i.replaceAll("%ID%", "iframe")).appendTo(document).hide();
+ }
+ // Wait a while until the iframe/s have been loaded
+ new Timer() {
+ public void run() {
+ writeTestContent($(".ibench").contents().find("body").get(0));
+ gwtiframe = $(".ibench").eq(0).contents().get(0);
+ }
+ }.schedule(1000);
+ }
+
- private void initResultsTable(DeferredGQuery[] dg, String... options) {
+ /**
+ * Reset the result table
+ */
+ private void initResultsTable(DeferredGQuery[] dg, Benchmark... benchs) {
int numRows = dg.length;
- Document doc = Document.get();
- Element table = doc.getElementById("resultstable");
- Element thead = doc.createTHeadElement();
-// thead.getStyle().setProperty("position", "relative");
- table.appendChild(thead);
- Element selectorHeader = doc.createTHElement();
- Element theadtr = doc.createTRElement();
- selectorHeader.setInnerHTML("Selector");
- theadtr.appendChild(selectorHeader);
- thead.appendChild(theadtr);
-
- Element tbody = doc.createTBodyElement();
-// tbody.getStyle().setProperty("overflow", "scroll");
-// tbody.getStyle().setProperty("height", "200px");
- table.appendChild(tbody);
-
- for (int i = 0; i < options.length; i += 2) {
- Element th = doc.createTHElement();
- th.setInnerHTML(options[i]);
- theadtr.appendChild(th);
+ grid = new FlexTable();
+ grid.addStyleName("resultstable");
+ RootPanel.get("results").clear();
+ RootPanel.get("results").add(grid);
+
+ grid.setText(0, 0, "Selector");
+ for (int i=0; i < benchs.length; i++) {
+ grid.setText(0, i+1, benchs[i].getId());
}
+
for (int i = 0; i < numRows; i++) {
- Element tr = doc.createTRElement();
- Element lab = doc.createTHElement();
- lab.setInnerHTML(dg[i].getSelector());
- tr.appendChild(lab);
- for (int j = 0; j < options.length; j += 2) {
- Element placeholder = doc.createTDElement();
- placeholder.setInnerHTML("Not Tested");
- placeholder.setId(options[j + 1] + i);
- tr.appendChild(placeholder);
+ grid.setText(i+1, 0, dg[i].getSelector());
+ for (int j = 0; j < benchs.length; j++) {
+ grid.setText(i+1, j+1, "-");
}
- tbody.appendChild(tr);
}
- Element totalRow = doc.createTRElement();
- Element totalLab = doc.createTHElement();
- totalLab.setInnerHTML("Total");
- totalRow.appendChild(totalLab);
- for (int j = 0; j < options.length; j += 2) {
- Element placeholder = doc.createTDElement();
- placeholder.setInnerHTML("0");
- placeholder.setId(options[j + 1] + numRows);
- totalRow.appendChild(placeholder);
- }
- tbody.appendChild(totalRow);
}
- private void d(String s) {
- log.append(s + "<br>");
+ /**
+ * Initialize the selects to choose the benchmarks to run
+ */
+ private void initSelects(Benchmark... benchs) {
+ String opt = "<input type='checkbox' name='n' value='%ID%' %SEL%>%ID%</input><br/>";
+ selectPanel.add(new HTML("<div id=selectcontainer><strong>Make your selection</strong><hr/></div>"));
+ selectPanel.show();
+ GQuery g = $("#selectcontainer");
+ for (Benchmark b : benchs) {
+ String select = opt;
+ for (String s : defaultBenchmarks) {
+ if (s.equals(b.getId())) {
+ select = select.replaceAll("%SEL%", "checked='checked'");
+ }
+ }
+ g.append(select.replaceAll("%ID%", b.getId()).replaceAll("%SEL", ""));
+ }
+ g.append("<br/><button id=run>Run</button>");
+ $("#run").click(runBenchMarks);
+ selectPanel.hide();
}
- private static class GQueryCompiledBenchmark implements Benchmark {
-
- public int runSelector(DeferredGQuery dq, String selector) {
- return dq.array(null).getLength();
+ /**
+ * Initialize the track with the horses
+ */
+ private void initTrack(Benchmark... benchs) {
+ if (!useTrack) return;
+ String tpl = "<div id=%ID%horse class=horse><nobr><img class=himg src=images/bench/horse.gif><span>%ID%</span></nobr></div>";
+ GQuery g = $("#racefield").html("");
+ for (Benchmark b : benchs) {
+ String id = b.getId();
+ String lg = id.contains("gwt") ? "gwt" : id;
+ String s = tpl.replaceAll("%ID%", id).replaceAll("%LG%", lg);
+ g.append($(s));
}
- public String getId() {
- return GCOMPILED;
- }
+ int height = g.find(".horse").height() * (benchs.length + 1);
+ $("#racetrack").css("height", height + "px");
+
+ GQuery flag = $("<img class=flag src='images/bench/animated-flag.gif'/>").appendTo(document);
+ trackWidth = g.width() - g.find(".horse").width() - flag.width();
+ flag.hide();
}
-
- private static class JQueryBenchmark implements Benchmark {
-
- public native int runSelector(DeferredGQuery dq, String selector) /*-{
- return $wnd.jquerybenchmark(selector);
- }-*/;
-
- public String getId() {
- return JQUERY;
+
+ /**
+ * Update horse possition.
+ * Note that the calculated position is relative with the faster horse,
+ * so a horse could move back.
+ */
+ private void moveHorses(Benchmark[] b, int row, double[] totalTimes) {
+ if (!useTrack) return;
+ double winnerTime = Double.MAX_VALUE;
+ for (double d : totalTimes) {
+ winnerTime = Math.min(winnerTime, d);
}
- }
-
- private static class DojoBenchmark implements Benchmark {
-
- public native int runSelector(DeferredGQuery dq, String selector) /*-{
- return $wnd.dojobenchmark(selector);
- }-*/;
-
- public String getId() {
- return DOJO;
+ double winnerPos = row * (double) trackWidth / (double) dg.length;
+ for (int i = 0; i < b.length; i++) {
+ GQuery g = $("#" + b[i].getId() + "horse");
+ double pos = winnerPos * winnerTime / totalTimes[i];
+ g.css("left", (int)pos + "px");
}
}
-
- private static class PrototypeBenchmark implements Benchmark {
-
- public native int runSelector(DeferredGQuery dq, String selector) /*-{
- return $wnd.prototypebenchmark(selector);
- }-*/;
-
- public String getId() {
- return PROTOTYPE;
- }
+
+ private void setResultClass(int selNumber, int winNumber) {
+ Element e = grid.getCellFormatter().getElement(selNumber + 1, winNumber + 1);
+ $(e).addClass("win").siblings().attr("class", "").addClass("tie").eq(0).removeClass("tie");
}
-
- private static class GQueryDynamicBenchmark implements Benchmark {
-
- private SelectorEngine engine;
-
- private GQueryDynamicBenchmark() {
- engine = new SelectorEngine();
- }
-
- public int runSelector(DeferredGQuery dq, String selector) {
- return engine.select(selector, Document.get()).getLength();
+
+ private Benchmark[] readBenchmarkSelection() {
+ ArrayList<Benchmark> bs = new ArrayList<Benchmark>();
+ for (Element e : $("input", selectPanel.getElement()).elements()) {
+ String val = $(e).val();
+ if (!"".equals(val)) {
+ for (Benchmark b : benchmarks) {
+ if (b.getId().equals(val)) {
+ bs.add(b);
+ }
+ }
+ }
}
+ return bs.toArray(new Benchmark[bs.size()]);
+ }
- public String getId() {
- return GDYNAMIC;
- }
+ /**
+ * This ugly method is used to initialize a huge html String
+ * plenty of html tags which will be used for the tests,
+ * because java 1.5 has a limitation in the size of static strings.
+ */
+ private void writeTestContent(Element e) {
+ String ret = "";
+ ret += "<html><head> </head><body><div>";
+ ret += " <div class='head dialog'>";
+ ret += " <p><a href='http://www.w3.org/'><img alt='W3C' src='' height='48' width='72'></a></p>";
+ ret += " <h1 id='title'>Selectors</h1>";
+ ret += " <em><span>.</span></em>";
+ ret += " <h2>W3C Working Draft 15 December 2005</h2>";
+ ret += " <dl>";
+ ret += " <dt>This version:</dt>";
+ ret += " <dd><a href='http://www.w3.org/TR/2005/WD-css3-selectors-20051215'>";
+ ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a></dd>";
+ ret += " <dt>Latest version:";
+ ret += " </dt><dd><a href='http://www.w3.org/TR/css3-selectors'>";
+ ret += " http://www.w3.org/TR/css3-selectors</a>";
+ ret += " </dd><dt>Previous version:";
+ ret += " </dt><dd><a href='http://www.w3.org/TR/2001/CR-css3-selectors-20011113'>";
+ ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>";
+ ret += " </dd><dt><a name='editors-list'></a>Editors:";
+ ret += " </dt><dd class='vcard'><span class='fn'>Daniel Glazman</span> (Invited";
+ ret += " </dd>";
+ ret += " <dd class='vcard'><a class='url fn' href='http://www.tantek.com/' lang='tr'>Tantek Çelik</a>";
+ ret += " </dd><dd class='vcard'><a href='mailto:ian@hixie.ch' class='url fn'>Ian";
+ ret += " Hickson</a> (<span class='company'><a href='http://www.google.com/'>Google</a></span>)";
+ ret += " </dd><dd class='vcard'><span class='fn'>Peter Linss</span> (former";
+ ret += " editor, <span class='company'><a href='http://www.netscape.com/'>Netscape/AOL</a></span>)";
+ ret += " </dd><dd class='vcard'><span class='fn'>John Williams</span> (former editor, <span class='company'><a href='http://www.quark.com/'>Quark, Inc.</a></span>)";
+ ret += " </dd></dl>";
+ ret += " <p class='copyright'><a href='http://www.w3.org/Consortium/Legal/ipr-notice#Copyright'>";
+ ret += " Copyright</a> © 2005 <a href='http://www.w3.org/'><abbr title='World Wide Web Consortium'>W3C</abbr></a><sup>®</sup>";
+ ret += " (<a href='http://www.csail.mit.edu/'><abbr title='Massachusetts";
+ ret += " Institute of Technology'>MIT</abbr></a>, <a href='http://www.ercim.org/'><acronym title='European Research";
+ ret += " Consortium for Informatics and Mathematics'>ERCIM</acronym></a>, <a href='http://www.keio.ac.jp/'>Keio</a>), All Rights Reserved.";
+ ret += " <a href='http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer'>liability</a>,";
+ ret += " <a href='http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks'>trademark</a>,";
+ ret += " <a href='http://www.w3.org/Consortium/Legal/copyright-documents'>document";
+ ret += " use</a> rules apply.";
+ ret += " </p><hr title='Separator for header'>";
+ ret += " </div>";
+ ret += " <h2><a name='abstract'></a>Abstract</h2>";
+ ret += " <p><em>Selectors</em> are patterns that match against elements in a";
+ ret += " tree. Selectors have been optimized for use with HTML and XML, and";
+ ret += " are designed to be usable in performance-critical code.</p>";
+ ret += " <p><acronym title='Cascading Style Sheets'>CSS</acronym> (Cascading";
+ ret += " Style Sheets) is a language for describing the rendering of <acronym title='Hypertext Markup Language'>HTML</acronym> and <acronym title='Extensible Markup Language'>XML</acronym> documents on";
+ ret += " screen, on paper, in speech, etc. CSS uses Selectors for binding";
+ ret += " describes extensions to the selectors defined in CSS level 2. These";
+ ret += " extended selectors will be used by CSS level 3.";
+ ret += " </p><p>Selectors define the following function:</p>";
+ ret += " <pre>expression ∗ element → boolean</pre>";
+ ret += " <p>That is, given an element and a selector, this specification";
+ ret += " defines whether that element matches the selector.</p>";
+ ret += " <p>These expressions can also be used, for instance, to select a set";
+ ret += " subtree. <acronym title='Simple Tree Transformation";
+ ret += " Sheets'>STTS</acronym> (Simple Tree Transformation Sheets), a";
+ ret += " language for transforming XML trees, uses this mechanism. <a href='#refsSTTS'>[STTS]</a></p>";
+ ret += " <h2><a name='status'></a>Status of this document</h2>";
+ ret += " <p><em>This section describes the status of this document at the";
+ ret += " of this technical report can be found in the <a href='http://www.w3.org/TR/'>W3C technical reports index at";
+ ret += " http://www.w3.org/TR/.</a></em></p>";
+ ret += " <p>This document describes the selectors that already exist in <a href='#refsCSS1'><abbr title='CSS level 1'>CSS1</abbr></a> and <a href='#refsCSS21'><abbr title='CSS level 2'>CSS2</abbr></a>, and";
+ ret += " also proposes new selectors for <abbr title='CSS level";
+ ret += " 3'>CSS3</abbr> and other languages that may need them.</p>";
+ ret += " <p>The CSS Working Group doesn't expect that all implementations of";
+ ret += " CSS3 will have to implement all selectors. Instead, there will";
+ ret += " will include all of the selectors.</p>";
+ ret += " <p>This specification is a last call working draft for the the <a href='http://www.w3.org/Style/CSS/members'>CSS Working Group</a>";
+ ret += " (<a href='/Style/'>Style Activity</a>). This";
+ ret += " document is a revision of the <a href='http://www.w3.org/TR/2001/CR-css3-selectors-20011113/'>Candidate";
+ ret += " Recommendation dated 2001 November 13</a>, and has incorporated";
+ ret += " be demonstrable.</p>";
+ ret += " <p>All persons are encouraged to review and implement this";
+ ret += " specification and return comments to the (<a href='http://lists.w3.org/Archives/Public/www-style/'>archived</a>)";
+ ret += " public mailing list <a href='http://www.w3.org/Mail/Lists.html#www-style'>www-style</a>";
+ ret += " (see <a href='http://www.w3.org/Mail/Request'>instructions</a>). W3C";
+ ret += " The deadline for comments is 14 January 2006.</p>";
+ ret += " <p>This is still a draft document and may be updated, replaced, or";
+ ret += " </p><p>This document may be available in <a href='http://www.w3.org/Style/css3-selectors-updates/translations'>translation</a>.";
+ ret += " </p><div class='subtoc'>";
+ ret += " <h2><a name='contents'>Table of contents</a></h2>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline2'><a href='#context'>1. Introduction</a>";
+ ret += " <ul>";
+ ret += " <li><a href='#dependencies'>1.1. Dependencies</a></li>";
+ ret += " <li><a href='#terminology'>1.2. Terminology</a></li>";
+ ret += " <li><a href='#changesFromCSS2'>1.3. Changes from CSS2</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline2'><a href='#selectors'>2. Selectors</a>";
+ ret += " </li><li class='tocline2'><a href='#casesens'>3. Case sensitivity</a>";
+ ret += " </li><li class='tocline2'><a href='#selector-syntax'>4. Selector syntax</a>";
+ ret += " </li><li class='tocline2'><a href='#grouping'>5. Groups of selectors</a>";
+ ret += " </li><li class='tocline2'><a href='#simple-selectors'>6. Simple selectors</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline3'><a href='#type-selectors'>6.1. Type";
+ ret += " selectors</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline4'><a href='#typenmsp'>6.1.1. Type";
+ ret += " selectors and namespaces</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline3'><a href='#universal-selector'>6.2.";
+ ret += " Universal selector</a>";
+ ret += " <ul>";
+ ret += " <li><a href='#univnmsp'>6.2.1. Universal selector and";
+ ret += " namespaces</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline3'><a href='#attribute-selectors'>6.3.";
+ ret += " Attribute selectors</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline4'><a href='#attribute-representation'>6.3.1.";
+ ret += " values</a>";
+ ret += " </li><li><a href='#attribute-substrings'>6.3.2. Substring";
+ ret += " matching attribute selectors</a>";
+ ret += " </li><li class='tocline4'><a href='#attrnmsp'>6.3.3.";
+ ret += " Attribute selectors and namespaces</a>";
+ ret += " </li><li class='tocline4'><a href='#def-values'>6.3.4.";
+ ret += " Default attribute values in DTDs</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline3'><a href='#class-html'>6.4. Class";
+ ret += " selectors</a>";
+ ret += " </li><li class='tocline3'><a href='#id-selectors'>6.5. ID";
+ ret += " selectors</a>";
+ ret += " </li><li class='tocline3'><a href='#pseudo-classes'>6.6.";
+ ret += " Pseudo-classes</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline4'><a href='#dynamic-pseudos'>6.6.1.";
+ ret += " Dynamic pseudo-classes</a>";
+ ret += " </li><li class='tocline4'><a href='#target-pseudo'>6.6.2. The";
+ ret += " :target pseudo-class</a>";
+ ret += " </li><li class='tocline4'><a href='#lang-pseudo'>6.6.3. The";
+ ret += " :lang() pseudo-class</a>";
+ ret += " </li><li class='tocline4'><a href='#UIstates'>6.6.4. UI";
+ ret += " element states pseudo-classes</a>";
+ ret += " </li><li class='tocline4'><a href='#structural-pseudos'>6.6.5.";
+ ret += " Structural pseudo-classes</a>";
+ ret += " <ul>";
+ ret += " <li><a href='#root-pseudo'>:root";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#nth-child-pseudo'>:nth-child()";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#nth-last-child-pseudo'>:nth-last-child()</a>";
+ ret += " </li><li><a href='#nth-of-type-pseudo'>:nth-of-type()";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#nth-last-of-type-pseudo'>:nth-last-of-type()</a>";
+ ret += " </li><li><a href='#first-child-pseudo'>:first-child";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#last-child-pseudo'>:last-child";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#first-of-type-pseudo'>:first-of-type";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#last-of-type-pseudo'>:last-of-type";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#only-child-pseudo'>:only-child";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#only-of-type-pseudo'>:only-of-type";
+ ret += " pseudo-class</a>";
+ ret += " </li><li><a href='#empty-pseudo'>:empty";
+ ret += " pseudo-class</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline4'><a href='#negation'>6.6.7. The";
+ ret += " negation pseudo-class</a></li>";
+ ret += " </ul>";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li><li><a href='#pseudo-elements'>7. Pseudo-elements</a>";
+ ret += " <ul>";
+ ret += " <li><a href='#first-line'>7.1. The ::first-line";
+ ret += " pseudo-element</a>";
+ ret += " </li><li><a href='#first-letter'>7.2. The ::first-letter";
+ ret += " pseudo-element</a>";
+ ret += " </li><li><a href='#UIfragments'>7.3. The ::selection";
+ ret += " pseudo-element</a>";
+ ret += " </li><li><a href='#gen-content'>7.4. The ::before and ::after";
+ ret += " pseudo-elements</a></li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline2'><a href='#combinators'>8. Combinators</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline3'><a href='#descendant-combinators'>8.1.";
+ ret += " Descendant combinators</a>";
+ ret += " </li><li class='tocline3'><a href='#child-combinators'>8.2. Child";
+ ret += " combinators</a>";
+ ret += " </li><li class='tocline3'><a href='#sibling-combinators'>8.3. Sibling";
+ ret += " combinators</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline4'><a href='#adjacent-sibling-combinators'>8.3.1.";
+ ret += " Adjacent sibling combinator</a>";
+ ret += " </li><li class='tocline4'><a href='#general-sibling-combinators'>8.3.2.";
+ ret += " General sibling combinator</a></li>";
+ ret += " </ul>";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline2'><a href='#specificity'>9. Calculating a selector's";
+ ret += " specificity</a>";
+ ret += " </li><li class='tocline2'><a href='#w3cselgrammar'>10. The grammar of";
+ ret += " Selectors</a>";
+ ret += " <ul class='toc'>";
+ ret += " <li class='tocline3'><a href='#grammar'>10.1. Grammar</a>";
+ ret += " </li><li class='tocline3'><a href='#lex'>10.2. Lexical scanner</a>";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li><li class='tocline2'><a href='#downlevel'>11. Namespaces and down-level";
+ ret += " clients</a>";
+ ret += " </li><li class='tocline2'><a href='#profiling'>12. Profiles</a>";
+ ret += " </li><li><a href='#Conformance'>13. Conformance and requirements</a>";
+ ret += " </li><li><a href='#Tests'>14. Tests</a>";
+ ret += " </li><li><a href='#ACKS'>15. Acknowledgements</a>";
+ ret += " </li><li class='tocline2'><a href='#references'>16. References</a>";
+ ret += " </li></ul>";
+ ret += " </div>";
+ ret += " <h2><a name='context'>1. Introduction</a></h2>";
+ ret += " <h3><a name='dependencies'></a>1.1. Dependencies</h3>";
+ ret += " <p>Some features of this specification are specific to CSS, or have";
+ ret += " specification, these have been described in terms of CSS2.1. <a href='#refsCSS21'>[CSS21]</a></p>";
+ ret += " <h3><a name='terminology'></a>1.2. Terminology</h3>";
+ ret += " <p>All of the text of this specification is normative except";
+ ret += " non-normative.</p>";
+ ret += " <h3><a name='changesFromCSS2'></a>1.3. Changes from CSS2</h3>";
+ ret += " <p><em>This section is non-normative.</em></p>";
+ ret += " <p>The main differences between the selectors in CSS2 and those in";
+ ret += " Selectors are:";
+ ret += " </p><ul>";
+ ret += " <li>the list of basic definitions (selector, group of selectors,";
+ ret += " of simple selectors, and the term 'simple selector' is now used for";
+ ret += " </li>";
+ ret += " <li>an optional namespace component is now allowed in type element";
+ ret += " selectors, the universal selector and attribute selectors";
+ ret += " </li>";
+ ret += " <li>a <a href='#general-sibling-combinators'>new combinator</a> has been";
+ ret += " </li>";
+ ret += " <li>new simple selectors including substring matching attribute";
+ ret += " selectors, and new pseudo-classes";
+ ret += " </li>";
+ ret += " <li>new pseudo-elements, and introduction of the '::' convention";
+ ret += " </li>";
+ ret += " <li>the grammar has been rewritten</li>";
+ ret += " <li>profiles to be added to specifications integrating Selectors";
+ ret += " and defining the set of selectors which is actually supported by";
+ ret += " </li>";
+ ret += " <li>Selectors are now a CSS3 Module and an independent";
+ ret += " </li>";
+ ret += " <li>the specification now has its own test suite</li>";
+ ret += " </ul>";
+ ret += " <h2><a name='selectors'></a>2. Selectors</h2>";
+ ret += " <p><em>This section is non-normative, as it merely summarizes the";
+ ret += " following sections.</em></p>";
+ ret += " <p>A Selector represents a structure. This structure can be used as a";
+ ret += " HTML or XML fragment corresponding to that structure.</p>";
+ ret += " <p>Selectors may range from simple element names to rich contextual";
+ ret += " representations.</p>";
+ ret += " <p>The following table summarizes the Selector syntax:</p>";
+ ret += " <table class='selectorsReview'>";
+ ret += " <thead>";
+ ret += " <tr>";
+ ret += " <th class='pattern'>Pattern</th>";
+ ret += " <th class='meaning'>Meaning</th>";
+ ret += " <th class='described'>Described in section</th>";
+ ret += " <th class='origin'>First defined in CSS level</th>";
+ ret += " </tr>";
+ ret += " </thead><tbody>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>*</td>";
+ ret += " <td class='meaning'>any element</td>";
+ ret += " <td class='described'><a href='#universal-selector'>Universal";
+ ret += " selector</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E</td>";
+ ret += " <td class='meaning'>an element of type E</td>";
+ ret += " <td class='described'><a href='#type-selectors'>Type selector</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo]</td>";
+ ret += " <td class='meaning'>an E element with a 'foo' attribute</td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo='bar']</td>";
+ ret += " <td class='meaning'>an E element whose 'foo' attribute value is exactly";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo~='bar']</td>";
+ ret += " <td class='meaning'>an E element whose 'foo' attribute value is a list of";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo^='bar']</td>";
+ ret += " <td class='meaning'>an E element whose 'foo' attribute value begins exactly";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo$='bar']</td>";
+ ret += " <td class='meaning'>an E element whose 'foo' attribute value ends exactly";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[foo*='bar']</td>";
+ ret += " <td class='meaning'>an E element whose 'foo' attribute value contains the";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E[hreflang|='en']</td>";
+ ret += " <td class='meaning'>an E element whose 'hreflang' attribute has a";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#attribute-selectors'>Attribute";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:root</td>";
+ ret += " <td class='meaning'>an E element, root of the document</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:nth-child(n)</td>";
+ ret += " <td class='meaning'>an E element, the n-th child of its parent</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:nth-last-child(n)</td>";
+ ret += " <td class='meaning'>an E element, the n-th child of its parent, counting";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:nth-of-type(n)</td>";
+ ret += " <td class='meaning'>an E element, the n-th sibling of its type</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:nth-last-of-type(n)</td>";
+ ret += " <td class='meaning'>an E element, the n-th sibling of its type, counting";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:first-child</td>";
+ ret += " <td class='meaning'>an E element, first child of its parent</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:last-child</td>";
+ ret += " <td class='meaning'>an E element, last child of its parent</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:first-of-type</td>";
+ ret += " <td class='meaning'>an E element, first sibling of its type</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:last-of-type</td>";
+ ret += " <td class='meaning'>an E element, last sibling of its type</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:only-child</td>";
+ ret += " <td class='meaning'>an E element, only child of its parent</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:only-of-type</td>";
+ ret += " <td class='meaning'>an E element, only sibling of its type</td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:empty</td>";
+ ret += " <td class='meaning'>an E element that has no children (including text";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#structural-pseudos'>Structural";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:link<br>E:visited</td>";
+ ret += " <td class='meaning'>an E element being the source anchor of a hyperlink of";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#link'>The link";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:active<br>E:hover<br>E:focus</td>";
+ ret += " <td class='meaning'>an E element during certain user actions</td>";
+ ret += " <td class='described'><a href='#useraction-pseudos'>The user";
+ ret += " action pseudo-classes</a></td>";
+ ret += " <td class='origin'>1 and 2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:target</td>";
+ ret += " <td class='meaning'>an E element being the target of the referring URI</td>";
+ ret += " <td class='described'><a href='#target-pseudo'>The target";
+ ret += " pseudo-class</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:lang(fr)</td>";
+ ret += " <td class='meaning'>an element of type E in language 'fr' (the document";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#lang-pseudo'>The :lang()";
+ ret += " pseudo-class</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:enabled<br>E:disabled</td>";
+ ret += " <td class='meaning'>a user interface element E which is enabled or";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#UIstates'>The UI element states";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:checked<!--<br>E:indeterminate--></td>";
+ ret += " <td class='meaning'>a user interface element E which is checked<!-- or in an";
+ ret += " indeterminate state--> (for instance a radio-button or checkbox)";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#UIstates'>The UI element states";
+ ret += " pseudo-classes</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E::first-line</td>";
+ ret += " <td class='meaning'>the first formatted line of an E element</td>";
+ ret += " <td class='described'><a href='#first-line'>The ::first-line";
+ ret += " pseudo-element</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E::first-letter</td>";
+ ret += " <td class='meaning'>the first formatted letter of an E element</td>";
+ ret += " <td class='described'><a href='#first-letter'>The ::first-letter";
+ ret += " pseudo-element</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E::selection</td>";
+ ret += " <td class='meaning'>the portion of an E element that is currently";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#UIfragments'>The UI element";
+ ret += " fragments pseudo-elements</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E::before</td>";
+ ret += " <td class='meaning'>generated content before an E element</td>";
+ ret += " <td class='described'><a href='#gen-content'>The ::before";
+ ret += " pseudo-element</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E::after</td>";
+ ret += " <td class='meaning'>generated content after an E element</td>";
+ ret += " <td class='described'><a href='#gen-content'>The ::after";
+ ret += " pseudo-element</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E.warning</td>";
+ ret += " <td class='meaning'>an E element whose class is";
+ ret += " </td>";
+ ret += " <td class='described'><a href='#class-html'>Class";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E#myid</td>";
+ ret += " <td class='meaning'>an E element with ID equal to 'myid'.</td>";
+ ret += " <td class='described'><a href='#id-selectors'>ID";
+ ret += " selectors</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E:not(s)</td>";
+ ret += " <td class='meaning'>an E element that does not match simple selector s</td>";
+ ret += " <td class='described'><a href='#negation'>Negation";
+ ret += " pseudo-class</a></td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E F</td>";
+ ret += " <td class='meaning'>an F element descendant of an E element</td>";
+ ret += " <td class='described'><a href='#descendant-combinators'>Descendant";
+ ret += " combinator</a></td>";
+ ret += " <td class='origin'>1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E > F</td>";
+ ret += " <td class='meaning'>an F element child of an E element</td>";
+ ret += " <td class='described'><a href='#child-combinators'>Child";
+ ret += " combinator</a></td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E + F</td>";
+ ret += " <td class='meaning'>an F element immediately preceded by an E element</td>";
+ ret += " <td class='described'><a href='#adjacent-sibling-combinators'>Adjacent sibling combinator</a>";
+ ret += " </td>";
+ ret += " <td class='origin'>2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <td class='pattern'>E ~ F</td>";
+ ret += " <td class='meaning'>an F element preceded by an E element</td>";
+ ret += " <td class='described'><a href='#general-sibling-combinators'>General sibling combinator</a>";
+ ret += " </td>";
+ ret += " <td class='origin'>3</td>";
+ ret += " </tr>";
+ ret += " </tbody>";
+ ret += " </table>";
+ ret += " <p>The meaning of each selector is derived from the table above by";
+ ret += " column.</p>";
+ ret += " <h2><a name='casesens'>3. Case sensitivity</a></h2>";
+ ret += " <p>The case sensitivity of document language element names, attribute";
+ ret += " names, and attribute values in selectors depends on the document";
+ ret += " but in XML, they are case-sensitive.</p>";
+ ret += " <h2><a name='selector-syntax'>4. Selector syntax</a></h2>";
+ ret += " <p>A <dfn><a name='selector'>selector</a></dfn> is a chain of one";
+ ret += " or more <a href='#sequence'>sequences of simple selectors</a>";
+ ret += " separated by <a href='#combinators'>combinators</a>.</p>";
+ ret += " <p>A <dfn><a name='sequence'>sequence of simple selectors</a></dfn>";
+ ret += " is a chain of <a href='#simple-selectors-dfn'>simple selectors</a>";
+ ret += " that are not separated by a <a href='#combinators'>combinator</a>. It";
+ ret += " always begins with a <a href='#type-selectors'>type selector</a> or a";
+ ret += " <a href='#universal-selector'>universal selector</a>. No other type";
+ ret += " selector or universal selector is allowed in the sequence.</p>";
+ ret += " <p>A <dfn><a name='simple-selectors-dfn'></a><a href='#simple-selectors'>simple selector</a></dfn> is either a <a href='#type-selectors'>type selector</a>, <a href='#universal-selector'>universal selector</a>, <a href='#attribute-selectors'>attribute selector</a>, <a href='#class-html'>class selector</a>, <a href='#id-selectors'>ID selector</a>, <a href='#content-selectors'>content selector</a>, or <a href='#pseudo-classes'>pseudo-class</a>. One <a href='#pseudo-elements'>pseudo-element</a> may be appended to the last";
+ ret += " sequence of simple selectors.</p>";
+ ret += " <p><dfn>Combinators</dfn> are: white space, 'greater-than";
+ ret += " sign' (U+003E, <code>></code>), 'plus sign' (U+002B,";
+ ret += " <code>+</code>) and 'tilde' (U+007E, <code>~</code>). White";
+ ret += " space may appear between a combinator and the simple selectors around";
+ ret += " it. <a name='whitespace'></a>Only the characters 'space' (U+0020), 'tab'";
+ ret += " never part of white space.</p>";
+ ret += " <p>The elements of a document tree that are represented by a selector";
+ ret += " are the <dfn><a name='subject'></a>subjects of the selector</dfn>. A";
+ ret += " selector consisting of a single sequence of simple selectors";
+ ret += " sequence of simple selectors and a combinator to a sequence imposes";
+ ret += " simple selectors.</p>";
+ ret += " <p>An empty selector, containing no sequence of simple selectors and";
+ ret += " no pseudo-element, is an <a href='#Conformance'>invalid";
+ ret += " selector</a>.</p>";
+ ret += " <h2><a name='grouping'>5. Groups of selectors</a></h2>";
+ ret += " <p>When several selectors share the same declarations, they may be";
+ ret += " grouped into a comma-separated list. (A comma is U+002C.)</p>";
+ ret += " <div class='example'>";
+ ret += " <p>CSS examples:</p>";
+ ret += " <p>In this example, we condense three rules with identical";
+ ret += " declarations into one. Thus,</p>";
+ ret += " <pre>h1 { font-family: sans-serif }";
+ ret += " h3 { font-family: sans-serif }</pre>";
+ ret += " <p>is equivalent to:</p>";
+ ret += " <pre>h1, h2, h3 { font-family: sans-serif }</pre>";
+ ret += " </div>";
+ ret += " <p><strong>Warning</strong>: the equivalence is true in this example";
+ ret += " because all the selectors are valid selectors. If just one of these";
+ ret += " selectors were invalid, the entire group of selectors would be";
+ ret += " heading rules would be invalidated.</p>";
+ ret += " <h2><a name='simple-selectors'>6. Simple selectors</a></h2>";
+ ret += " <h3><a name='type-selectors'>6.1. Type selector</a></h3>";
+ ret += " <p>A <dfn>type selector</dfn> is the name of a document language";
+ ret += " type in the document tree.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The following selector represents an <code>h1</code> element in the";
+ ret += " document tree:</p>";
+ ret += " <pre>h1</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='typenmsp'>6.1.1. Type selectors and namespaces</a></h4>";
+ ret += " <p>Type selectors allow an optional namespace (<a href='#refsXMLNAMES'>[XMLNAMES]</a>) component. A namespace prefix";
+ ret += " (U+007C, <code>|</code>).</p>";
+ ret += " <p>The namespace component may be left empty to indicate that the";
+ ret += " selector is only to represent elements with no declared namespace.</p>";
+ ret += " <p>An asterisk may be used for the namespace prefix, indicating that";
+ ret += " with no namespace).</p>";
+ ret += " <p>Element type selectors that have no namespace component (no";
+ ret += " element's namespace (equivalent to '<code>*|</code>') unless a default";
+ ret += " namespace.</p>";
+ ret += " <p>A type selector containing a namespace prefix that has not been";
+ ret += " previously declared is an <a href='#Conformance'>invalid</a> selector.";
+ ret += " language implementing Selectors. In CSS, such a mechanism is defined";
+ ret += " in the General Syntax module.</p>";
+ ret += " <p>In a namespace-aware client, element type selectors will only match";
+ ret += " against the <a href='http://www.w3.org/TR/REC-xml-names/#NT-LocalPart'>local";
+ ret += " part</a>";
+ ret += " of the element's <a href='http://www.w3.org/TR/REC-xml-names/#ns-qualnames'>qualified";
+ ret += " name</a>. See <a href='#downlevel'>below</a> for notes about matching";
+ ret += " behaviors in down-level clients.</p>";
+ ret += " <p>In summary:</p>";
+ ret += " <dl>";
+ ret += " <dt><code>ns|E</code></dt>";
+ ret += " <dd>elements with name E in namespace ns</dd>";
+ ret += " <dt><code>*|E</code></dt>";
+ ret += " <dd>elements with name E in any namespace, including those without any";
+ ret += " </dd>";
+ ret += " <dt><code>|E</code></dt>";
+ ret += " <dd>elements with name E without any declared namespace</dd>";
+ ret += " <dt><code>E</code></dt>";
+ ret += " <dd>if no default namespace has been specified, this is equivalent to *|E.";
+ ret += " </dd>";
+ ret += " </dl>";
+ ret += " <div class='example'>";
+ ret += " <p>CSS examples:</p>";
+ ret += " <pre>@namespace foo url(http://www.example.com);";
+ ret += " h1 { color: green }</pre>";
+ ret += " <p>The first rule will match only <code>h1</code> elements in the";
+ ret += " 'http://www.example.com' namespace.</p>";
+ ret += " <p>The second rule will match all elements in the";
+ ret += " 'http://www.example.com' namespace.</p>";
+ ret += " <p>The third rule will match only <code>h1</code> elements without";
+ ret += " any declared namespace.</p>";
+ ret += " <p>The fourth rule will match <code>h1</code> elements in any";
+ ret += " namespace (including those without any declared namespace).</p>";
+ ret += " <p>The last rule is equivalent to the fourth rule because no default";
+ ret += " namespace has been defined.</p>";
+ ret += " </div>";
+ ret += " <h3><a name='universal-selector'>6.2. Universal selector</a></h3>";
+ ret += " <p>The <dfn>universal selector</dfn>, written 'asterisk'";
+ ret += " (<code>*</code>), represents the qualified name of any element";
+ ret += " specified, see <a href='#univnmsp'>Universal selector and";
+ ret += " Namespaces</a> below.</p>";
+ ret += " <p>If the universal selector is not the only component of a sequence";
+ ret += " of simple selectors, the <code>*</code> may be omitted.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <ul>";
+ ret += " <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are";
+ ret += " </li>";
+ ret += " <li><code>*.warning</code> and <code>.warning</code> are equivalent,";
+ ret += " </li>";
+ ret += " <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>";
+ ret += " </ul>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note:</strong> it is recommended that the";
+ ret += " <code>*</code>, representing the universal selector, not be";
+ ret += " omitted.</p>";
+ ret += " <h4><a name='univnmsp'>6.2.1. Universal selector and namespaces</a></h4>";
+ ret += " <p>The universal selector allows an optional namespace component. It";
+ ret += " is used as follows:</p>";
+ ret += " <dl>";
+ ret += " <dt><code>ns|*</code></dt>";
+ ret += " <dd>all elements in namespace ns</dd>";
+ ret += " <dt><code>*|*</code></dt>";
+ ret += " <dd>all elements</dd>";
+ ret += " <dt><code>|*</code></dt>";
+ ret += " <dd>all elements without any declared namespace</dd>";
+ ret += " <dt><code>*</code></dt>";
+ ret += " <dd>if no default namespace has been specified, this is equivalent to *|*.";
+ ret += " </dd>";
+ ret += " </dl>";
+ ret += " <p>A universal selector containing a namespace prefix that has not";
+ ret += " been previously declared is an <a href='#Conformance'>invalid</a>";
+ ret += " to the language implementing Selectors. In CSS, such a mechanism is";
+ ret += " defined in the General Syntax module.</p>";
+ ret += " <h3><a name='attribute-selectors'>6.3. Attribute selectors</a></h3>";
+ ret += " <p>Selectors allow the representation of an element's attributes. When";
+ ret += " attribute selectors must be considered to match an element if that";
+ ret += " attribute selector.</p>";
+ ret += " <h4><a name='attribute-representation'>6.3.1. Attribute presence and values";
+ ret += " selectors</a></h4>";
+ ret += " <p>CSS2 introduced four attribute selectors:</p>";
+ ret += " <dl>";
+ ret += " <dt><code>[att]</code>";
+ ret += " </dt><dd>Represents an element with the <code>att</code> attribute, whatever the";
+ ret += " </dd>";
+ ret += " <dt><code>[att=val]</code></dt>";
+ ret += " <dd>Represents an element with the <code>att</code> attribute whose value is";
+ ret += " </dd>";
+ ret += " <dt><code>[att~=val]</code></dt>";
+ ret += " <dd>Represents an element with the <code>att</code> attribute whose value is";
+ ret += " a <a href='#whitespace'>whitespace</a>-separated list of words, one";
+ ret += " represent anything (since the words are <em>separated</em> by";
+ ret += " </dd>";
+ ret += " <dt><code>[att|=val]</code>";
+ ret += " </dt><dd>Represents an element with the <code>att</code> attribute, its value";
+ ret += " matches (e.g., the <code>hreflang</code> attribute on the";
+ ret += " <code>link</code> element in HTML) as described in RFC 3066 (<a href='#refsRFC3066'>[RFC3066]</a>). For <code>lang</code> (or";
+ ret += " <code>xml:lang</code>) language subcode matching, please see <a href='#lang-pseudo'>the <code>:lang</code> pseudo-class</a>.";
+ ret += " </dd>";
+ ret += " </dl>";
+ ret += " <p>Attribute values must be identifiers or strings. The";
+ ret += " case-sensitivity of attribute names and values in selectors depends on";
+ ret += " the document language.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following attribute selector represents an <code>h1</code>";
+ ret += " element that carries the <code>title</code> attribute, whatever its";
+ ret += " value:</p>";
+ ret += " <pre>h1[title]</pre>";
+ ret += " <p>In the following example, the selector represents a";
+ ret += " <code>span</code> element whose <code>class</code> attribute has";
+ ret += " exactly the value 'example':</p>";
+ ret += " <pre>span[class='example']</pre>";
+ ret += " <p>Multiple attribute selectors can be used to represent several";
+ ret += " attribute. Here, the selector represents a <code>span</code> element";
+ ret += " whose <code>hello</code> attribute has exactly the value 'Cleveland'";
+ ret += " and whose <code>goodbye</code> attribute has exactly the value";
+ ret += " 'Columbus':</p>";
+ ret += " <pre>span[hello='Cleveland'][goodbye='Columbus']</pre>";
+ ret += " <p>The following selectors illustrate the differences between '='";
+ ret += " 'copyright copyleft copyeditor' on a <code>rel</code> attribute. The";
+ ret += " second selector will only represent an <code>a</code> element with";
+ ret += " an <code>href</code> attribute having the exact value";
+ ret += " 'http://www.w3.org/'.</p>";
+ ret += " <pre>a[rel~='copyright']";
+ ret += " a[href='http://www.w3.org/']</pre>";
+ ret += " <p>The following selector represents a <code>link</code> element";
+ ret += " whose <code>hreflang</code> attribute is exactly 'fr'.</p>";
+ ret += " <pre>link[hreflang=fr]</pre>";
+ ret += " <p>The following selector represents a <code>link</code> element for";
+ ret += " which the values of the <code>hreflang</code> attribute begins with";
+ ret += " 'en', including 'en', 'en-US', and 'en-cockney':</p>";
+ ret += " <pre>link[hreflang|='en']</pre>";
+ ret += " <p>Similarly, the following selectors represents a";
+ ret += " <code>DIALOGUE</code> element whenever it has one of two different";
+ ret += " values for an attribute <code>character</code>:</p>";
+ ret += " <pre>DIALOGUE[character=romeo]";
+ ret += " DIALOGUE[character=juliet]</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='attribute-substrings'></a>6.3.2. Substring matching attribute";
+ ret += " selectors</h4>";
+ ret += " <p>Three additional attribute selectors are provided for matching";
+ ret += " substrings in the value of an attribute:</p>";
+ ret += " <dl>";
+ ret += " <dt><code>[att^=val]</code></dt>";
+ ret += " <dd>Represents an element with the <code>att</code> attribute whose value";
+ ret += " </dd>";
+ ret += " <dt><code>[att$=val]</code>";
+ ret += " </dt><dd>Represents an element with the <code>att</code> attribute whose value";
+ ret += " </dd>";
+ ret += " <dt><code>[att*=val]</code>";
+ ret += " </dt><dd>Represents an element with the <code>att</code> attribute whose value";
+ ret += " </dd>";
+ ret += " </dl>";
+ ret += " <p>Attribute values must be identifiers or strings. The";
+ ret += " case-sensitivity of attribute names in selectors depends on the";
+ ret += " document language.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following selector represents an HTML <code>object</code>,";
+ ret += " image:</p>";
+ ret += " <pre>object[type^='image/']</pre>";
+ ret += " <p>The following selector represents an HTML anchor <code>a</code> with an";
+ ret += " <code>href</code> attribute whose value ends with '.html'.</p>";
+ ret += " <pre>a[href$='.html']</pre>";
+ ret += " <p>The following selector represents an HTML paragraph with a";
+ ret += " <code>title</code>";
+ ret += " attribute whose value contains the substring 'hello'</p>";
+ ret += " <pre>p[title*='hello']</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='attrnmsp'>6.3.3. Attribute selectors and namespaces</a></h4>";
+ ret += " <p>Attribute selectors allow an optional namespace component to the";
+ ret += " separator 'vertical bar' (<code>|</code>). In keeping with";
+ ret += " apply to attributes, therefore attribute selectors without a namespace";
+ ret += " (equivalent to '<code>|attr</code>'). An asterisk may be used for the";
+ ret += " </p><p>An attribute selector with an attribute name containing a namespace";
+ ret += " prefix that has not been previously declared is an <a href='#Conformance'>invalid</a> selector. The mechanism for";
+ ret += " a namespace prefix is left up to the language implementing Selectors.";
+ ret += " </p><div class='example'>";
+ ret += " <p>CSS examples:</p>";
+ ret += " <pre>@namespace foo 'http://www.example.com';";
+ ret += " [att] { color: green }</pre>";
+ ret += " <p>The first rule will match only elements with the attribute";
+ ret += " <code>att</code> in the 'http://www.example.com' namespace with the";
+ ret += " value 'val'.</p>";
+ ret += " <p>The second rule will match only elements with the attribute";
+ ret += " <code>att</code> regardless of the namespace of the attribute";
+ ret += " (including no declared namespace).</p>";
+ ret += " <p>The last two rules are equivalent and will match only elements";
+ ret += " with the attribute <code>att</code> where the attribute is not";
+ ret += " declared to be in a namespace.</p>";
+ ret += " </div>";
+ ret += " <h4><a name='def-values'>6.3.4. Default attribute values in DTDs</a></h4>";
+ ret += " <p>Attribute selectors represent explicitly set attribute values in";
+ ret += " selectors. Selectors should be designed so that they work even if the";
+ ret += " default values are not included in the document tree.</p>";
+ ret += " <p>More precisely, a UA is <em>not</em> required to read an 'external";
+ ret += " subset' of the DTD but <em>is</em> required to look for default";
+ ret += " attribute values in the document's 'internal subset.' (See <a href='#refsXML10'>[XML10]</a> for definitions of these subsets.)</p>";
+ ret += " <p>A UA that recognizes an XML namespace <a href='#refsXMLNAMES'>[XMLNAMES]</a> is not required to use its";
+ ret += " required to use its built-in knowledge of the XHTML DTD.)</p>";
+ ret += " <p class='note'><strong>Note:</strong> Typically, implementations";
+ ret += " choose to ignore external subsets.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>Consider an element EXAMPLE with an attribute 'notation' that has a";
+ ret += " default value of 'decimal'. The DTD fragment might be</p>";
+ ret += " <pre class='dtd-example'><!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'></pre>";
+ ret += " <p>If the style sheet contains the rules</p>";
+ ret += " <pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
+ ret += " EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>";
+ ret += " <p>the first rule will not match elements whose 'notation' attribute";
+ ret += " attribute selector for the default value must be dropped:</p>";
+ ret += " <pre>EXAMPLE { /*... default property settings ...*/ }";
+ ret += " EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>";
+ ret += " <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is";
+ ret += " cases' style rules.</p>";
+ ret += " </div>";
+ ret += " <h3><a name='class-html'>6.4. Class selectors</a></h3>";
+ ret += " <p>Working with HTML, authors may use the period (U+002E,";
+ ret += " <code>.</code>) notation as an alternative to the <code>~=</code>";
+ ret += " notation when representing the <code>class</code> attribute. Thus, for";
+ ret += " HTML, <code>div.value</code> and <code>div[class~=value]</code> have";
+ ret += " 'period' (<code>.</code>).</p>";
+ ret += " <p>UAs may apply selectors using the period (.) notation in XML";
+ ret += " 1.0 <a href='#refsSVG'>[SVG]</a> describes the <a href='http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute'>SVG";
+ ret += " 'class' attribute</a> and how a UA should interpret it, and";
+ ret += " similarly MathML 1.01 <a href='#refsMATH'>[MATH]</a> describes the <a href='http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4'>MathML";
+ ret += " 'class' attribute</a>.)</p>";
+ ret += " <div class='example'>";
+ ret += " <p>CSS examples:</p>";
+ ret += " <p>We can assign style information to all elements with";
+ ret += " <code>class~='pastoral'</code> as follows:</p>";
+ ret += " <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>";
+ ret += " <p>or just</p>";
+ ret += " <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>";
+ ret += " <p>The following assigns style only to H1 elements with";
+ ret += " <code>class~='pastoral'</code>:</p>";
+ ret += " <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>";
+ ret += " <p>Given these rules, the first H1 instance below would not have";
+ ret += " green text, while the second would:</p>";
+ ret += " <pre><H1>Not green</H1>";
+ ret += " <H1 class='pastoral'>Very green</H1></pre>";
+ ret += " </div>";
+ ret += " <p>To represent a subset of 'class' values, each value must be preceded";
+ ret += " by a '.', in any order.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>CSS example:</p>";
+ ret += " <p>The following rule matches any P element whose 'class' attribute";
+ ret += " has been assigned a list of <a href='#whitespace'>whitespace</a>-separated values that includes";
+ ret += " 'pastoral' and 'marine':</p>";
+ ret += " <pre>p.pastoral.marine { color: green }</pre>";
+ ret += " <p>This rule matches when <code>class='pastoral blue aqua";
+ ret += " marine'</code> but does not match for <code>class='pastoral";
+ ret += " blue'</code>.</p>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note:</strong> Because CSS gives considerable";
+ ret += " not.</p>";
+ ret += " <p class='note'><strong>Note:</strong> If an element has multiple";
+ ret += " this specification.</p>";
+ ret += " <h3><a name='id-selectors'>6.5. ID selectors</a></h3>";
+ ret += " <p>Document languages may contain attributes that are declared to be";
+ ret += " applies.</p>";
+ ret += " <p>An ID-typed attribute of a document language allows authors to";
+ ret += " ID selectors represent an element instance based on its identifier. An";
+ ret += " <code>#</code>) immediately followed by the ID value, which must be an";
+ ret += " identifier.</p>";
+ ret += " <p>Selectors does not specify how a UA knows the ID-typed attribute of";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following ID selector represents an <code>h1</code> element";
+ ret += " whose ID-typed attribute has the value 'chapter1':</p>";
+ ret += " <pre>h1#chapter1</pre>";
+ ret += " <p>The following ID selector represents any element whose ID-typed";
+ ret += " attribute has the value 'chapter1':</p>";
+ ret += " <pre>#chapter1</pre>";
+ ret += " <p>The following selector represents any element whose ID-typed";
+ ret += " attribute has the value 'z98y'.</p>";
+ ret += " <pre>*#z98y</pre>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note.</strong> In XML 1.0 <a href='#refsXML10'>[XML10]</a>, the information about which attribute";
+ ret += " should use normal attribute selectors instead:";
+ ret += " <code>[name=p371]</code> instead of <code>#p371</code>. Elements in";
+ ret += " XML 1.0 documents without a DTD do not have IDs at all.</p>";
+ ret += " <p>If an element has multiple ID attributes, all of them must be";
+ ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>";
+ ret += " <h3><a name='pseudo-classes'>6.6. Pseudo-classes</a></h3>";
+ ret += " <p>The pseudo-class concept is introduced to permit selection based on";
+ ret += " expressed using the other simple selectors.</p>";
+ ret += " <p>A pseudo-class always consists of a 'colon'";
+ ret += " (<code>:</code>) followed by the name of the pseudo-class and";
+ ret += " optionally by a value between parentheses.</p>";
+ ret += " <p>Pseudo-classes are allowed in all sequences of simple selectors";
+ ret += " sequences of simple selectors, after the leading type selector or";
+ ret += " document.</p>";
+ ret += " <h4><a name='dynamic-pseudos'>6.6.1. Dynamic pseudo-classes</a></h4>";
+ ret += " <p>Dynamic pseudo-classes classify elements on characteristics other";
+ ret += " that cannot be deduced from the document tree.</p>";
+ ret += " <p>Dynamic pseudo-classes do not appear in the document source or";
+ ret += " document tree.</p>";
+ ret += " <h5>The <a name='link'>link pseudo-classes: :link and :visited</a></h5>";
+ ret += " <p>User agents commonly display unvisited links differently from";
+ ret += " previously visited ones. Selectors";
+ ret += " provides the pseudo-classes <code>:link</code> and";
+ ret += " <code>:visited</code> to distinguish them:</p>";
+ ret += " <ul>";
+ ret += " <li>The <code>:link</code> pseudo-class applies to links that have";
+ ret += " </li>";
+ ret += " <li>The <code>:visited</code> pseudo-class applies once the link has";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " <p>After some amount of time, user agents may choose to return a";
+ ret += " visited link to the (unvisited) ':link' state.</p>";
+ ret += " <p>The two states are mutually exclusive.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The following selector represents links carrying class";
+ ret += " <code>external</code> and already visited:</p>";
+ ret += " <pre>a.external:visited</pre>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note:</strong> It is possible for style sheet";
+ ret += " </p><p>UAs may therefore treat all links as unvisited links, or implement";
+ ret += " and unvisited links differently.</p>";
+ ret += " <h5>The <a name='useraction-pseudos'>user action pseudo-classes";
+ ret += " :hover, :active, and :focus</a></h5>";
+ ret += " <p>Interactive user agents sometimes change the rendering in response";
+ ret += " to user actions. Selectors provides";
+ ret += " acting on.</p>";
+ ret += " <ul>";
+ ret += " <li>The <code>:hover</code> pseudo-class applies while the user";
+ ret += " element. User agents not that do not support <a href='http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group'>interactive";
+ ret += " media</a> do not have to support this pseudo-class. Some conforming";
+ ret += " user agents that support <a href='http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group'>interactive";
+ ret += " media</a> may not be able to support this pseudo-class (e.g., a pen";
+ ret += " </li>";
+ ret += " <li>The <code>:active</code> pseudo-class applies while an element";
+ ret += " </li>";
+ ret += " <li>The <code>:focus</code> pseudo-class applies while an element";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " <p>There may be document language or implementation specific limits on";
+ ret += " which elements can become <code>:active</code> or acquire";
+ ret += " <code>:focus</code>.</p>";
+ ret += " <p>These pseudo-classes are not mutually exclusive. An element may";
+ ret += " match several pseudo-classes at the same time.</p>";
+ ret += " <p>Selectors doesn't define if the parent of an element that is";
+ ret += " ':active' or ':hover' is also in that state.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>a:link /* unvisited links */";
+ ret += " a:active /* active links */</pre>";
+ ret += " <p>An example of combining dynamic pseudo-classes:</p>";
+ ret += " <pre>a:focus";
+ ret += " a:focus:hover</pre>";
+ ret += " <p>The last selector matches <code>a</code> elements that are in";
+ ret += " the pseudo-class :focus and in the pseudo-class :hover.</p>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note:</strong> An element can be both ':visited'";
+ ret += " and ':active' (or ':link' and ':active').</p>";
+ ret += " <h4><a name='target-pseudo'>6.6.2. The target pseudo-class :target</a></h4>";
+ ret += " <p>Some URIs refer to a location within a resource. This kind of URI";
+ ret += " identifier (called the fragment identifier).</p>";
+ ret += " <p>URIs with fragment identifiers link to a certain element within the";
+ ret += " pointing to an anchor named <code>section_2</code> in an HTML";
+ ret += " document:</p>";
+ ret += " <pre>http://example.com/html/top.html#section_2</pre>";
+ ret += " <p>A target element can be represented by the <code>:target</code>";
+ ret += " the document has no target element.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <pre>p.note:target</pre>";
+ ret += " <p>This selector represents a <code>p</code> element of class";
+ ret += " <code>note</code> that is the target element of the referring";
+ ret += " URI.</p>";
+ ret += " </div>";
+ ret += " <div class='example'>";
+ ret += " <p>CSS example:</p>";
+ ret += " <p>Here, the <code>:target</code> pseudo-class is used to make the";
+ ret += " target element red and place an image before it, if there is one:</p>";
+ ret += " <pre>*:target { color : red }";
+ ret += " *:target::before { content : url(target.png) }</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='lang-pseudo'>6.6.3. The language pseudo-class :lang</a></h4>";
+ ret += " <p>If the document language specifies how the human language of an";
+ ret += " element is determined, it is possible to write selectors that";
+ ret += " represent an element based on its language. For example, in HTML <a href='#refsHTML4'>[HTML4]</a>, the language is determined by a";
+ ret += " combination of the <code>lang</code> attribute, the <code>meta</code>";
+ ret += " headers). XML uses an attribute called <code>xml:lang</code>, and";
+ ret += " the language.</p>";
+ ret += " <p>The pseudo-class <code>:lang(C)</code> represents an element that";
+ ret += " <code>:lang()</code> selector is based solely on the identifier C";
+ ret += " element's language value, in the same way as if performed by the <a href='#attribute-representation'>'|='</a> operator in attribute";
+ ret += " selectors. The identifier C does not have to be a valid language";
+ ret += " name.</p>";
+ ret += " <p>C must not be empty. (If it is, the selector is invalid.)</p>";
+ ret += " <p class='note'><strong>Note:</strong> It is recommended that";
+ ret += " documents and protocols indicate language using codes from RFC 3066 <a href='#refsRFC3066'>[RFC3066]</a> or its successor, and by means of";
+ ret += " 'xml:lang' attributes in the case of XML-based documents <a href='#refsXML10'>[XML10]</a>. See <a href='http://www.w3.org/International/questions/qa-lang-2or3.html'>";
+ ret += " 'FAQ: Two-letter or three-letter language codes.'</a></p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The two following selectors represent an HTML document that is in";
+ ret += " Belgian, French, or German. The two next selectors represent";
+ ret += " <code>q</code> quotations in an arbitrary element in Belgian, French,";
+ ret += " or German.</p>";
+ ret += " <pre>html:lang(fr-be)";
+ ret += " :lang(de) > q</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='UIstates'>6.6.4. The UI element states pseudo-classes</a></h4>";
+ ret += " <h5><a name='enableddisabled'>The :enabled and :disabled pseudo-classes</a></h5>";
+ ret += " <p>The <code>:enabled</code> pseudo-class allows authors to customize";
+ ret += " an enabled <code>input</code> element without also specifying what it";
+ ret += " would look like when it was disabled.</p>";
+ ret += " <p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the";
+ ret += " element should look.</p>";
+ ret += " <p>Most elements will be neither enabled nor disabled. An element is";
+ ret += " presently activate it or transfer focus to it.</p>";
+ ret += " <h5><a name='checked'>The :checked pseudo-class</a></h5>";
+ ret += " <p>Radio and checkbox elements can be toggled by the user. Some menu";
+ ret += " toggled 'on' the <code>:checked</code> pseudo-class applies. The";
+ ret += " <code>:checked</code> pseudo-class initially applies to such elements";
+ ret += " that have the HTML4 <code>selected</code> and <code>checked</code>";
+ ret += " attributes as described in <a href='http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1'>Section";
+ ret += " 17.2.1 of HTML4</a>, but of course the user can toggle 'off' such";
+ ret += " elements in which case the <code>:checked</code> pseudo-class would no";
+ ret += " longer apply. While the <code>:checked</code> pseudo-class is dynamic";
+ ret += " on the presence of the semantic HTML4 <code>selected</code> and";
+ ret += " <code>checked</code> attributes, it applies to all media.";
+ ret += " </p><h5><a name='indeterminate'>The :indeterminate pseudo-class</a></h5>";
+ ret += " <div class='note'>";
+ ret += " <p>Radio and checkbox elements can be toggled by the user, but are";
+ ret += " This can be due to an element attribute, or DOM manipulation.</p>";
+ ret += " <p>A future version of this specification may introduce an";
+ ret += " <code>:indeterminate</code> pseudo-class that applies to such elements.";
+ ret += " <!--While the <code>:indeterminate</code> pseudo-class is dynamic in";
+ ret += " the presence of an element attribute, it applies to all media.</p>";
+ ret += " <p>Components of a radio-group initialized with no pre-selected choice";
+ ret += " are an example of :indeterminate state.--></p>";
+ ret += " </div>";
+ ret += " <h4><a name='structural-pseudos'>6.6.5. Structural pseudo-classes</a></h4>";
+ ret += " <p>Selectors introduces the concept of <dfn>structural";
+ ret += " pseudo-classes</dfn> to permit selection based on extra information that";
+ ret += " the document tree but cannot be represented by other simple selectors or";
+ ret += " </p><p>Note that standalone pieces of PCDATA (text nodes in the DOM) are";
+ ret += " </p><h5><a name='root-pseudo'>:root pseudo-class</a></h5>";
+ ret += " <p>The <code>:root</code> pseudo-class represents an element that is";
+ ret += " <code>HTML</code> element.";
+ ret += " </p><h5><a name='nth-child-pseudo'>:nth-child() pseudo-class</a></h5>";
+ ret += " <p>The";
+ ret += " <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>";
+ ret += " <var>a</var><code>n</code>+<var>b</var>-1 siblings";
+ ret += " <strong>before</strong> it in the document tree, for a given positive";
+ ret += " integer or zero value of <code>n</code>, and has a parent element. In";
+ ret += " other words, this matches the <var>b</var>th child of an element after";
+ ret += " all the children have been split into groups of <var>a</var> elements";
+ ret += " each. For example, this allows the selectors to address every other";
+ ret += " of paragraph text in a cycle of four. The <var>a</var> and";
+ ret += " <var>b</var> values must be zero, negative integers or positive";
+ ret += " </p><p>In addition to this, <code>:nth-child()</code> can take";
+ ret += " '<code>odd</code>' and '<code>even</code>' as arguments instead.";
+ ret += " '<code>odd</code>' has the same signification as <code>2n+1</code>,";
+ ret += " and '<code>even</code>' has the same signification as <code>2n</code>.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
+ ret += " p:nth-child(4n+4) { color: purple; }</pre>";
+ ret += " </div>";
+ ret += " <p>When <var>a</var>=0, no repeating is used, so for example";
+ ret += " <code>:nth-child(0n+5)</code> matches only the fifth child. When";
+ ret += " <var>a</var>=0, the <var>a</var><code>n</code> part need not be";
+ ret += " <code>:nth-child(<var>b</var>)</code> and the last example simplifies";
+ ret += " to <code>:nth-child(5)</code>.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */";
+ ret += " foo:nth-child(1) /* same */</pre>";
+ ret += " </div>";
+ ret += " <p>When <var>a</var>=1, the number may be omitted from the rule.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following selectors are therefore equivalent:</p>";
+ ret += " <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */";
+ ret += " bar /* same but lower specificity (0,0,1) */</pre>";
+ ret += " </div>";
+ ret += " <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In";
+ ret += " such a case, the <var>b</var> part may be omitted.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */";
+ ret += " tr:nth-child(2n) /* same */</pre>";
+ ret += " </div>";
+ ret += " <p>If both <var>a</var> and <var>b</var> are equal to zero, the";
+ ret += " pseudo-class represents no element in the document tree.</p>";
+ ret += " <p>The value <var>a</var> can be negative, but only the positive";
+ ret += " values of <var>a</var><code>n</code>+<var>b</var>, for";
+ ret += " <code>n</code>≥0, may represent an element in the document";
+ ret += " tree.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>";
+ ret += " </div>";
+ ret += " <p>When the value <var>b</var> is negative, the '+' character in the";
+ ret += " character indicating the negative value of <var>b</var>).</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */";
+ ret += " :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='nth-last-child-pseudo'>:nth-last-child() pseudo-class</a></h5>";
+ ret += " <p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>";
+ ret += " <var>a</var><code>n</code>+<var>b</var>-1 siblings";
+ ret += " <strong>after</strong> it in the document tree, for a given positive";
+ ret += " integer or zero value of <code>n</code>, and has a parent element. See";
+ ret += " <code>:nth-child()</code> pseudo-class for the syntax of its argument.";
+ ret += " It also accepts the '<code>even</code>' and '<code>odd</code>' values";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */";
+ ret += " counting from the last one */</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='nth-of-type-pseudo'>:nth-of-type() pseudo-class</a></h5>";
+ ret += " <p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>";
+ ret += " <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same";
+ ret += " element name <strong>before</strong> it in the document tree, for a";
+ ret += " given zero or positive integer value of <code>n</code>, and has a";
+ ret += " parent element. In other words, this matches the <var>b</var>th child";
+ ret += " groups of a elements each. See <code>:nth-child()</code> pseudo-class";
+ ret += " '<code>even</code>' and '<code>odd</code>' values.";
+ ret += " </p><div class='example'>";
+ ret += " <p>CSS example:</p>";
+ ret += " <p>This allows an author to alternate the position of floated images:</p>";
+ ret += " <pre>img:nth-of-type(2n+1) { float: right; }";
+ ret += " img:nth-of-type(2n) { float: left; }</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='nth-last-of-type-pseudo'>:nth-last-of-type() pseudo-class</a></h5>";
+ ret += " <p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>";
+ ret += " <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same";
+ ret += " element name <strong>after</strong> it in the document tree, for a";
+ ret += " given zero or positive integer value of <code>n</code>, and has a";
+ ret += " parent element. See <code>:nth-child()</code> pseudo-class for the";
+ ret += " syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>'";
+ ret += " </p><div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>To represent all <code>h2</code> children of an XHTML";
+ ret += " <code>body</code> except the first and last, one could use the";
+ ret += " following selector:</p>";
+ ret += " <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>";
+ ret += " <p>In this case, one could also use <code>:not()</code>, although the";
+ ret += " selector ends up being just as long:</p>";
+ ret += " <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='first-child-pseudo'>:first-child pseudo-class</a></h5>";
+ ret += " <p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following selector represents a <code>p</code> element that is";
+ ret += " the first child of a <code>div</code> element:</p>";
+ ret += " <pre>div > p:first-child</pre>";
+ ret += " <p>This selector can represent the <code>p</code> inside the";
+ ret += " <code>div</code> of the following fragment:</p>";
+ ret += " <pre><p> The last P before the note.</p>";
+ ret += " </div></pre>";
+ ret += " but cannot represent the second <code>p</code> in the following";
+ ret += " <pre><p> The last P before the note.</p>";
+ ret += " </div></pre>";
+ ret += " <p>The following two selectors are usually equivalent:</p>";
+ ret += " <pre>* > a:first-child /* a is first child of any element */";
+ ret += " a:first-child /* Same (assuming a is not the root element) */</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='last-child-pseudo'>:last-child pseudo-class</a></h5>";
+ ret += " <p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>";
+ ret += " </p><div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The following selector represents a list item <code>li</code> that";
+ ret += " is the last child of an ordered list <code>ol</code>.";
+ ret += " </p><pre>ol > li:last-child</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='first-of-type-pseudo'>:first-of-type pseudo-class</a></h5>";
+ ret += " <p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>";
+ ret += " </p><div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The following selector represents a definition title";
+ ret += " <code>dt</code> inside a definition list <code>dl</code>, this";
+ ret += " <code>dt</code> being the first of its type in the list of children of";
+ ret += " its parent element.</p>";
+ ret += " <pre>dl dt:first-of-type</pre>";
+ ret += " <p>It is a valid description for the first two <code>dt</code>";
+ ret += " elements in the following example but not for the third one:</p>";
+ ret += " <pre><dl>";
+ ret += " </dl></pre>";
+ ret += " </div>";
+ ret += " <h5><a name='last-of-type-pseudo'>:last-of-type pseudo-class</a></h5>";
+ ret += " <p>Same as <code>:nth-last-of-type(1)</code>. The";
+ ret += " <code>:last-of-type</code> pseudo-class represents an element that is";
+ ret += " element.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The following selector represents the last data cell";
+ ret += " <code>td</code> of a table row.</p>";
+ ret += " <pre>tr > td:last-of-type</pre>";
+ ret += " </div>";
+ ret += " <h5><a name='only-child-pseudo'>:only-child pseudo-class</a></h5>";
+ ret += " <p>Represents an element that has a parent element and whose parent";
+ ret += " <code>:first-child:last-child</code> or";
+ ret += " <code>:nth-child(1):nth-last-child(1)</code>, but with a lower";
+ ret += " specificity.</p>";
+ ret += " <h5><a name='only-of-type-pseudo'>:only-of-type pseudo-class</a></h5>";
+ ret += " <p>Represents an element that has a parent element and whose parent";
+ ret += " as <code>:first-of-type:last-of-type</code> or";
+ ret += " <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower";
+ ret += " specificity.</p>";
+ ret += " <h5><a name='empty-pseudo'></a>:empty pseudo-class</h5>";
+ ret += " <p>The <code>:empty</code> pseudo-class represents an element that has";
+ ret += " empty or not.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p><code>p:empty</code> is a valid representation of the following fragment:";
+ ret += " </p>";
+ ret += " <pre><p></p></pre>";
+ ret += " <p><code>foo:empty</code> is not a valid representation for the";
+ ret += " following fragments:</p>";
+ ret += " <pre><foo>bar</foo></pre>";
+ ret += " <pre><foo><bar>bla</bar></foo></pre>";
+ ret += " <pre><foo>this is not <bar>:empty</bar></foo></pre>";
+ ret += " </div>";
+ ret += " <h4><a name='content-selectors'>6.6.6. Blank</a></h4>";
+ ret += " <!-- It's the Return of Appendix H!!! Run away! -->";
+ ret += " <p>This section intentionally left blank.</p>";
+ ret += " <!-- (used to be :contains()) -->";
+ ret += " <h4><a name='negation'></a>6.6.7. The negation pseudo-class</h4>";
+ ret += " <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a";
+ ret += " functional notation taking a <a href='#simple-selectors-dfn'>simple";
+ ret += " selector</a> (excluding the negation pseudo-class itself and";
+ ret += " <!-- pseudo-elements are not simple selectors, so the above paragraph";
+ ret += " may be a bit confusing -->";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following CSS selector matches all <code>button</code>";
+ ret += " elements in an HTML document that are not disabled.</p>";
+ ret += " <pre>button:not([DISABLED])</pre>";
+ ret += " <p>The following selector represents all but <code>FOO</code>";
+ ret += " elements.</p>";
+ ret += " <pre>*:not(FOO)</pre>";
+ ret += " <p>The following group of selectors represents all HTML elements";
+ ret += " except links.</p>";
+ ret += " <pre>html|*:not(:link):not(:visited)</pre>";
+ ret += " </div>";
+ ret += " <p>Default namespace declarations do not affect the argument of the";
+ ret += " type selector.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>Assuming that the default namespace is bound to";
+ ret += " elements that are not in that namespace:</p>";
+ ret += " <pre>*|*:not(*)</pre>";
+ ret += " <p>The following CSS selector matches any element being hovered,";
+ ret += " rule when they <em>are</em> being hovered.</p>";
+ ret += " <pre>*|*:not(:hover)</pre>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note</strong>: the :not() pseudo allows";
+ ret += " useless selectors to be written. For instance <code>:not(*|*)</code>,";
+ ret += " which represents no element at all, or <code>foo:not(bar)</code>,";
+ ret += " which is equivalent to <code>foo</code> but with a higher";
+ ret += " specificity.</p>";
+ ret += " <h3><a name='pseudo-elements'>7. Pseudo-elements</a></h3>";
+ ret += " <p>Pseudo-elements create abstractions about the document tree beyond";
+ ret += " source document (e.g., the <code>::before</code> and";
+ ret += " <code>::after</code> pseudo-elements give access to generated";
+ ret += " content).</p>";
+ ret += " <p>A pseudo-element is made of two colons (<code>::</code>) followed";
+ ret += " by the name of the pseudo-element.</p>";
+ ret += " <p>This <code>::</code> notation is introduced by the current document";
+ ret += " <code>:first-line</code>, <code>:first-letter</code>,";
+ ret += " <code>:before</code> and <code>:after</code>). This compatibility is";
+ ret += " not allowed for the new pseudo-elements introduced in CSS level 3.</p>";
+ ret += " <p>Only one pseudo-element may appear per selector, and if present it";
+ ret += " must appear after the sequence of simple selectors that represents the";
+ ret += " <a href='#subject'>subjects</a> of the selector. <span class='note'>A";
+ ret += " pesudo-elements per selector.</span></p>";
+ ret += " <h4><a name='first-line'>7.1. The ::first-line pseudo-element</a></h4>";
+ ret += " <p>The <code>::first-line</code> pseudo-element describes the contents";
+ ret += " </p><div class='example'>";
+ ret += " <p>CSS example:</p>";
+ ret += " <pre>p::first-line { text-transform: uppercase }</pre>";
+ ret += " <p>The above rule means 'change the letters of the first line of every";
+ ret += " paragraph to uppercase'.</p>";
+ ret += " </div>";
+ ret += " <p>The selector <code>p::first-line</code> does not match any real";
+ ret += " agents will insert at the beginning of every paragraph.</p>";
+ ret += " <p>Note that the length of the first line depends on a number of";
+ ret += " an ordinary HTML paragraph such as:</p>";
+ ret += " <pre> <P>This is a somewhat long HTML ";
+ ret += " </pre>";
+ ret += " <p>the lines of which happen to be broken as follows:";
+ ret += " </p><pre> THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
+ ret += " </pre>";
+ ret += " <p>This paragraph might be 'rewritten' by user agents to include the";
+ ret += " <em>fictional tag sequence</em> for <code>::first-line</code>. This";
+ ret += " fictional tag sequence helps to show how properties are inherited.</p>";
+ ret += " <pre> <P><b><P::first-line></b> This is a somewhat long HTML ";
+ ret += " paragraph that <b></P::first-line></b> will be broken into several";
+ ret += " </pre>";
+ ret += " <p>If a pseudo-element breaks up a real element, the desired effect";
+ ret += " with a <code>span</code> element:</p>";
+ ret += " <pre> <P><b><SPAN class='test'></b> This is a somewhat long HTML";
+ ret += " lines.<b></SPAN></b> The first line will be identified";
+ ret += " </pre>";
+ ret += " <p>the user agent could simulate start and end tags for";
+ ret += " <code>span</code> when inserting the fictional tag sequence for";
+ ret += " <code>::first-line</code>.";
+ ret += " </p><pre> <P><P::first-line><b><SPAN class='test'></b> This is a";
+ ret += " paragraph that will <b></SPAN></b></P::first-line><b><SPAN";
+ ret += " class='test'></b> be";
+ ret += " lines.<b></SPAN></b> The first line will be identified";
+ ret += " </pre>";
+ ret += " <p>In CSS, the <code>::first-line</code> pseudo-element can only be";
+ ret += " or a table-cell.</p>";
+ ret += " <p><a name='first-formatted-line'></a>The 'first formatted line' of an";
+ ret += " line of the <code>div</code> in <code><DIV><P>This";
+ ret += " line...</P></DIV></code> is the first line of the <code>p</code>";
+ ret += " that both <code>p</code> and <code>div</code> are block-level).";
+ ret += " </p><p>The first line of a table-cell or inline-block cannot be the first";
+ ret += " formatted line of an ancestor element. Thus, in <code><DIV><P";
+ ret += " etcetera</DIV></code> the first formatted line of the";
+ ret += " <code>div</code> is not the line 'Hello'.";
+ ret += " </p><p class='note'>Note that the first line of the <code>p</code> in this";
+ ret += " fragment: <code><p><br>First...</code> doesn't contain any";
+ ret += " letters (assuming the default style for <code>br</code> in HTML";
+ ret += " </p><p>A UA should act as if the fictional start tags of the";
+ ret += " <code>::first-line</code> pseudo-elements were nested just inside the";
+ ret += " is an example. The fictional tag sequence for</p>";
+ ret += " <pre> <DIV>";
+ ret += " </pre>";
+ ret += " <p>is</p>";
+ ret += " <pre> <DIV>";
+ ret += " </pre>";
+ ret += " <p>The <code>::first-line</code> pseudo-element is similar to an";
+ ret += " following properties apply to a <code>::first-line</code>";
+ ret += " properties as well.</p>";
+ ret += " <h4><a name='first-letter'>7.2. The ::first-letter pseudo-element</a></h4>";
+ ret += " <p>The <code>::first-letter</code> pseudo-element represents the first";
+ ret += " is 'none'; otherwise, it is similar to a floated element.</p>";
+ ret += " <p>In CSS, these are the properties that apply to <code>::first-letter</code>";
+ ret += " of the letter, unlike for normal elements.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>This example shows a possible rendering of an initial cap. Note";
+ ret += " <code>::first-letter</code>";
+ ret += " fictional start tag of the first letter is inside the <span>span</span>,";
+ ret += " the font weight of the first letter is normal, not bold as the <span>span</span>:";
+ ret += " </p><pre> p { line-height: 1.1 }";
+ ret += " </pre>";
+ ret += " <div class='figure'>";
+ ret += " <p><img src='' alt='Image illustrating the ::first-letter pseudo-element'>";
+ ret += " </p></div>";
+ ret += " </div>";
+ ret += " <div class='example'>";
+ ret += " <p>The following CSS will make a drop cap initial letter span about two";
+ ret += " lines:</p>";
+ ret += " <pre> <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
+ ret += " </pre>";
+ ret += " <p>This example might be formatted as follows:</p>";
+ ret += " <div class='figure'>";
+ ret += " <p><img src='' alt='Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements'>";
+ ret += " </p>";
+ ret += " </div>";
+ ret += " <p>The <span class='index-inst' title='fictional tag";
+ ret += " sequence'>fictional tag sequence</span> is:</p>";
+ ret += " <pre> <P>";
+ ret += " </pre>";
+ ret += " <p>Note that the <code>::first-letter</code> pseudo-element tags abut";
+ ret += " block element.</p></div>";
+ ret += " <p>In order to achieve traditional drop caps formatting, user agents";
+ ret += " glyph outline may be taken into account when formatting.</p>";
+ ret += " <p>Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),";
+ ret += " be included. <a href='#refsUNICODE'>[UNICODE]</a></p>";
+ ret += " <div class='figure'>";
+ ret += " <p><img src='' alt='Quotes that precede the";
+ ret += " first letter should be included.'></p>";
+ ret += " </div>";
+ ret += " <p>The <code>::first-letter</code> also applies if the first letter is";
+ ret += " money.'</p>";
+ ret += " <p>In CSS, the <code>::first-letter</code> pseudo-element applies to";
+ ret += " elements. <span class='note'>A future version of this specification";
+ ret += " types.</span></p>";
+ ret += " <p>The <code>::first-letter</code> pseudo-element can be used with all";
+ ret += " the element, even if that first text is in a descendant.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>The fictional tag sequence for this HTMLfragment:";
+ ret += " </p><pre><div>";
+ ret += " <p>The first text.</pre>";
+ ret += " <p>is:";
+ ret += " </p><pre><div>";
+ ret += " <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>";
+ ret += " </div>";
+ ret += " <p>The first letter of a table-cell or inline-block cannot be the";
+ ret += " first letter of an ancestor element. Thus, in <code><DIV><P";
+ ret += " etcetera</DIV></code> the first letter of the <code>div</code> is";
+ ret += " letter 'H'. In fact, the <code>div</code> doesn't have a first letter.";
+ ret += " </p><p>The first letter must occur on the <a href='#first-formatted-line'>first formatted line.</a> For example, in";
+ ret += " this fragment: <code><p><br>First...</code> the first line";
+ ret += " doesn't contain any letters and <code>::first-letter</code> doesn't";
+ ret += " match anything (assuming the default style for <code>br</code> in HTML";
+ ret += " </p><p>In CSS, if an element is a list item ('display: list-item'), the";
+ ret += " <code>::first-letter</code> applies to the first letter in the";
+ ret += " <code>::first-letter</code> on list items with 'list-style-position:";
+ ret += " inside'. If an element has <code>::before</code> or";
+ ret += " <code>::after</code> content, the <code>::first-letter</code> applies";
+ ret += " to the first letter of the element <em>including</em> that content.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p>After the rule 'p::before {content: 'Note: '}', the selector";
+ ret += " 'p::first-letter' matches the 'N' of 'Note'.</p>";
+ ret += " </div>";
+ ret += " <p>Some languages may have specific rules about how to treat certain";
+ ret += " considered within the <code>::first-letter</code> pseudo-element.";
+ ret += " </p><p>If the letters that would form the ::first-letter are not in the";
+ ret += " same element, such as ''T' in <code><p>'<em>T...</code>, the UA";
+ ret += " both elements, or simply not create a pseudo-element.</p>";
+ ret += " <p>Similarly, if the first letter(s) of the block are not at the start";
+ ret += " </p><div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <p><a name='overlapping-example'>The following example</a> illustrates";
+ ret += " paragraph will be 'red'.</p>";
+ ret += " <pre>p { color: red; font-size: 12pt }";
+ ret += " <P>Some text that ends up on two lines</P></pre>";
+ ret += " <p>Assuming that a line break will occur before the word 'ends', the";
+ ret += " <span class='index-inst' title='fictional tag sequence'>fictional tag";
+ ret += " sequence</span> for this fragment might be:</p>";
+ ret += " <pre><P>";
+ ret += " </P></pre>";
+ ret += " <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>";
+ ret += " element. Properties set on <code>::first-line</code> are inherited by";
+ ret += " <code>::first-letter</code>, but are overridden if the same property is";
+ ret += " <code>::first-letter</code>.</p>";
+ ret += " </div>";
+ ret += " <h4><a name='UIfragments'>7.3.</a> <a name='selection'>The ::selection";
+ ret += " pseudo-element</a></h4>";
+ ret += " <p>The <code>::selection</code> pseudo-element applies to the portion";
+ ret += " field. This pseudo-element should not be confused with the <code><a href='#checked'>:checked</a></code> pseudo-class (which used to be";
+ ret += " named <code>:selected</code>)";
+ ret += " </p><p>Although the <code>::selection</code> pseudo-element is dynamic in";
+ ret += " <a href='#refsCSS21'>[CSS21]</a>) which was originally rendered to a";
+ ret += " <code>::selection</code> state to that other medium, and have all the";
+ ret += " required — UAs may omit the <code>::selection</code>";
+ ret += " </p><p>These are the CSS properties that apply to <code>::selection</code>";
+ ret += " <code>::selection</code> may be ignored.";
+ ret += " </p><h4><a name='gen-content'>7.4. The ::before and ::after pseudo-elements</a></h4>";
+ ret += " <p>The <code>::before</code> and <code>::after</code> pseudo-elements";
+ ret += " content. They are explained in CSS 2.1 <a href='#refsCSS21'>[CSS21]</a>.</p>";
+ ret += " <p>When the <code>::first-letter</code> and <code>::first-line</code>";
+ ret += " pseudo-elements are combined with <code>::before</code> and";
+ ret += " <code>::after</code>, they apply to the first letter or line of the";
+ ret += " element including the inserted text.</p>";
+ ret += " <h2><a name='combinators'>8. Combinators</a></h2>";
+ ret += " <h3><a name='descendant-combinators'>8.1. Descendant combinator</a></h3>";
+ ret += " <p>At times, authors may want selectors to describe an element that is";
+ ret += " <code>EM</code> element that is contained within an <code>H1</code>";
+ ret += " descendant combinator is <a href='#whitespace'>white space</a> that";
+ ret += " separates two sequences of simple selectors. A selector of the form";
+ ret += " '<code>A B</code>' represents an element <code>B</code> that is an";
+ ret += " arbitrary descendant of some ancestor element <code>A</code>.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>For example, consider the following selector:</p>";
+ ret += " <pre>h1 em</pre>";
+ ret += " <p>It represents an <code>em</code> element being the descendant of";
+ ret += " an <code>h1</code> element. It is a correct and valid, but partial,";
+ ret += " description of the following fragment:</p>";
+ ret += " <pre><h1>This <span class='myclass'>headline";
+ ret += " is <em>very</em> important</span></h1></pre>";
+ ret += " <p>The following selector:</p>";
+ ret += " <pre>div * p</pre>";
+ ret += " <p>represents a <code>p</code> element that is a grandchild or later";
+ ret += " descendant of a <code>div</code> element. Note the whitespace on";
+ ret += " of the P.</p>";
+ ret += " <p>The following selector, which combines descendant combinators and";
+ ret += " <a href='#attribute-selectors'>attribute selectors</a>, represents an";
+ ret += " element that (1) has the <code>href</code> attribute set and (2) is";
+ ret += " inside a <code>p</code> that is itself inside a <code>div</code>:</p>";
+ ret += " <pre>div p *[href]</pre>";
+ ret += " </div>";
+ ret += " <h3><a name='child-combinators'>8.2. Child combinators</a></h3>";
+ ret += " <p>A <dfn>child combinator</dfn> describes a childhood relationship";
+ ret += " 'greater-than sign' (<code>></code>) character and";
+ ret += " separates two sequences of simple selectors.";
+ ret += " </p><div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following selector represents a <code>p</code> element that is";
+ ret += " child of <code>body</code>:</p>";
+ ret += " <pre>body > p</pre>";
+ ret += " <p>The following example combines descendant combinators and child";
+ ret += " combinators.</p>";
+ ret += " <pre>div ol>li p</pre>";
+ ret += " <!-- LEAVE THOSE SPACES OUT! see below -->";
+ ret += " <p>It represents a <code>p</code> element that is a descendant of an";
+ ret += " <code>li</code> element; the <code>li</code> element must be the";
+ ret += " child of an <code>ol</code> element; the <code>ol</code> element must";
+ ret += " be a descendant of a <code>div</code>. Notice that the optional white";
+ ret += " space around the '>' combinator has been left out.</p>";
+ ret += " </div>";
+ ret += " <p>For information on selecting the first child of an element, please";
+ ret += " see the section on the <code><a href='#structural-pseudos'>:first-child</a></code> pseudo-class";
+ ret += " above.</p>";
+ ret += " <h3><a name='sibling-combinators'>8.3. Sibling combinators</a></h3>";
+ ret += " <p>There are two different sibling combinators: the adjacent sibling";
+ ret += " considering adjacency of elements.</p>";
+ ret += " <h4><a name='adjacent-sibling-combinators'>8.3.1. Adjacent sibling combinator</a>";
+ ret += " </h4>";
+ ret += " <p>The adjacent sibling combinator is made of the 'plus";
+ ret += " sign' (U+002B, <code>+</code>) character that separates two";
+ ret += " sequences of simple selectors. The elements represented by the two";
+ ret += " represented by the second one.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <p>The following selector represents a <code>p</code> element";
+ ret += " immediately following a <code>math</code> element:</p>";
+ ret += " <pre>math + p</pre>";
+ ret += " <p>The following selector is conceptually similar to the one in the";
+ ret += " adds a constraint to the <code>h1</code> element, that it must have";
+ ret += " <code>class='opener'</code>:</p>";
+ ret += " <pre>h1.opener + h2</pre>";
+ ret += " </div>";
+ ret += " <h4><a name='general-sibling-combinators'>8.3.2. General sibling combinator</a>";
+ ret += " </h4>";
+ ret += " <p>The general sibling combinator is made of the 'tilde'";
+ ret += " (U+007E, <code>~</code>) character that separates two sequences of";
+ ret += " simple selectors. The elements represented by the two sequences share";
+ ret += " represented by the second one.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Example:</p>";
+ ret += " <pre>h1 ~ pre</pre>";
+ ret += " <p>represents a <code>pre</code> element following an <code>h1</code>. It";
+ ret += " is a correct and valid, but partial, description of:</p>";
+ ret += " <pre><h1>Definition of the function a</h1>";
+ ret += " <pre>function a(x) = 12x/13.5</pre></pre>";
+ ret += " </div>";
+ ret += " <h2><a name='specificity'>9. Calculating a selector's specificity</a></h2>";
+ ret += " <p>A selector's specificity is calculated as follows:</p>";
+ ret += " <ul>";
+ ret += " <li>count the number of ID selectors in the selector (= a)</li>";
+ ret += " <li>count the number of class selectors, attributes selectors, and";
+ ret += " </li>";
+ ret += " <li>count the number of element names in the selector (= c)</li>";
+ ret += " <li>ignore pseudo-elements</li>";
+ ret += " </ul>";
+ ret += " <p>Selectors inside <a href='#negation'>the negation pseudo-class</a>";
+ ret += " a pseudo-class.</p>";
+ ret += " <p>Concatenating the three numbers a-b-c (in a number system with a";
+ ret += " large base) gives the specificity.</p>";
+ ret += " <div class='example'>";
+ ret += " <p>Examples:</p>";
+ ret += " <pre>* /* a=0 b=0 c=0 -> specificity = 0 */";
+ ret += " </pre>";
+ ret += " </div>";
+ ret += " <p class='note'><strong>Note:</strong> the specificity of the styles";
+ ret += " specified in an HTML <code>style</code> attribute is described in CSS";
+ ret += " 2.1. <a href='#refsCSS21'>[CSS21]</a>.</p>";
+ ret += " <h2><a name='w3cselgrammar'>10. The grammar of Selectors</a></h2>";
+ ret += " <h3><a name='grammar'>10.1. Grammar</a></h3>";
+ ret += " <p>The grammar below defines the syntax of Selectors. It is globally";
+ ret += " shorthand notations beyond Yacc (see <a href='#refsYACC'>[YACC]</a>)";
+ ret += " are used:</p>";
+ ret += " <ul>";
+ ret += " <li><b>*</b>: 0 or more";
+ ret += " </li><li><b>+</b>: 1 or more";
+ ret += " </li><li><b>?</b>: 0 or 1";
+ ret += " </li><li><b>|</b>: separates alternatives";
+ ret += " </li><li><b>[ ]</b>: grouping</li>";
+ ret += " </ul>";
+ ret += " <p>The productions are:</p>";
+ ret += " <pre>selectors_group";
+ ret += " ;</pre>";
+ ret += " <h3><a name='lex'>10.2. Lexical scanner</a></h3>";
+ ret += " <p>The following is the <a name='x3'>tokenizer</a>, written in Flex (see";
+ ret += " <a href='#refsFLEX'>[FLEX]</a>) notation. The tokenizer is";
+ ret += " case-insensitive.</p>";
+ ret += " <p>The two occurrences of '\377' represent the highest character";
+ ret += " possible code point in Unicode/ISO-10646. <a href='#refsUNICODE'>[UNICODE]</a></p>";
+ ret += " <pre>%option case-insensitive";
+ ret += " . return *yytext;</pre>";
+ ret += " <h2><a name='downlevel'>11. Namespaces and down-level clients</a></h2>";
+ ret += " <p>An important issue is the interaction of CSS selectors with XML";
+ ret += " to construct a CSS style sheet which will properly match selectors in";
+ ret += " is possible to construct a style sheet in which selectors would match";
+ ret += " elements and attributes correctly.</p>";
+ ret += " <p>It should be noted that a down-level CSS client will (if it";
+ ret += " <code>@namespace</code> at-rules, as well as all style rules that make";
+ ret += " use of namespace qualified element type or attribute selectors. The";
+ ret += " than possibly match them incorrectly.</p>";
+ ret += " <p>The use of default namespaces in CSS makes it possible to write";
+ ret += " element type selectors that will function in both namespace aware CSS";
+ ret += " down-level clients may incorrectly match selectors against XML";
+ ret += " elements in other namespaces.</p>";
+ ret += " <p>The following are scenarios and examples in which it is possible to";
+ ret += " that do not implement this proposal.</p>";
+ ret += " <ol>";
+ ret += " <li>";
+ ret += " <p>The XML document does not use namespaces.</p>";
+ ret += " <ul>";
+ ret += " <li>In this case, it is obviously not necessary to declare or use";
+ ret += " attribute selectors will function adequately in a down-level";
+ ret += " </li>";
+ ret += " <li>In a CSS namespace aware client, the default behavior of";
+ ret += " element selectors matching without regard to namespace will";
+ ret += " present. However, the use of specific element type selectors";
+ ret += " match only elements that have no namespace ('<code>|name</code>')";
+ ret += " will guarantee that selectors will match only XML elements that";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li>";
+ ret += " <li>";
+ ret += " <p>The XML document defines a single, default namespace used";
+ ret += " names.</p>";
+ ret += " <ul>";
+ ret += " <li>In this case, a down-level client will function as if";
+ ret += " element type and attribute selectors will match against all";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li>";
+ ret += " <li>";
+ ret += " <p>The XML document does <b>not</b> use a default namespace, all";
+ ret += " to the same URI).</p>";
+ ret += " <ul>";
+ ret += " <li>In this case, the down-level client will view and match";
+ ret += " element type and attribute selectors based on their fully";
+ ret += " qualified name, not the local part as outlined in the <a href='#typenmsp'>Type selectors and Namespaces</a>";
+ ret += " selectors may be declared using an escaped colon";
+ ret += " '<code>\\:</code>'";
+ ret += " '<code>html\\:h1</code>' will match";
+ ret += " <code><html:h1></code>. Selectors using the qualified name";
+ ret += " </li>";
+ ret += " <li>Note that selectors declared in this fashion will";
+ ret += " <em>only</em> match in down-level clients. A CSS namespace aware";
+ ret += " client will match element type and attribute selectors based on";
+ ret += " the name's local part. Selectors declared with the fully";
+ ret += " </li>";
+ ret += " </ul>";
+ ret += " </li>";
+ ret += " </ol>";
+ ret += " <p>In other scenarios: when the namespace prefixes used in the XML are";
+ ret += " <em>different</em> namespace URIs within the same document, or in";
+ ret += " a CSS and XML namespace aware client.</p>";
+ ret += " <h2><a name='profiling'>12. Profiles</a></h2>";
+ ret += " <p>Each specification using Selectors must define the subset of W3C";
+ ret += " Selectors it allows and excludes, and describe the local meaning of";
+ ret += " all the components of that subset.</p>";
+ ret += " <p>Non normative examples:";
+ ret += " </p><div class='profile'>";
+ ret += " <table class='tprofile'>";
+ ret += " <tbody>";
+ ret += " <tr>";
+ ret += " <th class='title' colspan='2'>Selectors profile</th>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Specification</th>";
+ ret += " <td>CSS level 1</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Accepts</th>";
+ ret += " <td>type selectors<br>class selectors<br>ID selectors<br>:link,";
+ ret += " :visited and :active pseudo-classes<br>descendant combinator";
+ ret += " <br>::first-line and ::first-letter pseudo-elements";
+ ret += " </td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Excludes</th>";
+ ret += " <td>";
+ ret += " <p>universal selector<br>attribute selectors<br>:hover and";
+ ret += " pseudo-classes<br>:target pseudo-class<br>:lang()";
+ ret += " pseudo-class<br>all UI";
+ ret += " element states pseudo-classes<br>all structural";
+ ret += " pseudo-classes<br>negation pseudo-class<br>all";
+ ret += " UI element fragments pseudo-elements<br>::before and ::after";
+ ret += " pseudo-elements<br>child combinators<br>sibling combinators";
+ ret += " </p><p>namespaces</p></td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Extra constraints</th>";
+ ret += " <td>only one class selector allowed per sequence of simple";
+ ret += " selectors";
+ ret += " </td>";
+ ret += " </tr>";
+ ret += " </tbody>";
+ ret += " </table>";
+ ret += " <br><br>";
+ ret += " <table class='tprofile'>";
+ ret += " <tbody>";
+ ret += " <tr>";
+ ret += " <th class='title' colspan='2'>Selectors profile</th>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Specification</th>";
+ ret += " <td>CSS level 2</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Accepts</th>";
+ ret += " <td>type selectors<br>universal selector<br>attribute presence and";
+ ret += " values selectors<br>class selectors<br>ID selectors<br>:link,";
+ ret += " <br>descendant combinator<br>child combinator<br>adjacent";
+ ret += " combinator<br>::first-line and ::first-letter";
+ ret += " pseudo-elements<br>::before";
+ ret += " </td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Excludes</th>";
+ ret += " <td>";
+ ret += " <p>content selectors<br>substring matching attribute";
+ ret += " selectors<br>:target pseudo-classes<br>all UI element";
+ ret += " states pseudo-classes<br>all structural pseudo-classes other";
+ ret += " than :first-child<br>negation pseudo-class<br>all UI element";
+ ret += " fragments pseudo-elements<br>general sibling combinators";
+ ret += " </p><p>namespaces</p></td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Extra constraints</th>";
+ ret += " <td>more than one class selector per sequence of simple selectors";
+ ret += " </td>";
+ ret += " </tr>";
+ ret += " </tbody>";
+ ret += " </table>";
+ ret += " <p>In CSS, selectors express pattern matching rules that determine which";
+ ret += " </p><p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>";
+ ret += " with attribute <code>name</code> set inside a section 1 header";
+ ret += " <code>h1</code>:";
+ ret += " </p><pre>h1 a[name]</pre>";
+ ret += " <p>All CSS declarations attached to such a selector are applied to elements";
+ ret += " matching it.</p></div>";
+ ret += " <div class='profile'>";
+ ret += " <table class='tprofile'>";
+ ret += " <tbody>";
+ ret += " <tr>";
+ ret += " <th class='title' colspan='2'>Selectors profile</th>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Specification</th>";
+ ret += " <td>STTS 3</td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Accepts</th>";
+ ret += " <td>";
+ ret += " <p>type selectors<br>universal selectors<br>attribute";
+ ret += " selectors<br>class";
+ ret += " selectors<br>ID selectors<br>all structural";
+ ret += " pseudo-classes<br>";
+ ret += " </p><p>namespaces</p></td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Excludes</th>";
+ ret += " <td>non-accepted pseudo-classes<br>pseudo-elements<br></td>";
+ ret += " </tr>";
+ ret += " <tr>";
+ ret += " <th>Extra constraints</th>";
+ ret += " <td>some selectors and combinators are not allowed in fragment";
+ ret += " </td>";
+ ret += " </tr>";
+ ret += " </tbody>";
+ ret += " </table>";
+ ret += " <p>Selectors can be used in STTS 3 in two different";
+ ret += " </p><ol>";
+ ret += " <li>a selection mechanism equivalent to CSS selection mechanism:";
+ ret += " </li><li>fragment descriptions that appear on the right side of declarations.";
+ ret += " </li>";
+ ret += " </ol>";
+ ret += " </div>";
+ ret += " <h2><a name='Conformance'></a>13. Conformance and requirements</h2>";
+ ret += " <p>This section defines conformance with the present specification only.";
+ ret += " </p><p>The inability of a user agent to implement part of this specification due to";
+ ret += " </p><p>All specifications reusing Selectors must contain a <a href='#profiling'>Profile</a> listing the";
+ ret += " subset of Selectors it accepts or excludes, and describing the constraints";
+ ret += " </p><p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a";
+ ret += " </p><p>User agents must observe the rules for handling parsing errors:";
+ ret += " </p><ul>";
+ ret += " <li>a simple selector containing an undeclared namespace prefix is invalid";
+ ret += " </li>";
+ ret += " <li>a selector containing an invalid simple selector, an invalid combinator";
+ ret += " </li>";
+ ret += " <li>a group of selectors containing an invalid selector is invalid.</li>";
+ ret += " </ul>";
+ ret += " <p>Specifications reusing Selectors must define how to handle parsing";
+ ret += " used is dropped.)</p>";
+ ret += " <!-- Apparently all these references are out of date:";
+ ret += " <p>Implementations of this specification must behave as";
+ ret += " 'recipients of text data' as defined by <a href='#refsCWWW'>[CWWW]</a>";
+ ret += " when parsing selectors and attempting matches. (In particular,";
+ ret += " <a href='#refsCWWW'>[CWWW]</a> and <a";
+ ret += " href='#refsUNICODE'>[UNICODE]</a> and apply to implementations of this";
+ ret += " specification.</p>-->";
+ ret += " <h2><a name='Tests'></a>14. Tests</h2>";
+ ret += " <p>This specification has <a href='http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/'>a test";
+ ret += " suite</a> allowing user agents to verify their basic conformance to";
+ ret += " and does not cover all possible combined cases of Selectors.</p>";
+ ret += " <h2><a name='ACKS'></a>15. Acknowledgements</h2>";
+ ret += " <p>The CSS working group would like to thank everyone who has sent";
+ ret += " comments on this specification over the years.</p>";
+ ret += " <p>The working group would like to extend special thanks to Donna";
+ ret += " the final editorial review.</p>";
+ ret += " <h2><a name='references'>16. References</a></h2>";
+ ret += " <dl class='refs'>";
+ ret += " <dt>[CSS1]";
+ ret += " </dt><dd><a name='refsCSS1'></a> Bert Bos, HÃ¥kon Wium Lie; '<cite>Cascading";
+ ret += " Style Sheets, level 1</cite>', W3C Recommendation, 17 Dec 1996, revised";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/REC-CSS1'>http://www.w3.org/TR/REC-CSS1</a></code>)";
+ ret += " </dd><dt>[CSS21]";
+ ret += " </dt><dd><a name='refsCSS21'></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon";
+ ret += " Wium Lie, editors; '<cite>Cascading Style Sheets, level 2 revision";
+ ret += " 1</cite>', W3C Working Draft, 13 June 2005";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/CSS21'>http://www.w3.org/TR/CSS21</a></code>)";
+ ret += " </dd><dt>[CWWW]";
+ ret += " </dt><dd><a name='refsCWWW'></a> Martin J. Dürst, François Yergeau,";
+ ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; '<cite>Character Model";
+ ret += " for the World Wide Web</cite>', W3C Recommendation, 15 February 2005";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/charmod/'>http://www.w3.org/TR/charmod/</a></code>)";
+ ret += " </dd><dt>[FLEX]";
+ ret += " </dt><dd><a name='refsFLEX'></a> '<cite>Flex: The Lexical Scanner";
+ ret += " Generator</cite>', Version 2.3.7, ISBN 1882114213";
+ ret += " </dd><dt>[HTML4]";
+ ret += " </dt><dd><a name='refsHTML4'></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs,";
+ ret += " editors; '<cite>HTML 4.01 Specification</cite>', W3C Recommendation, 24";
+ ret += " </dd><dd>";
+ ret += " (<a href='http://www.w3.org/TR/html4/'><code>http://www.w3.org/TR/html4/</code></a>)";
+ ret += " </dd><dt>[MATH]";
+ ret += " </dt><dd><a name='refsMATH'></a> Patrick Ion, Robert Miner, editors; '<cite>Mathematical";
+ ret += " Markup Language (MathML) 1.01</cite>', W3C Recommendation, revision of 7";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/REC-MathML/'>http://www.w3.org/TR/REC-MathML/</a></code>)";
+ ret += " </dd><dt>[RFC3066]";
+ ret += " </dt><dd><a name='refsRFC3066'></a> H. Alvestrand; '<cite>Tags for the";
+ ret += " Identification of Languages</cite>', Request for Comments 3066, January";
+ ret += " </dd><dd>(<a href='http://www.ietf.org/rfc/rfc3066.txt'><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)";
+ ret += " </dd><dt>[STTS]";
+ ret += " </dt><dd><a name='refsSTTS'></a> Daniel Glazman; '<cite>Simple Tree Transformation";
+ ret += " Sheets 3</cite>', Electricité de France, submission to the W3C,";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/NOTE-STTS3'>http://www.w3.org/TR/NOTE-STTS3</a></code>)";
+ ret += " </dd><dt>[SVG]";
+ ret += " </dt><dd><a name='refsSVG'></a> Jon Ferraiolo, 藤沢 淳, Dean";
+ ret += " Jackson, editors; '<cite>Scalable Vector Graphics (SVG) 1.1";
+ ret += " Specification</cite>', W3C Recommendation, 14 January 2003";
+ ret += " </dd><dd>(<code><a href='http://www.w3.org/TR/SVG/'>http://www.w3.org/TR/SVG/</a></code>)";
+ ret += " </dd><dt>[UNICODE]</dt>";
+ ret += " <dd><a name='refsUNICODE'></a> <cite><a href='http://www.unicode.org/versions/Unicode4.1.0/'>The Unicode";
+ ret += " Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA,";
+ ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a href='http://www.unicode.org/versions/Unicode4.0.1/'>Unicode";
+ ret += " 4.0.1</a> and <a href='http://www.unicode.org/versions/Unicode4.1.0/'>Unicode";
+ ret += " 4.1.0</a>.";
+ ret += " </dd><dd>(<code><a href='http://www.unicode.org/versions/'>http://www.unicode.org/versions/</a></code>)";
+ ret += " </dd>";
+ ret += " <dt>[XML10]";
+ ret += " </dt><dd><a name='refsXML10'></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,";
+ ret += " Eve Maler, François Yergeau, editors; '<cite>Extensible Markup";
+ ret += " Language (XML) 1.0 (Third Edition)</cite>', W3C Recommendation, 4";
+ ret += " </dd><dd>(<a href='http://www.w3.org/TR/REC-xml/'><code>http://www.w3.org/TR/REC-xml/</code></a>)";
+ ret += " </dd><dt>[XMLNAMES]";
+ ret += " </dt><dd><a name='refsXMLNAMES'></a> Tim Bray, Dave Hollander, Andrew Layman,";
+ ret += " editors; '<cite>Namespaces in XML</cite>', W3C Recommendation, 14";
+ ret += " </dd><dd>(<a href='http://www.w3.org/TR/REC-xml-names/'><code>http://www.w3.org/TR/REC-xml-names/</code></a>)";
+ ret += " </dd><dt>[YACC]";
+ ret += " </dt><dd><a name='refsYACC'></a> S. C. Johnson; '<cite>YACC — Yet another";
+ ret += " compiler compiler</cite>', Technical Report, Murray Hill, 1975";
+ ret += " </dd></dl>'; </div>";
+ ret += " <input name='n' value='v1' type='radio'>1";
+ ret += " <input name='n' value='v2' checked='checked' type='radio'>2";
+ $(e).html(ret);
}
+
}
diff --git a/samples/src/main/java/gwtquery/samples/client/MySelectors.java b/samples/src/main/java/gwtquery/samples/client/MySelectors.java index 2bbffad1..63317122 100644 --- a/samples/src/main/java/gwtquery/samples/client/MySelectors.java +++ b/samples/src/main/java/gwtquery/samples/client/MySelectors.java @@ -1,6 +1,7 @@ package gwtquery.samples.client; import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.Node; import com.google.gwt.dom.client.NodeList; import com.google.gwt.query.client.Selector; import com.google.gwt.query.client.Selectors; @@ -11,122 +12,122 @@ import com.google.gwt.query.client.Selectors; public interface MySelectors extends Selectors { @Selector("h1[id]:contains(Selectors)") - NodeList<Element> h1IdContainsSelectors(); + NodeList<Element> h1IdContainsSelectors(Node n); @Selector("a[href][lang][class]") - NodeList<Element> aHrefLangClass(); + NodeList<Element> aHrefLangClass(Node n); - @Selector("*:checked") - NodeList<Element> allChecked(); +// @Selector("*:checked") +// NodeList<Element> allChecked(Node n); @Selector("body") - NodeList<Element> body(); + NodeList<Element> body(Node n); @Selector("body div") - NodeList<Element> bodyDiv(); + NodeList<Element> bodyDiv(Node n); @Selector("div .example") - NodeList<Element> divExample(); + NodeList<Element> divExample(Node n); @Selector("div > div") - NodeList<Element> divGtP(); + NodeList<Element> divGtP(Node n); // @Selector("*:first") -// NodeList<Element> allFirst(); +// NodeList<Element> allFirst(Node n); @Selector("div:not(.example)") - NodeList<Element> divNotExample(); + NodeList<Element> divNotExample(Node n); @Selector("div p") - NodeList<Element> divP(); + NodeList<Element> divP(Node n); @Selector("div p a") - NodeList<Element> divPA(); + NodeList<Element> divPA(Node n); @Selector("div + p") - NodeList<Element> divPlusP(); + NodeList<Element> divPlusP(Node n); @Selector("div[class^=exa][class$=mple]") - NodeList<Element> divPrefixExaSuffixMple(); + NodeList<Element> divPrefixExaSuffixMple(Node n); @Selector("div #title") - NodeList<Element> divSpaceTitle(); + NodeList<Element> divSpaceTitle(Node n); @Selector("div ~ p") - NodeList<Element> divTildeP(); + NodeList<Element> divTildeP(Node n); @Selector("div[class]") - NodeList<Element> divWithClass(); + NodeList<Element> divWithClass(Node n); @Selector("div[class~=dialog]") - NodeList<Element> divWithClassContainsDialog(); + NodeList<Element> divWithClassContainsDialog(Node n); @Selector("div[class*=e]") - NodeList<Element> divWithClassContainsE(); + NodeList<Element> divWithClassContainsE(Node n); @Selector("div[class=example]") - NodeList<Element> divWithClassExample(); + NodeList<Element> divWithClassExample(Node n); @Selector("div[class!=madeup]") - NodeList<Element> divWithClassNotContainsMadeup(); + NodeList<Element> divWithClassNotContainsMadeup(Node n); @Selector("div[class~=dialog]") - NodeList<Element> divWithClassListContainsDialog(); + NodeList<Element> divWithClassListContainsDialog(Node n); @Selector("div[class^=exa]") - NodeList<Element> divWithClassPrefixExa(); + NodeList<Element> divWithClassPrefixExa(Node n); @Selector("div[class$=mple]") - NodeList<Element> divWithClassSuffixMple(); + NodeList<Element> divWithClassSuffixMple(Node n); @Selector("p:first-child") - NodeList<Element> firstChild(); + NodeList<Element> firstChild(Node n); @Selector("h1#title") - NodeList<Element> h1Title(); + NodeList<Element> h1Title(Node n); @Selector("h1#title + div > p") - NodeList<Element> h1TitlePlusDivGtP(); + NodeList<Element> h1TitlePlusDivGtP(Node n); @Selector("p:last-child") - NodeList<Element> lastChild(); + NodeList<Element> lastChild(Node n); @Selector("div, p a") - NodeList<Element> divCommaPA(); + NodeList<Element> divCommaPA(Node n); @Selector(".note") - NodeList<Element> note(); + NodeList<Element> note(Node n); @Selector("p:nth-child(n)") - NodeList<Element> nthChild(); + NodeList<Element> nthChild(Node n); @Selector("p:nth-child(2n)") - NodeList<Element> nThChild2n(); + NodeList<Element> nThChild2n(Node n); @Selector("p:nth-child(2n+1)") - NodeList<Element> nThChild2nPlus1(); + NodeList<Element> nThChild2nPlus1(Node n); @Selector("p:contains(selectors)") - NodeList<Element> pContainsSelectors(); + NodeList<Element> pContainsSelectors(Node n); @Selector("p:nth-child(even)") - NodeList<Element> nThChildEven(); + NodeList<Element> nThChildEven(Node n); @Selector("p:nth-child(odd)") - NodeList<Element> nThChildOdd(); + NodeList<Element> nThChildOdd(Node n); @Selector("p:only-child") - NodeList<Element> onlyChild(); + NodeList<Element> onlyChild(Node n); @Selector("#title") - NodeList<Element> title(); + NodeList<Element> title(Node n); @Selector("#title,h1#title") - NodeList<Element> titleAndh1Title(); + NodeList<Element> titleAndh1Title(Node n); @Selector("ul .tocline2") - NodeList<Element> ulTocline2(); + NodeList<Element> ulTocline2(Node n); @Selector("ui.toc li.tocline2") - NodeList<Element> ulTocLiTocLine2(); + NodeList<Element> ulTocLiTocLine2(Node n); } diff --git a/samples/src/main/java/gwtquery/samples/public/DOMAssistantComplete-2.7.js b/samples/src/main/java/gwtquery/samples/public/DOMAssistantComplete-2.7.js deleted file mode 100644 index ae887c9d..00000000 --- a/samples/src/main/java/gwtquery/samples/public/DOMAssistantComplete-2.7.js +++ /dev/null @@ -1,1545 +0,0 @@ -// Developed by Robert Nyman/DOMAssistant team, code/licensing: http://code.google.com/p/domassistant/, documentation: http://www.domassistant.com/documentation, version 2.7 -var DOMAssistant = function () { - var HTMLArray = function () { - // Constructor - }; - var isIE = /*@cc_on!@*/false; - var cachedElms = []; - var pushAll = function (set1, set2) { - for (var j = 0, jL = set2.length; j < jL; j++) { - set1.push(set2[j]); - } - return set1; - }; - if (isIE) { - pushAll = function (set1, set2) { - if (set2.slice) { - return set1.concat(set2); - } - for (var i = 0, iL = set2.length; i < iL; i++) { - set1[set1.length] = set2[i]; - } - return set1; - }; - } - return { - allMethods : [], - publicMethods : [ - "cssSelect", - "elmsByClass", - "elmsByAttribute", - "elmsByTag" - ], - - initCore : function () { - this.applyMethod.call(window, "$", this.$); - this.applyMethod.call(window, "$$", this.$$); - window.DOMAssistant = this; - if (isIE) { - HTMLArray = Array; - } - HTMLArray.prototype = []; - HTMLArray.prototype.each = function (functionCall) { - for (var i = 0, il = this.length; i < il; i++) { - functionCall.call(this[i]); - } - return this; - }; - HTMLArray.prototype.first = function () { - return (typeof this[0] !== "undefined") - ? DOMAssistant.addMethodsToElm(this[0]) : null; - }; - HTMLArray.prototype.end = function () { - return this.previousSet; - }; - this.attach(this); - }, - - addMethods : function (name, method) { - if (typeof this.allMethods[name] === "undefined") { - this.allMethods[name] = method; - this.addHTMLArrayPrototype(name, method); - } - }, - - addMethodsToElm : function (elm) { - for (var method in this.allMethods) { - if (typeof this.allMethods[method] !== "undefined") { - this.applyMethod.call(elm, method, this.allMethods[method]); - } - } - return elm; - }, - - applyMethod : function (method, func) { - if (typeof this[method] !== "function") { - this[method] = func; - } - }, - - attach : function (plugin) { - var publicMethods = plugin.publicMethods; - if (typeof publicMethods === "undefined") { - for (var method in plugin) { - if (method !== "init" && typeof plugin[method] - !== "undefined") { - this.addMethods(method, plugin[method]); - } - } - } else if (publicMethods.constructor === Array) { - for (var i = 0, current; (current = publicMethods[i]); i++) { - this.addMethods(current, plugin[current]); - } - } - if (typeof plugin.init === "function") { - plugin.init(); - } - }, - - addHTMLArrayPrototype : function (name, method) { - HTMLArray.prototype[name] = function () { - var elmsToReturn = new HTMLArray(); - elmsToReturn.previousSet = this; - var elms; - for (var i = 0, il = this.length; i < il; i++) { - elms = method.apply(this[i], arguments); - if (typeof elms !== "undefined" && elms !== null - && elms.constructor === Array) { - elmsToReturn = pushAll(elmsToReturn, elms); - } else { - elmsToReturn.push(elms); - } - } - return elmsToReturn; - }; - }, - - getSequence : function (expression) { - var start, add = 2, max = -1, modVal = -1; - var expressionRegExp = /^((odd|even)|([1-9]\d*)|((([1-9]\d*)?)n((\+|\-)(\d+))?)|(\-(([1-9]\d*)?)n\+(\d+)))$/; - var pseudoValue = expressionRegExp.exec(expression); - if (!pseudoValue) { - return null; - } else { - if (pseudoValue[2]) { // odd or even - start = (pseudoValue[2] === "odd") ? 1 : 2; - modVal = (start === 1) ? 1 : 0; - } else if (pseudoValue[3]) { // single digit - start = parseInt(pseudoValue[3], 10); - add = 0; - max = start; - } else if (pseudoValue[4]) { // an+b - add = pseudoValue[6] ? parseInt(pseudoValue[6], 10) : 1; - start = pseudoValue[7] ? parseInt(pseudoValue[8] - + pseudoValue[9], 10) : 0; - while (start < 1) { - start += add; - } - modVal = (start > add) ? (start - add) % add : ((start - === add) ? 0 : start); - } else if (pseudoValue[10]) { // -an+b - add = pseudoValue[12] ? parseInt(pseudoValue[12], 10) : 1; - start = max = parseInt(pseudoValue[13], 10); - while (start > add) { - start -= add; - } - modVal = (max > add) ? (max - add) % add : ((max === add) - ? 0 : max); - } - } - return { start: start, add: add, max: max, modVal: modVal }; - }, - - $ : function () { - var elm = new HTMLArray(); - if (document.getElementById) { - var arg = arguments[0]; - if (typeof arg === "string") { - arg = arg.replace(/^[^#]*(#)/, "$1"); - if (/^#[\w\u00C0-\uFFFF\-\_]+$/.test(arg)) { - var idMatch = DOMAssistant.$$(arg.substr(1), false); - if (idMatch) { - elm.push(idMatch); - } - } else { - elm = DOMAssistant.cssSelection.call(document, arg); - } - } else if (typeof arg === "object") { - elm = (arguments.length === 1) ? DOMAssistant.$$(arg) - : pushAll(elm, arguments); - } - } - return elm; - }, - - $$ : function (id, addMethods) { - var elm = (typeof id === "object") ? id - : document.getElementById(id); - var applyMethods = addMethods || true; - if (typeof id === "string" && elm && elm.id !== id) { - elm = null; - for (var i = 0, item; (item = document.all[i]); i++) { - if (item.id === id) { - elm = item; - break; - } - } - } - if (elm && applyMethods) { - DOMAssistant.addMethodsToElm(elm); - } - return elm; - }, - - cssSelection : function (cssRule) { - if (document.evaluate) { - DOMAssistant.cssSelection = function (cssRule) { - var cssRules = cssRule.replace(/\s*(,)\s*/g, "$1").split(","); - var elm = new HTMLArray(); - var currentRule, identical, cssSelectors, xPathExpression, cssSelector, splitRule, sequence; - var cssSelectorRegExp = /^(\w+)?(#[\w\u00C0-\uFFFF\-\_]+|(\*))?((\.[\w\u00C0-\uFFFF\-_]+)*)?((\[\w+(\^|\$|\*|\||~)?(=[\w\u00C0-\uFFFF\s\-\_\.]+)?\]+)*)?(((:\w+[\w\-]*)(\((odd|even|\-?\d*n?((\+|\-)\d+)?|[\w\u00C0-\uFFFF\-_]+|((\w*\.[\w\u00C0-\uFFFF\-_]+)*)?|(\[#?\w+(\^|\$|\*|\||~)?=?[\w\u00C0-\uFFFF\s\-\_\.]+\]+)|(:\w+[\w\-]*))\))?)*)?(>|\+|~)?/; - var selectorSplitRegExp = new RegExp("(?:\\[[^\\[]*\\]|\\(.*\\)|[^\\s\\+>~\\[\\(])+|[\\+>~]", "g"); - - function attrToXPath(match, p1, p2, p3) { - switch (p2) { - case "^": return "starts-with(@" + p1 + ", '" + p3 - + "')"; - case "$": return "substring(@" + p1 - + ", (string-length(@" + p1 + ") - " - + (p3.length - 1) + "), " + p3.length - + ") = '" + p3 + "'"; - case "*": return "contains(concat(' ', @" + p1 - + ", ' '), '" + p3 + "')"; - case "|": return "(@" + p1 + "='" + p3 - + "' or starts-with(@" + p1 + ", '" + p3 - + "-'))"; - case "~": return "contains(concat(' ', @" + p1 - + ", ' '), ' " + p3 + " ')"; - default: return "@" + p1 + (p3 ? "='" + p3 + "'" - : ""); - } - } - - function pseudoToXPath(tag, pseudoClass, pseudoValue) { - var xpath = ""; - switch (pseudoClass) { - case "first-child": - xpath = "not(preceding-sibling::*)"; - break; - case "first-of-type": - xpath = "not(preceding-sibling::" + tag + ")"; - break; - case "last-child": - xpath = "not(following-sibling::*)"; - break; - case "last-of-type": - xpath = "not(following-sibling::" + tag + ")"; - break; - case "only-child": - xpath = "not(preceding-sibling::* or following-sibling::*)"; - break; - case "only-of-type": - xpath = "not(preceding-sibling::" + tag - + " or following-sibling::" + tag + ")"; - break; - case "nth-child": - if (!/^n$/.test(pseudoValue)) { - sequence - = DOMAssistant.getSequence(pseudoValue); - if (sequence) { - if (sequence.start === sequence.max) { - xpath = "count(preceding-sibling::*) = " - + (sequence.start - 1); - } else { - xpath = "(count(preceding-sibling::*) + 1) mod " - + sequence.add + " = " - + sequence.modVal - + ((sequence.start > 1) - ? " and count(preceding-sibling::*) >= " - + (sequence.start - 1) : "") - + ((sequence.max > 0) - ? " and count(preceding-sibling::*) <= " - + (sequence.max - 1) : ""); - } - } - } - break; - case "nth-of-type": - if (!/^n$/.test(pseudoValue)) { - sequence - = DOMAssistant.getSequence(pseudoValue); - if (sequence) { - if (sequence.start === sequence.max) { - xpath = pseudoValue; - } else { - xpath = "position() mod " - + sequence.add + " = " - + sequence.modVal - + ((sequence.start > 1) - ? " and position() >= " - + sequence.start : "") - + ((sequence.max > 0) - ? " and position() <= " - + sequence.max : ""); - } - } - } - break; - case "empty": - xpath = "count(child::*) = 0 and string-length(text()) = 0"; - break; - case "contains": - xpath = "contains(., '" + pseudoValue + "')"; - break; - case "enabled": - xpath = "not(@disabled)"; - break; - case "disabled": - xpath = "@disabled"; - break; - case "checked": - xpath = "@checked='checked'"; // Doesn't work in Opera 9.24 - break; - case "not": - if (/^(:\w+[\w\-]*)$/.test(pseudoValue)) { - xpath = "not(" - + pseudoToXPath(tag, pseudoValue.slice(1)) - + ")"; - } else { - pseudoValue - = pseudoValue.replace(/^\[#([\w\u00C0-\uFFFF\-\_]+)\]$/, "[id=$1]"); - var notSelector = pseudoValue.replace(/^(\w+)/, "self::$1"); - notSelector - = notSelector.replace(/^\.([\w\u00C0-\uFFFF\-_]+)/g, "contains(concat(' ', @class, ' '), ' $1 ')"); - notSelector - = notSelector.replace(/\[(\w+)(\^|\$|\*|\||~)?=?([\w\u00C0-\uFFFF\s\-_\.]+)?\]/g, attrToXPath); - xpath = "not(" + notSelector + ")"; - } - break; - default: - xpath = "@" + pseudoClass + "='" + pseudoValue - + "'"; - break; - } - return xpath; - } - - for (var i = 0; (currentRule = cssRules[i]); i++) { - if (i > 0) { - identical = false; - for (var x = 0, xl = i; x < xl; x++) { - if (cssRules[i] === cssRules[x]) { - identical = true; - break; - } - } - if (identical) { - continue; - } - } - cssSelectors = currentRule.match(selectorSplitRegExp); - xPathExpression = "."; - for (var j = 0, jl = cssSelectors.length; j < jl; j++) { - cssSelector - = cssSelectorRegExp.exec(cssSelectors[j]); - splitRule = { - tag : (!cssSelector[1] || cssSelector[3] - === "*") ? "*" : cssSelector[1], - id : (cssSelector[3] !== "*") ? cssSelector[2] - : null, - allClasses : cssSelector[4], - allAttr : cssSelector[6], - allPseudos : cssSelector[10], - tagRelation : cssSelector[22] - }; - if (splitRule.tagRelation) { - switch (splitRule.tagRelation) { - case ">": - xPathExpression += "/child::"; - break; - case "+": - xPathExpression - += "/following-sibling::*[1]/self::"; - break; - case "~": - xPathExpression - += "/following-sibling::"; - break; - } - } else { - xPathExpression += (j > 0 - && /(>|\+|~)/.test(cssSelectors[j - 1])) - ? splitRule.tag : ("/descendant::" - + splitRule.tag); - } - if (splitRule.id) { - xPathExpression += "[@id = '" - + splitRule.id.replace(/^#/, "") + "']"; - } - if (splitRule.allClasses) { - xPathExpression - += splitRule.allClasses.replace(/\.([\w\u00C0-\uFFFF\-_]+)/g, "[contains(concat(' ', @class, ' '), ' $1 ')]"); - } - if (splitRule.allAttr) { - xPathExpression - += splitRule.allAttr.replace(/(\w+)(\^|\$|\*|\||~)?=?([\w\u00C0-\uFFFF\s\-_\.]+)?/g, attrToXPath); - } - if (splitRule.allPseudos) { - var pseudoSplitRegExp = /:(\w[\w\-]*)(\(([^\)]+)\))?/; - splitRule.allPseudos - = splitRule.allPseudos.match(/(:\w+[\w\-]*)(\([^\)]+\))?/g); - for (var k = 0, kl = splitRule.allPseudos.length; - k < kl; k++) { - var pseudo = splitRule.allPseudos[k].match(pseudoSplitRegExp); - var pseudoClass = pseudo[1] - ? pseudo[1].toLowerCase() : null; - var pseudoValue = pseudo[3] ? pseudo[3] - : null; - var xpath = pseudoToXPath(splitRule.tag, pseudoClass, pseudoValue); - if (xpath.length) { - xPathExpression += "[" + xpath + "]"; - } - } - } - } - var xPathNodes = document.evaluate(xPathExpression, this, null, 0, null), node; - while ((node = xPathNodes.iterateNext())) { - elm.push(node); - } - } - return elm; - }; - } else { - DOMAssistant.cssSelection = function (cssRule) { - var cssRules = cssRule.replace(/\s*(,)\s*/g, "$1").split(","); - var elm = new HTMLArray(); - var prevElm = [], matchingElms = []; - var prevParents, currentRule, identical, cssSelectors, childOrSiblingRef, nextTag, nextRegExp, regExpClassNames, matchingClassElms, regExpAttributes, matchingAttributeElms, attributeMatchRegExp, current, previous, prevParent, addElm, iteratorNext, childCount, childElm, sequence; - var childOrSiblingRefRegExp = /^(>|\+|~)$/; - var cssSelectorRegExp = /^(\w+)?(#[\w\u00C0-\uFFFF\-\_]+|(\*))?((\.[\w\u00C0-\uFFFF\-_]+)*)?((\[\w+(\^|\$|\*|\||~)?(=[\w\u00C0-\uFFFF\s\-\_\.]+)?\]+)*)?(((:\w+[\w\-]*)(\((odd|even|\-?\d*n?((\+|\-)\d+)?|[\w\u00C0-\uFFFF\-_]+|((\w*\.[\w\u00C0-\uFFFF\-_]+)*)?|(\[#?\w+(\^|\$|\*|\||~)?=?[\w\u00C0-\uFFFF\s\-\_\.]+\]+)|(:\w+[\w\-]*))\))?)*)?/; - var selectorSplitRegExp; - try { - selectorSplitRegExp - = new RegExp("(?:\\[[^\\[]*\\]|\\(.*\\)|[^\\s\\+>~\\[\\(])+|[\\+>~]", "g"); - } catch (e) { - selectorSplitRegExp = /[^\s]+/g; - } - function clearAdded(elm) { - elm = elm || prevElm; - for (var n = 0, nl = elm.length; n < nl; n++) { - elm[n].added = null; - } - } - - function clearChildElms() { - for (var n = 0, nl = prevParents.length; n < nl; n++) { - prevParents[n].childElms = null; - } - } - - function subtractArray(arr1, arr2) { - for (var i = 0, src1; (src1 = arr1[i]); i++) { - var found = false; - for (var j = 0, src2; (src2 = arr2[j]); j++) { - if (src2 === src1) { - found = true; - break; - } - } - if (found) { - arr1.splice(i--, 1); - } - } - return arr1; - } - - function getAttr(elm, attr) { - if (isIE) { - switch (attr) { - case "id": - return elm.id; - case "for": - return elm.htmlFor; - case "class": - return elm.className; - } - } - return elm.getAttribute(attr, 2); - } - - function attrToRegExp(attrVal, substrOperator) { - switch (substrOperator) { - case "^": return "^" + attrVal; - case "$": return attrVal + "$"; - case "*": return attrVal; - case "|": return "(^" + attrVal + "(\\-\\w+)*$)"; - case "~": return "\\b" + attrVal + "\\b"; - default: return attrVal ? "^" + attrVal + "$" - : null; - } - } - - function getElementsByTagName(tag, parent) { - tag = tag || "*"; - parent = parent || document; - if (parent === document || parent.lastModified) { - if (!cachedElms[tag]) { - cachedElms[tag] = isIE ? ((tag === "*") - ? document.all : document.all.tags(tag)) - : document.getElementsByTagName(tag); - } - return cachedElms[tag]; - } - return isIE ? ((tag === "*") ? parent.all - : parent.all.tags(tag)) - : parent.getElementsByTagName(tag); - } - - function getElementsByPseudo(previousMatch, pseudoClass, - pseudoValue) { - prevParents = []; - var direction = (/^first/.test(pseudoClass)) - ? "previousSibling" : "nextSibling"; - var matchingElms = [], prev, next; - switch (pseudoClass) { - case "first-child": - case "last-child": - for (var j = 0; - (next = previous = previousMatch[j]); - j++) { - while ((next = next[direction]) - && next.nodeType !== 1) { - } - if (!next) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "only-child": - for (var k = 0, kParent; (prev = next = previous - = previousMatch[k]); k++) { - prevParent = previous.parentNode; - if (prevParent !== kParent) { - while ((prev = prev.previousSibling) - && prev.nodeType !== 1) { - } - while ((next = next.nextSibling) - && next.nodeType !== 1) { - } - if (!prev && !next) { - matchingElms[matchingElms.length] - = previous; - } - kParent = prevParent; - } - } - break; - case "nth-child": - if (/^n$/.test(pseudoValue)) { - matchingElms = previousMatch; - } else { - sequence - = DOMAssistant.getSequence(pseudoValue); - if (sequence) { - for (var l = 0; - (previous = previousMatch[l]); - l++) { - prevParent = previous.parentNode; - if (!prevParent.childElms) { - iteratorNext = sequence.start; - childCount = 0; - childElm - = prevParent.firstChild; - while (childElm && (sequence.max - < 0 || iteratorNext - <= sequence.max)) { - if (childElm.nodeType - === 1) { - if (++childCount - === iteratorNext) { - if (childElm.nodeName - === previous.nodeName) { - matchingElms[matchingElms.length] - = childElm; - } - iteratorNext - += sequence.add; - } - } - childElm - = childElm.nextSibling; - } - prevParent.childElms = true; - prevParents[prevParents.length] - = prevParent; - } - } - clearChildElms(); - } - } - break; - case "first-of-type": - case "last-of-type": - for (var n = 0; - (next = previous = previousMatch[n]); - n++) { - while ((next = next[direction]) - && next.nodeName - !== previous.nodeName) { - } - if (!next) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "only-of-type": - for (var o = 0, oParent; (prev = next = previous - = previousMatch[o]); o++) { - prevParent = previous.parentNode; - if (prevParent !== oParent) { - while ((prev = prev.previousSibling) - && prev.nodeName - !== previous.nodeName) { - } - while ((next = next.nextSibling) - && next.nodeName - !== previous.nodeName) { - } - if (!prev && !next) { - matchingElms[matchingElms.length] - = previous; - } - oParent = prevParent; - } - } - break; - case "nth-of-type": - if (/^n$/.test(pseudoValue)) { - matchingElms = previousMatch; - } else { - sequence - = DOMAssistant.getSequence(pseudoValue); - if (sequence) { - for (var p = 0; - (previous = previousMatch[p]); - p++) { - prevParent = previous.parentNode; - if (!prevParent.childElms) { - iteratorNext = sequence.start; - childCount = 0; - childElm - = prevParent.firstChild; - while (childElm && (sequence.max - < 0 || iteratorNext - <= sequence.max)) { - if (childElm.nodeName - === previous.nodeName) { - if (++childCount - === iteratorNext) { - matchingElms[matchingElms.length] - = childElm; - iteratorNext - += sequence.add; - } - } - childElm - = childElm.nextSibling; - } - prevParent.childElms = true; - prevParents[prevParents.length] - = prevParent; - } - } - clearChildElms(); - } - } - break; - case "empty": - for (var q = 0; (previous = previousMatch[q]); - q++) { - if (!previous.childNodes.length) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "enabled": - for (var r = 0; (previous = previousMatch[r]); - r++) { - if (!previous.disabled) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "disabled": - for (var s = 0; (previous = previousMatch[s]); - s++) { - if (previous.disabled) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "checked": - for (var t = 0; (previous = previousMatch[t]); - t++) { - if (previous.checked) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - case "contains": - for (var u = 0; (previous = previousMatch[u]); - u++) { - if (!previous.added) { - if (previous.innerText.indexOf(pseudoValue) - !== -1) { - previous.added = true; - matchingElms[matchingElms.length] - = previous; - } - } - } - break; - case "not": - if (/^(:\w+[\w\-]*)$/.test(pseudoValue)) { - matchingElms - = subtractArray(previousMatch, getElementsByPseudo(previousMatch, pseudoValue.slice(1))); - } else { - pseudoValue - = pseudoValue.replace(/^\[#([\w\u00C0-\uFFFF\-\_]+)\]$/, "[id=$1]"); - var notTag = /^(\w+)/.exec(pseudoValue); - var notClass = /^\.([\w\u00C0-\uFFFF\-_]+)/.exec(pseudoValue); - var notAttr = /\[(\w+)(\^|\$|\*|\||~)?=?([\w\u00C0-\uFFFF\s\-_\.]+)?\]/.exec(pseudoValue); - var notRegExp = new RegExp("(^|\\s)" - + (notTag ? notTag[1] : notClass - ? notClass[1] : "") - + "(\\s|$)", "i"); - if (notAttr) { - var notAttribute = notAttr[3] - ? notAttr[3].replace(/\./g, "\\.") - : null; - var notMatchingAttrVal = attrToRegExp(notAttribute, notAttr[2]); - notRegExp - = new RegExp(notMatchingAttrVal, "i"); - } - for (var v = 0, notElm; - (notElm = previousMatch[v]); v++) { - addElm = null; - if (notTag - && !notRegExp.test(notElm.nodeName)) { - addElm = notElm; - } else if (notClass - && !notRegExp.test(notElm.className)) { - addElm = notElm; - } else if (notAttr) { - var att = getAttr(notElm, notAttr[1]); - if (!att || !notRegExp.test(att)) { - addElm = notElm; - } - } - if (addElm && !addElm.added) { - addElm.added = true; - matchingElms[matchingElms.length] - = addElm; - } - } - } - break; - default: - for (var w = 0; (previous = previousMatch[w]); - w++) { - if (previous.getAttribute(pseudoClass, 2) - === pseudoValue) { - matchingElms[matchingElms.length] - = previous; - } - } - break; - } - return matchingElms; - } - - for (var a = 0; (currentRule = cssRules[a]); a++) { - if (a > 0) { - identical = false; - for (var b = 0, bl = a; b < bl; b++) { - if (cssRules[a] === cssRules[b]) { - identical = true; - break; - } - } - if (identical) { - continue; - } - } - cssSelectors = currentRule.match(selectorSplitRegExp); - prevElm = [this]; - for (var i = 0, rule; (rule = cssSelectors[i]); i++) { - matchingElms = []; - if (i > 0 && childOrSiblingRefRegExp.test(rule)) { - childOrSiblingRef - = childOrSiblingRefRegExp.exec(rule); - if (childOrSiblingRef) { - nextTag = /^\w+/.exec(cssSelectors[i + 1]); - if (nextTag) { - nextTag = nextTag[0]; - nextRegExp = new RegExp("(^|\\s)" - + nextTag + "(\\s|$)", "i"); - } - for (var j = 0, prevRef; - (prevRef = prevElm[j]); j++) { - switch (childOrSiblingRef[0]) { - case ">": - var children = getElementsByTagName(nextTag, prevRef); - for (var k = 0, child; - (child = children[k]); - k++) { - if (child.parentNode - === prevRef) { - matchingElms[matchingElms.length] - = child; - } - } - break; - case "+": - while ((prevRef - = prevRef.nextSibling) - && prevRef.nodeType - !== 1) { - } - if (prevRef) { - if (!nextTag - || nextRegExp.test(prevRef.nodeName)) { - matchingElms[matchingElms.length] - = prevRef; - } - } - break; - case "~": - while ((prevRef - = prevRef.nextSibling) - && !prevRef.added) { - if (!nextTag - || nextRegExp.test(prevRef.nodeName)) { - prevRef.added = true; - matchingElms[matchingElms.length] - = prevRef; - } - } - break; - } - } - prevElm = matchingElms; - clearAdded(); - rule = cssSelectors[++i]; - if (/^\w+$/.test(rule)) { - continue; - } - prevElm.skipTag = true; - } - } - var cssSelector = cssSelectorRegExp.exec(rule); - var splitRule = { - tag : (!cssSelector[1] || cssSelector[3] - === "*") ? "*" : cssSelector[1], - id : (cssSelector[3] !== "*") ? cssSelector[2] - : null, - allClasses : cssSelector[4], - allAttr : cssSelector[6], - allPseudos : cssSelector[10] - }; - if (splitRule.id) { - var DOMElm = document.getElementById(splitRule.id.replace(/#/, "")); - if (DOMElm) { - matchingElms = [DOMElm]; - } - prevElm = matchingElms; - } else if (splitRule.tag && !prevElm.skipTag) { - if (i === 0 && !matchingElms.length - && prevElm.length === 1) { - prevElm = matchingElms - = pushAll([], getElementsByTagName(splitRule.tag, prevElm[0])); - } else { - for (var l = 0, ll = prevElm.length, tagCollectionMatches, tagMatch; - l < ll; l++) { - tagCollectionMatches - = getElementsByTagName(splitRule.tag, prevElm[l]); - for (var m = 0; (tagMatch - = tagCollectionMatches[m]); - m++) { - if (!tagMatch.added) { - tagMatch.added = true; - matchingElms[matchingElms.length] - = tagMatch; - } - } - } - prevElm = matchingElms; - clearAdded(); - } - } - if (!matchingElms.length) { - break; - } - prevElm.skipTag = false; - if (splitRule.allClasses) { - splitRule.allClasses - = splitRule.allClasses.replace(/^\./, "").split("."); - regExpClassNames = []; - for (var n = 0, nl = splitRule.allClasses.length; - n < nl; n++) { - regExpClassNames[regExpClassNames.length] - = new RegExp("(^|\\s)" - + splitRule.allClasses[n] - + "(\\s|$)"); - } - matchingClassElms = []; - for (var o = 0, elmClass; - (current = prevElm[o]); o++) { - elmClass = current.className; - if (elmClass && !current.added) { - addElm = false; - for (var p = 0, pl = regExpClassNames.length; - p < pl; p++) { - addElm = regExpClassNames[p].test(elmClass); - if (!addElm) { - break; - } - } - if (addElm) { - current.added = true; - matchingClassElms[matchingClassElms.length] - = current; - } - } - } - clearAdded(); - prevElm = matchingElms = matchingClassElms; - } - if (splitRule.allAttr) { - splitRule.allAttr - = splitRule.allAttr.match(/\[[^\]]+\]/g); - regExpAttributes = []; - attributeMatchRegExp - = /(\w+)(\^|\$|\*|\||~)?=?([\w\u00C0-\uFFFF\s\-_\.]+)?/; - for (var q = 0, ql = splitRule.allAttr.length, attributeMatch, attributeValue, attrVal; - q < ql; q++) { - attributeMatch - = attributeMatchRegExp.exec(splitRule.allAttr[q]); - attributeValue = attributeMatch[3] - ? attributeMatch[3].replace(/\./g, "\\.") - : null; - attrVal = attrToRegExp(attributeValue, (attributeMatch[2] - || null)); - regExpAttributes[regExpAttributes.length] - = [(attrVal ? new RegExp(attrVal) - : null), attributeMatch[1]]; - } - matchingAttributeElms = []; - for (var r = 0, currentAttr; - (current = matchingElms[r]); r++) { - for (var s = 0, sl = regExpAttributes.length, attributeRegExp; - s < sl; s++) { - addElm = false; - attributeRegExp - = regExpAttributes[s][0]; - currentAttr - = getAttr(current, regExpAttributes[s][1]); - if (typeof currentAttr === "string" - && currentAttr.length) { - if (!attributeRegExp - || typeof attributeRegExp - === "undefined" - || (attributeRegExp - && attributeRegExp.test(currentAttr))) { - addElm = true; - } - } - if (!addElm) { - break; - } - } - if (addElm) { - matchingAttributeElms[matchingAttributeElms.length] - = current; - } - } - prevElm = matchingElms = matchingAttributeElms; - } - if (splitRule.allPseudos) { - var pseudoSplitRegExp = /:(\w[\w\-]*)(\(([^\)]+)\))?/; - splitRule.allPseudos - = splitRule.allPseudos.match(/(:\w+[\w\-]*)(\([^\)]+\))?/g); - for (var t = 0, tl = splitRule.allPseudos.length; - t < tl; t++) { - var pseudo = splitRule.allPseudos[t].match(pseudoSplitRegExp); - var pseudoClass = pseudo[1] - ? pseudo[1].toLowerCase() : null; - var pseudoValue = pseudo[3] ? pseudo[3] - : null; - matchingElms - = getElementsByPseudo(matchingElms, pseudoClass, pseudoValue); - clearAdded(matchingElms); - } - prevElm = matchingElms; - } - } - elm = pushAll(elm, prevElm); - } - return elm; - }; - } - if (document.querySelectorAll) { - var cssSelectionBackup = DOMAssistant.cssSelection; - DOMAssistant.cssSelection = function (cssRule) { - try { - var elm = new HTMLArray(); - return pushAll(elm, this.querySelectorAll(cssRule)); - } catch (e) { - return cssSelectionBackup.call(this, cssRule); - } - }; - } - return DOMAssistant.cssSelection.call(this, cssRule); - }, - - cssSelect : function (cssRule) { - return DOMAssistant.cssSelection.call(this, cssRule); - }, - - elmsByClass : function (className, tag) { - var cssRule = (tag || "") + "." + className; - return DOMAssistant.cssSelection.call(this, cssRule); - }, - - elmsByAttribute : function (attr, attrVal, tag, substrMatchSelector) { - var cssRule = (tag || "") + "[" + attr + ((attrVal && attrVal - !== "*") ? ((substrMatchSelector || "") + "=" + attrVal - + "]") : "]"); - return DOMAssistant.cssSelection.call(this, cssRule); - }, - - elmsByTag : function (tag) { - return DOMAssistant.cssSelection.call(this, tag); - } - }; -}(); -DOMAssistant.initCore(); -DOMAssistant.AJAX = function () { - var globalXMLHttp = null; - var readyState = 0; - var status = -1; - var statusText = ""; - var createAjaxObj = function (url, method, callback, addToContent) { - var params = null; - if (/POST/i.test(method)) { - url = url.split("?"); - params = url[1]; - url = url[0]; - } - return { - url: url, - method : method, - callback : callback, - params : params, - headers : {}, - responseType : "text", - addToContent : addToContent || false - }; - }; - return { - publicMethods : [ - "ajax", - "get", - "post", - "load", - "replaceWithAJAXContent" - ], - - initRequest : function () { - var XMLHttp = null; - if (typeof XMLHttpRequest !== "undefined") { - XMLHttp = new XMLHttpRequest(); - DOMAssistant.AJAX.initRequest = function () { - return new XMLHttpRequest(); - }; - } else if (typeof window.ActiveXObject !== "undefined") { - var XMLHttpMS = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; - for (var i = 0; i < XMLHttpMS.length; i++) { - try { - XMLHttp = new window.ActiveXObject(XMLHttpMS[i]); - DOMAssistant.AJAX.initRequest = function () { - return new window.ActiveXObject(XMLHttpMS[i]); - }; - break; - } catch (e) { - XMLHttp = null; - } - } - } - return XMLHttp; - }, - - ajax : function (ajaxObj) { - if (ajaxObj.url && /\?/.test(ajaxObj.url) && ajaxObj.method - && /POST/i.test(ajaxObj.method)) { - var url = ajaxObj.url.split("?"); - ajaxObj.url = url[0]; - ajaxObj.params = url[1] + ((url[1].length > 0 && ajaxObj.params) - ? ("&" + ajaxObj.params) : ""); - } - return DOMAssistant.AJAX.makeCall.call(this, ajaxObj); - }, - - get : function (url, callback, addToContent) { - var ajaxObj = createAjaxObj(url, "GET", callback, addToContent); - return DOMAssistant.AJAX.makeCall.call(this, ajaxObj); - }, - - post : function (url, callback) { - var ajaxObj = createAjaxObj(url, "POST", callback); - return DOMAssistant.AJAX.makeCall.call(this, ajaxObj); - }, - - load : function (url, addToContent) { - DOMAssistant.AJAX.get.call(this, url, DOMAssistant.AJAX.replaceWithAJAXContent, addToContent); - }, - - makeCall : function (ajaxObj) { - var XMLHttp = DOMAssistant.AJAX.initRequest(); - if (XMLHttp) { - globalXMLHttp = XMLHttp; - var ajaxCall = function (elm) { - var url = ajaxObj.url; - var method = ajaxObj.method || "GET"; - var callback = ajaxObj.callback; - var params = ajaxObj.params; - var headers = ajaxObj.headers; - var responseType = ajaxObj.responseType || "text"; - var addToContent = ajaxObj.addToContent; - XMLHttp.open(method, url, true); - XMLHttp.setRequestHeader("AJAX", "true"); - XMLHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); - if (method === "POST") { - var contentLength = params ? params.length : 0; - XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - XMLHttp.setRequestHeader("Content-length", contentLength); - if (XMLHttp.overrideMimeType) { - XMLHttp.setRequestHeader("Connection", "close"); - } - } - for (var i in headers) { - if (typeof i === "string") { - XMLHttp.setRequestHeader(i, headers[i]); - } - } - if (typeof callback === "function") { - XMLHttp.onreadystatechange = function () { - if (XMLHttp.readyState === 4) { - var response = (/xml/i.test(responseType)) - ? XMLHttp.responseXML - : XMLHttp.responseText; - callback.call(elm, response, addToContent); - readyState = 4; - status = XMLHttp.status; - statusText = XMLHttp.statusText; - globalXMLHttp = null; - XMLHttp = null; - } - }; - } - XMLHttp.send(params); - }(this); - } - return this; - }, - - replaceWithAJAXContent : function (content, add) { - if (add) { - this.innerHTML += content; - } else { - var elms = this.elmsByTag("*"); - for (var i = 0, elm, attr; (elm = elms[i]); i++) { - attr = elm.attributes; - if (attr) { - for (var j = 0, jl = attr.length; j < jl; j++) { - if (typeof elm[attr[j].name] === "function") { - elm[attr[j].name] = null; - } - } - } - } - this.innerHTML = content; - } - }, - - getReadyState : function () { - return (globalXMLHttp && typeof globalXMLHttp.readyState - !== "undefined") ? globalXMLHttp.readyState : readyState; - }, - - getStatus : function () { - return status; - }, - - getStatusText : function () { - return statusText; - } - }; -}(); -DOMAssistant.attach(DOMAssistant.AJAX); -DOMAssistant.CSS = function () { - return { - addClass : function (className) { - var currentClass = this.className; - if (!new RegExp(("(^|\\s)" + className - + "(\\s|$)"), "i").test(currentClass)) { - this.className = currentClass + (currentClass.length ? " " : "") - + className; - } - return this; - }, - - removeClass : function (className) { - var classToRemove = new RegExp(("(^|\\s)" + className - + "(\\s|$)"), "i"); - this.className = this.className.replace(classToRemove, function ( - match) { - var retVal = ""; - if (new RegExp("^\\s+.*\\s+$").test(match)) { - retVal = match.replace(/(\s+).+/, "$1"); - } - return retVal; - }).replace(/^\s+|\s+$/g, ""); - return this; - }, - - replaceClass : function (className, newClass) { - var classToRemove = new RegExp(("(^|\\s)" + className - + "(\\s|$)"), "i"); - this.className = this.className.replace(classToRemove, function ( - match, p1, p2) { - var retVal = p1 + newClass + p2; - if (new RegExp("^\\s+.*\\s+$").test(match)) { - retVal = match.replace(/(\s+).+/, "$1"); - } - return retVal; - }).replace(/^\s+|\s+$/g, ""); - return this; - }, - - hasClass : function (className) { - return new RegExp(("(^|\\s)" + className - + "(\\s|$)"), "i").test(this.className); - }, - - setStyle : function (style, value) { - if (typeof this.style.cssText !== "undefined") { - var styleToSet = this.style.cssText; - if (typeof style === "object") { - for (var i in style) { - if (typeof i === "string") { - styleToSet += ";" + i + ":" + style[i]; - } - } - } else { - styleToSet += ";" + style + ":" + value; - } - this.style.cssText = styleToSet; - } - return this; - }, - - getStyle : function (cssRule) { - var cssVal = ""; - if (document.defaultView && document.defaultView.getComputedStyle) { - cssVal = document.defaultView.getComputedStyle(this, "").getPropertyValue(cssRule); - } else if (this.currentStyle) { - cssVal = cssRule.replace(/\-(\w)/g, function (match, p1) { - return p1.toUpperCase(); - }); - cssVal = this.currentStyle[cssVal]; - } - return cssVal; - } - }; -}(); -DOMAssistant.attach(DOMAssistant.CSS); -DOMAssistant.Content = function () { - return { - prev : function () { - var prevSib = this; - while ((prevSib = prevSib.previousSibling) && prevSib.nodeType - !== 1) { - } - return DOMAssistant.$(prevSib); - }, - - next : function () { - var nextSib = this; - while ((nextSib = nextSib.nextSibling) && nextSib.nodeType !== 1) { - } - return DOMAssistant.$(nextSib); - }, - - create : function (name, attr, append, content) { - var elm = DOMAssistant.$(document.createElement(name)); - if (attr) { - elm.setAttributes(attr); - } - if (typeof content !== "undefined") { - elm.addContent(content); - } - if (append) { - DOMAssistant.Content.addContent.call(this, elm); - } - return elm; - }, - - setAttributes : function (attr) { - for (var i in attr) { - if (/class/i.test(i)) { - this.className = attr[i]; - } else { - this.setAttribute(i, attr[i]); - } - } - return this; - }, - - addContent : function (content) { - if (typeof content === "string") { - this.innerHTML += content; - } else if (typeof content === "object" && content) { - this.appendChild(content); - } - return this; - }, - - replaceContent : function (newContent) { - for (var i = (this.childNodes.length - 1), child, attr; i >= 0; - i--) { - child = this.childNodes[i]; - attr = child.attributes; - if (attr) { - for (var j = 0, jl = attr.length; j < jl; j++) { - if (typeof child[attr[j].name] === "function") { - child[attr[j].name] = null; - } - } - } - child.parentNode.removeChild(child); - } - DOMAssistant.$(this).addContent(newContent); - return this; - }, - - remove : function () { - this.parentNode.removeChild(this); - return null; - } - }; -}(); -DOMAssistant.attach(DOMAssistant.Content); -DOMAssistant.Events = function () { - var uniqueHandlerId = 1; - return { - publicMethods : [ - "addEvent", - "removeEvent", - "preventDefault", - "cancelBubble" - ], - - init : function () { - window.addEvent = this.addEvent; - window.removeEvent = this.removeEvent; - DOMAssistant.preventDefault = this.preventDefault; - DOMAssistant.cancelBubble = this.cancelBubble; - }, - - addEvent : function (evt, func) { - var XULEvent = (/^DOM/.test(evt)); - if (XULEvent) { - if (this.addEventListener) { - this.addEventListener(evt, func, false); - } - } else { - if (!this.uniqueHandlerId) { - this.uniqueHandlerId = uniqueHandlerId++; - } - var alreadyExists = false; - if (func.attachedElements && func.attachedElements[evt - + this.uniqueHandlerId]) { - alreadyExists = true; - } - if (!alreadyExists) { - if (!this.events) { - this.events = {}; - } - if (!this.events[evt]) { - this.events[evt] = []; - var existingEvent = this["on" + evt]; - if (existingEvent) { - this.events[evt].push(existingEvent); - } - } - this.events[evt].push(func); - this["on" + evt] = DOMAssistant.Events.handleEvent; - if (typeof this.window === "object") { - this.window["on" + evt] - = DOMAssistant.Events.handleEvent; - } - if (!func.attachedElements) { - func.attachedElements = {}; - } - func.attachedElements[evt + this.uniqueHandlerId] = true; - } - } - return this; - }, - - handleEvent : function (evt) { - var currentEvt = evt || event; - var currentTarget = currentEvt.target || currentEvt.srcElement - || document; - while (currentTarget.nodeType !== 1 && currentTarget.parentNode) { - currentTarget = currentTarget.parentNode; - } - currentEvt.eventTarget = currentTarget; - var eventType = currentEvt.type; - var eventColl = this.events[eventType]; - var eventCollLength = eventColl.length; - var eventReturn; - for (var i = 0; i < eventCollLength; i++) { - eventReturn = eventColl[i].call(this, currentEvt); - if (i === (eventCollLength - 1)) { - return eventReturn; - } - } - }, - - removeEvent : function (evt, func) { - if (this.events) { - var eventColl = this.events[evt]; - for (var i = 0; i < eventColl.length; i++) { - if (eventColl[i] === func) { - delete eventColl[i]; - eventColl.splice(i, 1); - } - } - func.attachedElements[evt + this.uniqueHandlerId] = null; - } - return this; - }, - - preventDefault : function (evt) { - if (evt && evt.preventDefault) { - DOMAssistant.Events.preventDefault = function (evt) { - evt.preventDefault(); - }; - } else { - DOMAssistant.Events.preventDefault = function (evt) { - event.returnValue = false; - }; - } - return DOMAssistant.Events.preventDefault(evt); - }, - - cancelBubble : function (evt) { - if (evt && evt.stopPropagation) { - DOMAssistant.Events.cancelBubble = function (evt) { - evt.stopPropagation(); - }; - } else { - DOMAssistant.Events.cancelBubble = function (evt) { - event.cancelBubble = true; - }; - } - return DOMAssistant.Events.cancelBubble(evt); - } - }; -}(); -DOMAssistant.attach(DOMAssistant.Events); -DOMAssistant.DOMLoad = function () { - var DOMLoaded = false; - var DOMLoadTimer = null; - var functionsToCall = []; - var addedStrings = {}; - var errorHandling = null; - var execFunctions = function () { - for (var i = 0, il = functionsToCall.length; i < il; i++) { - try { - functionsToCall[i](); - } catch (e) { - if (errorHandling && typeof errorHandling === "function") { - errorHandling(e); - } - } - } - functionsToCall = []; - }; - var DOMHasLoaded = function () { - if (DOMLoaded) { - return; - } - DOMLoaded = true; - execFunctions(); - }; - /* Internet Explorer */ - /*@cc_on - @if (@_win32 || @_win64) - if (document.getElementById) { - document.write("<script id=\"ieScriptLoad\" defer src=\"//:\"><\/script>"); - document.getElementById("ieScriptLoad").onreadystatechange = function() { - if (this.readyState === "complete") { - DOMHasLoaded(); - } - }; - } - @end @*/ - /* Mozilla/Opera 9 */ - if (document.addEventListener) { - document.addEventListener("DOMContentLoaded", DOMHasLoaded, false); - } - /* Safari, iCab, Konqueror */ - if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) { - DOMLoadTimer = setInterval(function () { - if (/loaded|complete/i.test(document.readyState)) { - DOMHasLoaded(); - clearInterval(DOMLoadTimer); - } - }, 10); - } - /* Other web browsers */ - window.onload = DOMHasLoaded; - - return { - DOMReady : function () { - for (var i = 0, il = arguments.length, funcRef; i < il; i++) { - funcRef = arguments[i]; - if (!funcRef.DOMReady && !addedStrings[funcRef]) { - if (typeof funcRef === "string") { - addedStrings[funcRef] = true; - funcRef = new Function(funcRef); - } - funcRef.DOMReady = true; - functionsToCall.push(funcRef); - } - } - if (DOMLoaded) { - execFunctions(); - } - }, - - setErrorHandling : function (funcRef) { - errorHandling = funcRef; - } - }; -}(); -DOMAssistant.DOMReady = DOMAssistant.DOMLoad.DOMReady;
\ No newline at end of file diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html index 1f041bb6..b2a7cc08 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html @@ -2,26 +2,33 @@ <html>
<head>
- <title>GQuery</title>
- <!--<script type="text/javascript" src="jquery-1.2.3.js"></script>-->
- <!--<script type="text/javascript" src="ext-base.js"></script>-->
- <!--<script type="text/javascript" src="ext-all.js"></script>-->
- <script type="text/javascript" src="DOMAssistantComplete-2.7.js"></script>
- <script language="javascript"
- src="gwtquery.samples.GwtQueryBench.nocache.js"></script>
- <!--<script language="javascript" src="http://dev.jquery.com/~john/speed/js/jquery.js"></script>-->
- <!--<script type="text/javascript">-->
- <!--$(document).ready(function() {-->
- <!--alert("div ~ div size ="+$("div ~ div").size());-->
- <!--})-->
- <!--</script>-->
+ <title>GwtQuery BenchMarks</title>
<style>
* {
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
color: white;
+ font-size: 14px;
+ }
+ .resultstable {
+ width: 100%;
+ }
+ .resultstable td {
+ font-size: 10px;
+ }
+
+ #startrace {
+ cursor: pointer;
+ }
+
+ #selectcontainer {
+ color: black;
+ background: #808080;
+ border: 2px solid #936630;
+ padding: 20px;
+ width: 200px;
}
- body {
+ body, select {
background-color: black;
}
@@ -29,3205 +36,56 @@ background-color: green;
color: white
}
-
.tie {
background-color: orange;
color: white
}
-
.lose {
background-color: red;
color: white
}
-
.broke {
background-color: black;
color: white
}
+
+ img.himg, img.flag {
+ height: 35px;
+ }
+ img.logo {
+ max-width: 100px;
+ max-height: 30px;
+ }
+ .horse {
+ position: relative;
+ width: 150px;
+ }
+ .horse span {
+ font-weight: bold;
+ font-size: 12px;
+ color: white;
+ }
</style>
</head>
<body>
-<h2 style="width: 790px; color: white; border-bottom: 1px solid gray">GWTSpeed -
- GWT Query
- benchmarks
- <div id="startrace" style="float: right; color: red">Start Race</div>
-</h2>
-<iframe id="racetrack" src="racetrack.html" width="800" height="310"
- frameborder="0" marginheight="0" marginwidth="0"></iframe>
-<iframe id="jquerybench" src="jquerybench.html" style="display: none"></iframe>
-<iframe id="dojobench" src="dojobench.html" style="display: none"></iframe>
-<iframe id="prototypebench" src="prototypebench.html"
- style="display: none"></iframe>
-
-<!-- hack, we don't use DIV because we don't want to effect the result of the selectors -->
-<blockquote
- style="display: block; height: 200px; width:790px; overflow-y:scroll; overflow-x: hidden; margin: 0">
- <table id="resultstable" border="1"
- style="width: 100%; border-collapse: collapse">
-
- </table>
-</blockquote>
-<div style="display: none">
-<div style="display: none" class="head">
- <p><a href="http://www.w3.org/"><img height=48 alt=W3C
- src="http://www.w3.org/Icons/w3c_home"
- width=72></a>
-
- <h1 id="title">Selectors</h1>
-
- <h2>W3C Working Draft 15 December 2005</h2>
-
- <dl>
-
- <dt>This version:
-
- <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">
- http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>
-
- <dt>Latest version:
-
- <dd><a href="http://www.w3.org/TR/css3-selectors">
- http://www.w3.org/TR/css3-selectors</a>
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">
- http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
-
- <dt><a name=editors-list></a>Editors:
-
- <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited
- Expert)
- </dd>
-
- <dd class="vcard"><a lang="tr" class="url fn"
- href="http://www.tantek.com/">Tantek Çelik</a>
- (Invited Expert)
-
- <dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian
- Hickson</a> (<span
- class="company"><a
- href="http://www.google.com/">Google</a></span>)
-
- <dd class="vcard"><span class="fn">Peter Linss</span> (former
- editor, <span class="company"><a
- href="http://www.netscape.com/">Netscape/AOL</a></span>)
-
- <dd class="vcard"><span class="fn">John Williams</span> (former editor, <span
- class="company"><a
- href="http://www.quark.com/">Quark, Inc.</a></span>)
-
- </dl>
-
- <p class="copyright"><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">
- Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr
- title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
- (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
- Institute of Technology">MIT</abbr></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research
- Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
- W3C
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.
-
- <hr title="Separator for header">
-
-</div>
-
-<h2><a name=abstract></a>Abstract</h2>
-
-<p><em>Selectors</em> are patterns that match against elements in a
- tree. Selectors have been optimized for use with HTML and XML, and
- are designed to be usable in performance-critical code.</p>
-
-<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading
- Style Sheets) is a language for describing the rendering of <acronym
- title="Hypertext Markup Language">HTML</acronym> and <acronym
- title="Extensible Markup Language">XML</acronym> documents on
- screen, on paper, in speech, etc. CSS uses Selectors for binding
- style properties to elements in the document. This document
- describes extensions to the selectors defined in CSS level 2. These
- extended selectors will be used by CSS level 3.
-
-<p>Selectors define the following function:</p>
-
-<pre>expression ∗ element → boolean</pre>
-
-<p>That is, given an element and a selector, this specification
- defines whether that element matches the selector.</p>
-
-<p>These expressions can also be used, for instance, to select a set
- of elements, or a single element from a set of elements, by
- evaluating the expression across all the elements in a
- subtree. <acronym title="Simple Tree Transformation
- Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a
- language for transforming XML trees, uses this mechanism. <a
- href="#refsSTTS">[STTS]</a></p>
-
-<h2><a name=status></a>Status of this document</h2>
-
-<p><em>This section describes the status of this document at the
- time of its publication. Other documents may supersede this
- document. A list of current W3C publications and the latest revision
- of this technical report can be found in the <a
- href="http://www.w3.org/TR/">W3C technical reports index at
- http://www.w3.org/TR/.</a></em></p>
-
-<p>This document describes the selectors that already exist in <a
- href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a
- href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and
- also proposes new selectors for <abbr title="CSS level
- 3">CSS3</abbr> and other languages that may need them.</p>
-
-<p>The CSS Working Group doesn't expect that all implementations of
- CSS3 will have to implement all selectors. Instead, there will
- probably be a small number of variants of CSS3, called profiles. For
- example, it may be that only a profile for interactive user agents
- will include all of the selectors.</p>
-
-<p>This specification is a last call working draft for the the <a
- href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
- (<a href="/Style/">Style Activity</a>). This
- document is a revision of the <a
- href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate
- Recommendation dated 2001 November 13</a>, and has incorporated
- implementation feedback received in the past few years. It is
- expected that this last call will proceed straight to Proposed
- Recommendation stage since it is believed that interoperability will
- be demonstrable.</p>
-
-<p>All persons are encouraged to review and implement this
- specification and return comments to the (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
- public mailing list <a
- href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>
- (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C
- Members can also send comments directly to the CSS Working
- Group.
- The deadline for comments is 14 January 2006.</p>
-
-<p>This is still a draft document and may be updated, replaced, or
- obsoleted by other documents at any time. It is inappropriate to
- cite a W3C Working Draft as other than "work in progress".
-
-<p>This document may be available in <a
- href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.
- The English version of this specification is the only normative
- version.
-
-<div class="subtoc">
-
- <h2><a name=contents>Table of contents</a></h2>
-
- <ul class="toc">
- <li class="tocline2"><a href="#context">1. Introduction</a>
- <ul>
- <li><a href="#dependencies">1.1. Dependencies</a></li>
- <li><a href="#terminology">1.2. Terminology</a></li>
- <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a></li>
- </ul>
- <li class="tocline2"><a href="#selectors">2. Selectors</a>
- <li class="tocline2"><a href="#casesens">3. Case sensitivity</a>
- <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>
- <li class="tocline2"><a href="#grouping">5. Groups of selectors</a>
- <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#type-selectors">6.1. Type
- selectors</a>
- <ul class="toc">
- <li class="tocline4"><a href="#typenmsp">6.1.1. Type
- selectors and namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#universal-selector">6.2.
- Universal selector</a>
- <ul>
- <li><a href="#univnmsp">6.2.1. Universal selector and
- namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#attribute-selectors">6.3.
- Attribute selectors</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#attribute-representation">6.3.1.
- Representation of attributes and attributes
- values</a>
- <li><a href="#attribute-substrings">6.3.2. Substring
- matching attribute selectors</a>
- <li class="tocline4"><a href="#attrnmsp">6.3.3.
- Attribute selectors and namespaces</a>
- <li class="tocline4"><a href="#def-values">6.3.4.
- Default attribute values in DTDs</a></li>
- </ul>
- <li class="tocline3"><a href="#class-html">6.4. Class
- selectors</a>
- <li class="tocline3"><a href="#id-selectors">6.5. ID
- selectors</a>
- <li class="tocline3"><a href="#pseudo-classes">6.6.
- Pseudo-classes</a>
- <ul class="toc">
- <li class="tocline4"><a href="#dynamic-pseudos">6.6.1.
- Dynamic pseudo-classes</a>
- <li class="tocline4"><a href="#target-pseudo">6.6.2. The
- :target pseudo-class</a>
- <li class="tocline4"><a href="#lang-pseudo">6.6.3. The
- :lang() pseudo-class</a>
- <li class="tocline4"><a href="#UIstates">6.6.4. UI
- element states pseudo-classes</a>
- <li class="tocline4"><a href="#structural-pseudos">6.6.5.
- Structural pseudo-classes</a>
- <ul>
- <li><a href="#root-pseudo">:root
- pseudo-class</a>
- <li><a href="#nth-child-pseudo">:nth-child()
- pseudo-class</a>
- <li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
- <li><a href="#nth-of-type-pseudo">:nth-of-type()
- pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
- <li><a href="#first-child-pseudo">:first-child
- pseudo-class</a>
- <li><a href="#last-child-pseudo">:last-child
- pseudo-class</a>
- <li><a href="#first-of-type-pseudo">:first-of-type
- pseudo-class</a>
- <li><a href="#last-of-type-pseudo">:last-of-type
- pseudo-class</a>
- <li><a href="#only-child-pseudo">:only-child
- pseudo-class</a>
- <li><a href="#only-of-type-pseudo">:only-of-type
- pseudo-class</a>
- <li><a href="#empty-pseudo">:empty
- pseudo-class</a></li>
- </ul>
- <li class="tocline4"><a href="#negation">6.6.7. The
- negation pseudo-class</a></li>
- </ul>
- </li>
- </ul>
- <li><a href="#pseudo-elements">7. Pseudo-elements</a>
- <ul>
- <li><a href="#first-line">7.1. The ::first-line
- pseudo-element</a>
- <li><a href="#first-letter">7.2. The ::first-letter
- pseudo-element</a>
- <li><a href="#UIfragments">7.3. The ::selection
- pseudo-element</a>
- <li><a href="#gen-content">7.4. The ::before and ::after
- pseudo-elements</a></li>
- </ul>
- <li class="tocline2"><a href="#combinators">8. Combinators</a>
- <ul class="toc">
- <li class="tocline3"><a href="#descendant-combinators">8.1.
- Descendant combinators</a>
- <li class="tocline3"><a href="#child-combinators">8.2. Child
- combinators</a>
- <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling
- combinators</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#adjacent-sibling-combinators">8.3.1.
- Adjacent sibling combinator</a>
- <li class="tocline4"><a
- href="#general-sibling-combinators">8.3.2.
- General sibling combinator</a></li>
- </ul>
- </li>
- </ul>
- <li class="tocline2"><a href="#specificity">9. Calculating a selector's
- specificity</a>
- <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
- Selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#grammar">10.1. Grammar</a>
- <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a>
- </li>
- </ul>
- <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level
- clients</a>
- <li class="tocline2"><a href="#profiling">12. Profiles</a>
- <li><a href="#Conformance">13. Conformance and requirements</a>
- <li><a href="#Tests">14. Tests</a>
- <li><a href="#ACKS">15. Acknowledgements</a>
- <li class="tocline2"><a href="#references">16. References</a>
- </ul>
-
-</div>
-
-<h2><a name=context>1. Introduction</a></h2>
-
-<h3><a name=dependencies></a>1.1. Dependencies</h3>
-
-<p>Some features of this specification are specific to CSS, or have
- particular limitations or rules specific to CSS. In this
- specification, these have been described in terms of CSS2.1. <a
- href="#refsCSS21">[CSS21]</a></p>
-
-<h3><a name=terminology></a>1.2. Terminology</h3>
-
-<p>All of the text of this specification is normative except
- examples, notes, and sections explicitly marked as
- non-normative.</p>
-
-<h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>
-
-<p><em>This section is non-normative.</em></p>
-
-<p>The main differences between the selectors in CSS2 and those in
- Selectors are:
-
-<ul>
-
- <li>the list of basic definitions (selector, group of selectors,
- simple selector, etc.) has been changed; in particular, what was
- referred to in CSS2 as a simple selector is now called a sequence
- of simple selectors, and the term "simple selector" is now used for
- the components of this sequence
- </li>
-
- <li>an optional namespace component is now allowed in type element
- selectors, the universal selector and attribute selectors
- </li>
-
- <li>a <a href="#general-sibling-combinators">new combinator</a> has been
- introduced
- </li>
-
- <li>new simple selectors including substring matching attribute
- selectors, and new pseudo-classes
- </li>
-
- <li>new pseudo-elements, and introduction of the "::" convention
- for pseudo-elements
- </li>
-
- <li>the grammar has been rewritten</li>
-
- <li>profiles to be added to specifications integrating Selectors
- and defining the set of selectors which is actually supported by
- each specification
- </li>
-
- <li>Selectors are now a CSS3 Module and an independent
- specification; other specifications can now refer to this document
- independently of CSS
- </li>
-
- <li>the specification now has its own test suite</li>
-
-</ul>
-
-<h2><a name=selectors></a>2. Selectors</h2>
-
-<p><em>This section is non-normative, as it merely summarizes the
- following sections.</em></p>
-
-<p>A Selector represents a structure. This structure can be used as a
- condition (e.g. in a CSS rule) that determines which elements a
- selector matches in the document tree, or as a flat description of the
- HTML or XML fragment corresponding to that structure.</p>
-
-<p>Selectors may range from simple element names to rich contextual
- representations.</p>
-
-<p>The following table summarizes the Selector syntax:</p>
-
-<table class="selectorsReview">
-<thead>
-<tr>
- <th class="pattern">Pattern</th>
- <th class="meaning">Meaning</th>
- <th class="described">Described in section</th>
- <th class="origin">First defined in CSS level</th>
-</tr>
-<tbody>
-<tr>
- <td class="pattern">*</td>
- <td class="meaning">any element</td>
- <td class="described"><a
- href="#universal-selector">Universal
- selector</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E</td>
- <td class="meaning">an element of type E</td>
- <td class="described"><a
- href="#type-selectors">Type selector</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E[foo]</td>
- <td class="meaning">an E element with a "foo" attribute</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is exactly
- equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo~="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is a list of
- space-separated values, one of which is exactly equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo^="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value begins exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo$="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value ends exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo*="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value contains the
- substring "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[hreflang|="en"]</td>
- <td class="meaning">an E element whose "hreflang" attribute has a
- hyphen-separated
- list of values beginning (from the left) with "en"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:root</td>
- <td class="meaning">an E element, root of the document</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-child</td>
- <td class="meaning">an E element, first child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:last-child</td>
- <td class="meaning">an E element, last child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-of-type</td>
- <td class="meaning">an E element, first sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:last-of-type</td>
- <td class="meaning">an E element, last sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-child</td>
- <td class="meaning">an E element, only child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-of-type</td>
- <td class="meaning">an E element, only sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:empty</td>
- <td class="meaning">an E element that has no children (including text
- nodes)
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:link<br>E:visited</td>
- <td class="meaning">an E element being the source anchor of a hyperlink of
- which the target is not yet visited (:link) or already visited
- (:visited)
- </td>
- <td class="described"><a
- href="#link">The link
- pseudo-classes</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:active<br>E:hover<br>E:focus</td>
- <td class="meaning">an E element during certain user actions</td>
- <td class="described"><a
- href="#useraction-pseudos">The user
- action pseudo-classes</a></td>
- <td class="origin">1 and 2</td>
-</tr>
-<tr>
- <td class="pattern">E:target</td>
- <td class="meaning">an E element being the target of the referring URI</td>
- <td class="described"><a
- href="#target-pseudo">The target
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:lang(fr)</td>
- <td class="meaning">an element of type E in language "fr" (the document
- language specifies how language is determined)
- </td>
- <td class="described"><a
- href="#lang-pseudo">The :lang()
- pseudo-class</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:enabled<br>E:disabled</td>
- <td class="meaning">a user interface element E which is enabled or
- disabled
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:checked<!--<br>E:indeterminate--></td>
- <td class="meaning">a user interface element E which is checked<!-- or in an
- indeterminate state--> (for instance a radio-button or checkbox)
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::first-line</td>
- <td class="meaning">the first formatted line of an E element</td>
- <td class="described"><a
- href="#first-line">The ::first-line
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::first-letter</td>
- <td class="meaning">the first formatted letter of an E element</td>
- <td class="described"><a
- href="#first-letter">The ::first-letter
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::selection</td>
- <td class="meaning">the portion of an E element that is currently
- selected/highlighted by the user
- </td>
- <td class="described"><a
- href="#UIfragments">The UI element
- fragments pseudo-elements</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::before</td>
- <td class="meaning">generated content before an E element</td>
- <td class="described"><a
- href="#gen-content">The ::before
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E::after</td>
- <td class="meaning">generated content after an E element</td>
- <td class="described"><a
- href="#gen-content">The ::after
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E.warning</td>
- <td class="meaning">an E element whose class is
- "warning" (the document language specifies how class is determined).
- </td>
- <td class="described"><a
- href="#class-html">Class
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E#myid</td>
- <td class="meaning">an E element with ID equal to "myid".</td>
- <td class="described"><a
- href="#id-selectors">ID
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:not(s)</td>
- <td class="meaning">an E element that does not match simple selector s</td>
- <td class="described"><a
- href="#negation">Negation
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E F</td>
- <td class="meaning">an F element descendant of an E element</td>
- <td class="described"><a
- href="#descendant-combinators">Descendant
- combinator</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E > F</td>
- <td class="meaning">an F element child of an E element</td>
- <td class="described"><a
- href="#child-combinators">Child
- combinator</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E + F</td>
- <td class="meaning">an F element immediately preceded by an E element</td>
- <td class="described"><a
- href="#adjacent-sibling-combinators">Adjacent sibling combinator</a>
- </td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E ~ F</td>
- <td class="meaning">an F element preceded by an E element</td>
- <td class="described"><a
- href="#general-sibling-combinators">General sibling combinator</a>
- </td>
- <td class="origin">3</td>
-</tr>
-</tbody>
-</table>
-
-<p>The meaning of each selector is derived from the table above by
- prepending "matches" to the contents of each cell in the "Meaning"
- column.</p>
-
-<h2><a name=casesens>3. Case sensitivity</a></h2>
-
-<p>The case sensitivity of document language element names, attribute
- names, and attribute values in selectors depends on the document
- language. For example, in HTML, element names are case-insensitive,
- but in XML, they are case-sensitive.</p>
-
-<h2><a name=selector-syntax>4. Selector syntax</a></h2>
-
-<p>A <dfn><a name=selector>selector</a></dfn> is a chain of one
- or more <a href="#sequence">sequences of simple selectors</a>
- separated by <a href="#combinators">combinators</a>.</p>
-
-<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>
- is a chain of <a href="#simple-selectors-dfn">simple selectors</a>
- that are not separated by a <a href="#combinators">combinator</a>. It
- always begins with a <a href="#type-selectors">type selector</a> or a
- <a href="#universal-selector">universal selector</a>. No other type
- selector or universal selector is allowed in the sequence.</p>
-
-<p>A <dfn><a name=simple-selectors-dfn></a><a
- href="#simple-selectors">simple selector</a></dfn> is either a <a
- href="#type-selectors">type selector</a>, <a
- href="#universal-selector">universal selector</a>, <a
- href="#attribute-selectors">attribute selector</a>, <a
- href="#class-html">class selector</a>, <a
- href="#id-selectors">ID selector</a>, <a
- href="#content-selectors">content selector</a>, or <a
- href="#pseudo-classes">pseudo-class</a>. One <a
- href="#pseudo-elements">pseudo-element</a> may be appended to the last
- sequence of simple selectors.</p>
-
-<p><dfn>Combinators</dfn> are: white space, "greater-than
- sign" (U+003E, <code>></code>), "plus sign" (U+002B,
- <code>+</code>) and "tilde" (U+007E, <code>~</code>). White
- space may appear between a combinator and the simple selectors around
- it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"
- (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form
- feed" (U+000C) can occur in white space. Other space-like characters,
- such as "em-space" (U+2003) and "ideographic space" (U+3000), are
- never part of white space.</p>
-
-<p>The elements of a document tree that are represented by a selector
- are the <dfn><a name=subject></a>subjects of the selector</dfn>. A
- selector consisting of a single sequence of simple selectors
- represents any element satisfying its requirements. Prepending another
- sequence of simple selectors and a combinator to a sequence imposes
- additional matching constraints, so the subjects of a selector are
- always a subset of the elements represented by the last sequence of
- simple selectors.</p>
-
-<p>An empty selector, containing no sequence of simple selectors and
- no pseudo-element, is an <a href="#Conformance">invalid
- selector</a>.</p>
-
-<h2><a name=grouping>5. Groups of selectors</a></h2>
-
-<p>When several selectors share the same declarations, they may be
- grouped into a comma-separated list. (A comma is U+002C.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>In this example, we condense three rules with identical
- declarations into one. Thus,</p>
-<pre>h1 { font-family: sans-serif }
-h2 { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
- <p>is equivalent to:</p>
- <pre>h1, h2, h3 { font-family: sans-serif }</pre>
-</div>
-
-<p><strong>Warning</strong>: the equivalence is true in this example
- because all the selectors are valid selectors. If just one of these
- selectors were invalid, the entire group of selectors would be
- invalid. This would invalidate the rule for all three heading
- elements, whereas in the former case only one of the three individual
- heading rules would be invalidated.</p>
-
-
-<h2><a name=simple-selectors>6. Simple selectors</a></h2>
-
-<h3><a name=type-selectors>6.1. Type selector</a></h3>
-
-<p>A <dfn>type selector</dfn> is the name of a document language
- element type. A type selector represents an instance of the element
- type in the document tree.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents an <code>h1</code> element in the
- document tree:</p>
- <pre>h1</pre>
-</div>
-
-
-<h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>
-
-<p>Type selectors allow an optional namespace (<a
- href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix
- that has been previously declared may be prepended to the element name
- separated by the namespace separator "vertical bar"
- (U+007C, <code>|</code>).</p>
-
-<p>The namespace component may be left empty to indicate that the
- selector is only to represent elements with no declared namespace.</p>
-
-<p>An asterisk may be used for the namespace prefix, indicating that
- the selector represents elements in any namespace (including elements
- with no namespace).</p>
-
-<p>Element type selectors that have no namespace component (no
- namespace separator), represent elements without regard to the
- element's namespace (equivalent to "<code>*|</code>") unless a default
- namespace has been declared. If a default namespace has been declared,
- the selector will represent only elements in the default
- namespace.</p>
-
-<p>A type selector containing a namespace prefix that has not been
- previously declared is an <a href="#Conformance">invalid</a> selector.
- The mechanism for declaring a namespace prefix is left up to the
- language implementing Selectors. In CSS, such a mechanism is defined
- in the General Syntax module.</p>
-
-<p>In a namespace-aware client, element type selectors will only match
- against the <a
- href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local
- part</a>
- of the element's <a
- href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
- name</a>. See <a href="#downlevel">below</a> for notes about matching
- behaviors in down-level clients.</p>
-
-<p>In summary:</p>
-
-<dl>
- <dt><code>ns|E</code></dt>
- <dd>elements with name E in namespace ns</dd>
- <dt><code>*|E</code></dt>
- <dd>elements with name E in any namespace, including those without any
- declared namespace
- </dd>
- <dt><code>|E</code></dt>
- <dd>elements with name E without any declared namespace</dd>
- <dt><code>E</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|E.
- Otherwise it is equivalent to ns|E where ns is the default namespace.
- </dd>
-</dl>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <pre>@namespace foo url(http://www.example.com);
- foo|h1 { color: blue }
- foo|* { color: yellow }
- |h1 { color: red }
- *|h1 { color: green }
- h1 { color: green }</pre>
-
- <p>The first rule will match only <code>h1</code> elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The second rule will match all elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The third rule will match only <code>h1</code> elements without
- any declared namespace.</p>
-
- <p>The fourth rule will match <code>h1</code> elements in any
- namespace (including those without any declared namespace).</p>
-
- <p>The last rule is equivalent to the fourth rule because no default
- namespace has been defined.</p>
-
-</div>
-
-<h3><a name=universal-selector>6.2. Universal selector</a></h3>
-
-<p>The <dfn>universal selector</dfn>, written "asterisk"
- (<code>*</code>), represents the qualified name of any element
- type. It represents any single element in the document tree in any
- namespace (including those without any declared namespace) if no
- default namespace has been specified. If a default namespace has been
- specified, see <a href="#univnmsp">Universal selector and
- Namespaces</a> below.</p>
-
-<p>If the universal selector is not the only component of a sequence
- of simple selectors, the <code>*</code> may be omitted.</p>
-
-<div class="example">
- <p>Examples:</p>
- <ul>
- <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
- equivalent,
- </li>
- <li><code>*.warning</code> and <code>.warning</code> are equivalent,
- </li>
- <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>
- </ul>
-</div>
-
-<p class="note"><strong>Note:</strong> it is recommended that the
- <code>*</code>, representing the universal selector, not be
- omitted.</p>
-
-<h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>
-
-<p>The universal selector allows an optional namespace component. It
- is used as follows:</p>
-
-<dl>
- <dt><code>ns|*</code></dt>
- <dd>all elements in namespace ns</dd>
- <dt><code>*|*</code></dt>
- <dd>all elements</dd>
- <dt><code>|*</code></dt>
- <dd>all elements without any declared namespace</dd>
- <dt><code>*</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|*.
- Otherwise it is equivalent to ns|* where ns is the default namespace.
- </dd>
-</dl>
-
-<p>A universal selector containing a namespace prefix that has not
- been previously declared is an <a href="#Conformance">invalid</a>
- selector. The mechanism for declaring a namespace prefix is left up
- to the language implementing Selectors. In CSS, such a mechanism is
- defined in the General Syntax module.</p>
-
-
-<h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>
-
-<p>Selectors allow the representation of an element's attributes. When
- a selector is used as an expression to match against an element,
- attribute selectors must be considered to match an element if that
- element has an attribute that matches the attribute represented by the
- attribute selector.</p>
-
-<h4><a name=attribute-representation>6.3.1. Attribute presence and values
- selectors</a></h4>
-
-<p>CSS2 introduced four attribute selectors:</p>
-
-<dl>
- <dt><code>[att]</code>
- <dd>Represents an element with the <code>att</code> attribute, whatever the
- value of
- the attribute.
- </dd>
- <dt><code>[att=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- exactly
- "val".
- </dd>
- <dt><code>[att~=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- a <a
- href="#whitespace">whitespace</a>-separated list of words, one
- of
- which is exactly "val". If "val" contains whitespace, it will never
- represent anything (since the words are <em>separated</em> by
- spaces).
- </dd>
- <dt><code>[att|=val]</code>
- <dd>Represents an element with the <code>att</code> attribute, its value
- either
- being exactly "val" or beginning with "val" immediately followed by
- "-" (U+002D). This is primarily intended to allow language subcode
- matches (e.g., the <code>hreflang</code> attribute on the
- <code>link</code> element in HTML) as described in RFC 3066 (<a
- href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or
- <code>xml:lang</code>) language subcode matching, please see <a
- href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names and values in selectors depends on
- the document language.</p>
-
-<div class="example">
-
- <p>Examples:</p>
-
- <p>The following attribute selector represents an <code>h1</code>
- element that carries the <code>title</code> attribute, whatever its
- value:</p>
-
- <pre>h1[title]</pre>
-
- <p>In the following example, the selector represents a
- <code>span</code> element whose <code>class</code> attribute has
- exactly the value "example":</p>
-
- <pre>span[class="example"]</pre>
-
- <p>Multiple attribute selectors can be used to represent several
- attributes of an element, or several conditions on the same
- attribute. Here, the selector represents a <code>span</code> element
- whose <code>hello</code> attribute has exactly the value "Cleveland"
- and whose <code>goodbye</code> attribute has exactly the value
- "Columbus":</p>
-
- <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
-
- <p>The following selectors illustrate the differences between "="
- and "~=". The first selector will represent, for example, the value
- "copyright copyleft copyeditor" on a <code>rel</code> attribute. The
- second selector will only represent an <code>a</code> element with
- an <code>href</code> attribute having the exact value
- "http://www.w3.org/".</p>
-
- <pre>a[rel~="copyright"]
-a[href="http://www.w3.org/"]</pre>
-
- <p>The following selector represents a <code>link</code> element
- whose <code>hreflang</code> attribute is exactly "fr".</p>
-
- <pre>link[hreflang=fr]</pre>
-
- <p>The following selector represents a <code>link</code> element for
- which the values of the <code>hreflang</code> attribute begins with
- "en", including "en", "en-US", and "en-cockney":</p>
-
- <pre>link[hreflang|="en"]</pre>
-
- <p>Similarly, the following selectors represents a
- <code>DIALOGUE</code> element whenever it has one of two different
- values for an attribute <code>character</code>:</p>
-
- <pre>DIALOGUE[character=romeo]
-DIALOGUE[character=juliet]</pre>
-
-</div>
-
-<h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute
- selectors</h4>
-
-<p>Three additional attribute selectors are provided for matching
- substrings in the value of an attribute:</p>
-
-<dl>
- <dt><code>[att^=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value
- begins
- with the prefix "val".
- </dd>
- <dt><code>[att$=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- ends with
- the suffix "val".
- </dd>
- <dt><code>[att*=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- contains
- at least one instance of the substring "val".
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names in selectors depends on the
- document language.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents an HTML <code>object</code>,
- referencing an
- image:</p>
- <pre>object[type^="image/"]</pre>
- <p>The following selector represents an HTML anchor <code>a</code> with an
- <code>href</code> attribute whose value ends with ".html".</p>
- <pre>a[href$=".html"]</pre>
- <p>The following selector represents an HTML paragraph with a
- <code>title</code>
- attribute whose value contains the substring "hello"</p>
- <pre>p[title*="hello"]</pre>
-</div>
-
-<h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>
-
-<p>Attribute selectors allow an optional namespace component to the
- attribute name. A namespace prefix that has been previously declared
- may be prepended to the attribute name separated by the namespace
- separator "vertical bar" (<code>|</code>). In keeping with
- the Namespaces in the XML recommendation, default namespaces do not
- apply to attributes, therefore attribute selectors without a namespace
- component apply only to attributes that have no declared namespace
- (equivalent to "<code>|attr</code>"). An asterisk may be used for the
- namespace prefix indicating that the selector is to match all
- attribute names without regard to the attribute's namespace.
-
-<p>An attribute selector with an attribute name containing a namespace
- prefix that has not been previously declared is an <a
- href="#Conformance">invalid</a> selector. The mechanism for
- declaring
- a namespace prefix is left up to the language implementing Selectors.
- In CSS, such a mechanism is defined in the General Syntax module.
-
-<div class="example">
- <p>CSS examples:</p>
- <pre>@namespace foo "http://www.example.com";
-[foo|att=val] { color: blue }
-[*|att] { color: yellow }
-[|att] { color: green }
-[att] { color: green }</pre>
-
- <p>The first rule will match only elements with the attribute
- <code>att</code> in the "http://www.example.com" namespace with the
- value "val".</p>
-
- <p>The second rule will match only elements with the attribute
- <code>att</code> regardless of the namespace of the attribute
- (including no declared namespace).</p>
-
- <p>The last two rules are equivalent and will match only elements
- with the attribute <code>att</code> where the attribute is not
- declared to be in a namespace.</p>
-
-</div>
-
-<h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>
-
-<p>Attribute selectors represent explicitly set attribute values in
- the document tree. Default attribute values may be defined in a DTD or
- elsewhere, but cannot always be selected by attribute
- selectors. Selectors should be designed so that they work even if the
- default values are not included in the document tree.</p>
-
-<p>More precisely, a UA is <em>not</em> required to read an "external
- subset" of the DTD but <em>is</em> required to look for default
- attribute values in the document's "internal subset." (See <a
- href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>
-
-<p>A UA that recognizes an XML namespace <a
- href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its
- knowledge of that namespace to treat default attribute values as if
- they were present in the document. (For example, an XHTML UA is not
- required to use its built-in knowledge of the XHTML DTD.)</p>
-
-<p class="note"><strong>Note:</strong> Typically, implementations
- choose to ignore external subsets.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>Consider an element EXAMPLE with an attribute "notation" that has a
- default value of "decimal". The DTD fragment might be</p>
-
- <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
-
- <p>If the style sheet contains the rules</p>
-
-<pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>the first rule will not match elements whose "notation" attribute
- is set by default, i.e. not set explicitly. To catch all cases, the
- attribute selector for the default value must be dropped:</p>
-
-<pre>EXAMPLE { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is
- more specific than the tag
- selector alone, the style declarations in the second rule will override
- those in the first for elements that have a "notation" attribute value
- of "octal". Care has to be taken that all property declarations that
- are to apply only to the default case are overridden in the non-default
- cases' style rules.</p>
-
-</div>
-
-<h3><a name=class-html>6.4. Class selectors</a></h3>
-
-<p>Working with HTML, authors may use the period (U+002E,
- <code>.</code>) notation as an alternative to the <code>~=</code>
- notation when representing the <code>class</code> attribute. Thus, for
- HTML, <code>div.value</code> and <code>div[class~=value]</code> have
- the same meaning. The attribute value must immediately follow the
- "period" (<code>.</code>).</p>
-
-<p>UAs may apply selectors using the period (.) notation in XML
- documents if the UA has namespace-specific knowledge that allows it to
- determine which attribute is the "class" attribute for the
- respective namespace. One such example of namespace-specific knowledge
- is the prose in the specification for a particular namespace (e.g. SVG
- 1.0 <a href="#refsSVG">[SVG]</a> describes the <a
- href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG
- "class" attribute</a> and how a UA should interpret it, and
- similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a
- href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML
- "class" attribute</a>.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>We can assign style information to all elements with
- <code>class~="pastoral"</code> as follows:</p>
-
- <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>or just</p>
-
- <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>The following assigns style only to H1 elements with
- <code>class~="pastoral"</code>:</p>
-
- <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>
-
- <p>Given these rules, the first H1 instance below would not have
- green text, while the second would:</p>
-
- <pre><H1>Not green</H1>
-<H1 class="pastoral">Very green</H1></pre>
-
-</div>
-
-<p>To represent a subset of "class" values, each value must be preceded
- by a ".", in any order.</P>
-
-<div class="example">
-
- <p>CSS example:</p>
-
- <p>The following rule matches any P element whose "class" attribute
- has been assigned a list of <a
- href="#whitespace">whitespace</a>-separated values that includes
- "pastoral" and "marine":</p>
-
- <pre>p.pastoral.marine { color: green }</pre>
-
- <p>This rule matches when <code>class="pastoral blue aqua
- marine"</code> but does not match for <code>class="pastoral
- blue"</code>.</p>
-
-</div>
-
-<p class="note"><strong>Note:</strong> Because CSS gives considerable
- power to the "class" attribute, authors could conceivably design their
- own "document language" based on elements with almost no associated
- presentation (such as DIV and SPAN in HTML) and assigning style
- information through the "class" attribute. Authors should avoid this
- practice since the structural elements of a document language often
- have recognized and accepted meanings and author-defined classes may
- not.</p>
-
-<p class="note"><strong>Note:</strong> If an element has multiple
- class attributes, their values must be concatenated with spaces
- between the values before searching for the class. As of this time the
- working group is not aware of any manner in which this situation can
- be reached, however, so this behavior is explicitly non-normative in
- this specification.</p>
-
-<h3><a name=id-selectors>6.5. ID selectors</a></h3>
-
-<p>Document languages may contain attributes that are declared to be
- of type ID. What makes attributes of type ID special is that no two
- such attributes can have the same value in a document, regardless of
- the type of the elements that carry them; whatever the document
- language, an ID typed attribute can be used to uniquely identify its
- element. In HTML all ID attributes are named "id"; XML applications
- may name ID attributes differently, but the same restriction
- applies.</p>
-
-<p>An ID-typed attribute of a document language allows authors to
- assign an identifier to one element instance in the document tree. W3C
- ID selectors represent an element instance based on its identifier. An
- ID selector contains a "number sign" (U+0023,
- <code>#</code>) immediately followed by the ID value, which must be an
- identifier.</p>
-
-<p>Selectors does not specify how a UA knows the ID-typed attribute of
- an element. The UA may, e.g., read a document's DTD, have the
- information hard-coded or ask the user.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following ID selector represents an <code>h1</code> element
- whose ID-typed attribute has the value "chapter1":</p>
- <pre>h1#chapter1</pre>
- <p>The following ID selector represents any element whose ID-typed
- attribute has the value "chapter1":</p>
- <pre>#chapter1</pre>
- <p>The following selector represents any element whose ID-typed
- attribute has the value "z98y".</p>
- <pre>*#z98y</pre>
-</div>
-
-<p class="note"><strong>Note.</strong> In XML 1.0 <a
- href="#refsXML10">[XML10]</a>, the information about which attribute
- contains an element's IDs is contained in a DTD or a schema. When
- parsing XML, UAs do not always read the DTD, and thus may not know
- what the ID of an element is (though a UA may have namespace-specific
- knowledge that allows it to determine which attribute is the ID
- attribute for that namespace). If a style sheet designer knows or
- suspects that a UA may not know what the ID of an element is, he
- should use normal attribute selectors instead:
- <code>[name=p371]</code> instead of <code>#p371</code>. Elements in
- XML 1.0 documents without a DTD do not have IDs at all.</p>
-
-<p>If an element has multiple ID attributes, all of them must be
- treated as IDs for that element for the purposes of the ID
- selector. Such a situation could be reached using mixtures of xml:id,
- DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
-
-<h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>
-
-<p>The pseudo-class concept is introduced to permit selection based on
- information that lies outside of the document tree or that cannot be
- expressed using the other simple selectors.</p>
-
-<p>A pseudo-class always consists of a "colon"
- (<code>:</code>) followed by the name of the pseudo-class and
- optionally by a value between parentheses.</p>
-
-<p>Pseudo-classes are allowed in all sequences of simple selectors
- contained in a selector. Pseudo-classes are allowed anywhere in
- sequences of simple selectors, after the leading type selector or
- universal selector (possibly omitted). Pseudo-class names are
- case-insensitive. Some pseudo-classes are mutually exclusive, while
- others can be applied simultaneously to the same
- element. Pseudo-classes may be dynamic, in the sense that an element
- may acquire or lose a pseudo-class while a user interacts with the
- document.</p>
-
-
-<h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>
-
-<p>Dynamic pseudo-classes classify elements on characteristics other
- than their name, attributes, or content, in principle characteristics
- that cannot be deduced from the document tree.</p>
-
-<p>Dynamic pseudo-classes do not appear in the document source or
- document tree.</p>
-
-
-<h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>
-
-<p>User agents commonly display unvisited links differently from
- previously visited ones. Selectors
- provides the pseudo-classes <code>:link</code> and
- <code>:visited</code> to distinguish them:</p>
-
-<ul>
- <li>The <code>:link</code> pseudo-class applies to links that have
- not yet been visited.
- </li>
- <li>The <code>:visited</code> pseudo-class applies once the link has
- been visited by the user.
- </li>
-</ul>
-
-<p>After some amount of time, user agents may choose to return a
- visited link to the (unvisited) ':link' state.</p>
-
-<p>The two states are mutually exclusive.</p>
-
-<div class="example">
-
- <p>Example:</p>
-
- <p>The following selector represents links carrying class
- <code>external</code> and already visited:</p>
-
- <pre>a.external:visited</pre>
-
-</div>
-
-<p class="note"><strong>Note:</strong> It is possible for style sheet
- authors to abuse the :link and :visited pseudo-classes to determine
- which sites a user has visited without the user's consent.
-
-<p>UAs may therefore treat all links as unvisited links, or implement
- other measures to preserve the user's privacy while rendering visited
- and unvisited links differently.</p>
-
-<h5>The <a name=useraction-pseudos>user action pseudo-classes
- :hover, :active, and :focus</a></h5>
-
-<p>Interactive user agents sometimes change the rendering in response
- to user actions. Selectors provides
- three pseudo-classes for the selection of an element the user is
- acting on.</p>
-
-<ul>
-
- <li>The <code>:hover</code> pseudo-class applies while the user
- designates an element with a pointing device, but does not activate
- it. For example, a visual user agent could apply this pseudo-class
- when the cursor (mouse pointer) hovers over a box generated by the
- element. User agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> do not have to support this pseudo-class. Some conforming
- user agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> may not be able to support this pseudo-class (e.g., a pen
- device that does not detect hovering).
- </li>
-
- <li>The <code>:active</code> pseudo-class applies while an element
- is being activated by the user. For example, between the times the
- user presses the mouse button and releases it.
- </li>
-
- <li>The <code>:focus</code> pseudo-class applies while an element
- has the focus (accepts keyboard or mouse events, or other forms of
- input).
- </li>
-
-</ul>
-
-<p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.</p>
-
-<p>These pseudo-classes are not mutually exclusive. An element may
- match several pseudo-classes at the same time.</p>
-
-<p>Selectors doesn't define if the parent of an element that is
- ':active' or ':hover' is also in that state.</p>
-
-<div class="example">
- <p>Examples:</p>
- <pre>a:link /* unvisited links */
-a:visited /* visited links */
-a:hover /* user hovers */
-a:active /* active links */</pre>
- <p>An example of combining dynamic pseudo-classes:</p>
- <pre>a:focus
-a:focus:hover</pre>
- <p>The last selector matches <code>a</code> elements that are in
- the pseudo-class :focus and in the pseudo-class :hover.</p>
-</div>
-
-<p class="note"><strong>Note:</strong> An element can be both ':visited'
- and ':active' (or ':link' and ':active').</p>
-
-<h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>
-
-<p>Some URIs refer to a location within a resource. This kind of URI
- ends with a "number sign" (#) followed by an anchor
- identifier (called the fragment identifier).</p>
-
-<p>URIs with fragment identifiers link to a certain element within the
- document, known as the target element. For instance, here is a URI
- pointing to an anchor named <code>section_2</code> in an HTML
- document:</p>
-
-<pre>http://example.com/html/top.html#section_2</pre>
-
-<p>A target element can be represented by the <code>:target</code>
- pseudo-class. If the document's URI has no fragment identifier, then
- the document has no target element.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>p.note:target</pre>
- <p>This selector represents a <code>p</code> element of class
- <code>note</code> that is the target element of the referring
- URI.</p>
-</div>
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>Here, the <code>:target</code> pseudo-class is used to make the
- target element red and place an image before it, if there is one:</p>
- <pre>*:target { color : red }
-*:target::before { content : url(target.png) }</pre>
-</div>
-
-<h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>
-
-<p>If the document language specifies how the human language of an
- element is determined, it is possible to write selectors that
- represent an element based on its language. For example, in HTML <a
- href="#refsHTML4">[HTML4]</a>, the language is determined by a
- combination of the <code>lang</code> attribute, the <code>meta</code>
- element, and possibly by information from the protocol (such as HTTP
- headers). XML uses an attribute called <code>xml:lang</code>, and
- there may be other document language-specific methods for determining
- the language.</p>
-
-<p>The pseudo-class <code>:lang(C)</code> represents an element that
- is in language C. Whether an element is represented by a
- <code>:lang()</code> selector is based solely on the identifier C
- being either equal to, or a hyphen-separated substring of, the
- element's language value, in the same way as if performed by the <a
- href="#attribute-representation">'|='</a> operator in attribute
- selectors. The identifier C does not have to be a valid language
- name.</p>
-
-<p>C must not be empty. (If it is, the selector is invalid.)</p>
-
-<p class="note"><strong>Note:</strong> It is recommended that
- documents and protocols indicate language using codes from RFC 3066 <a
- href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of
- "xml:lang" attributes in the case of XML-based documents <a
- href="#refsXML10">[XML10]</a>. See <a
- href="http://www.w3.org/International/questions/qa-lang-2or3.html">
- "FAQ: Two-letter or three-letter language codes."</a></p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The two following selectors represent an HTML document that is in
- Belgian, French, or German. The two next selectors represent
- <code>q</code> quotations in an arbitrary element in Belgian, French,
- or German.</p>
- <pre>html:lang(fr-be)
-html:lang(de)
-:lang(fr-be) > q
-:lang(de) > q</pre>
-</div>
-
-<h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>
-
-<h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>
-
-<p>The <code>:enabled</code> pseudo-class allows authors to customize
- the look of user interface elements that are enabled — which the
- user can select or activate in some fashion (e.g. clicking on a button
- with a mouse). There is a need for such a pseudo-class because there
- is no way to programmatically specify the default appearance of say,
- an enabled <code>input</code> element without also specifying what it
- would look like when it was disabled.</p>
-
-<p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the
- author to specify precisely how a disabled or inactive user interface
- element should look.</p>
-
-<p>Most elements will be neither enabled nor disabled. An element is
- enabled if the user can either activate it or transfer the focus to
- it. An element is disabled if it could be enabled, but the user cannot
- presently activate it or transfer focus to it.</p>
-
-
-<h5><a name=checked>The :checked pseudo-class</a></h5>
-
-<p>Radio and checkbox elements can be toggled by the user. Some menu
- items are "checked" when the user selects them. When such elements are
- toggled "on" the <code>:checked</code> pseudo-class applies. The
- <code>:checked</code> pseudo-class initially applies to such elements
- that have the HTML4 <code>selected</code> and <code>checked</code>
- attributes as described in <a
- href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section
- 17.2.1 of HTML4</a>, but of course the user can toggle "off" such
- elements in which case the <code>:checked</code> pseudo-class would no
- longer apply. While the <code>:checked</code> pseudo-class is dynamic
- in nature, and is altered by user action, since it can also be based
- on the presence of the semantic HTML4 <code>selected</code> and
- <code>checked</code> attributes, it applies to all media.
-
-
-<h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>
-
-<div class="note">
-
- <p>Radio and checkbox elements can be toggled by the user, but are
- sometimes in an indeterminate state, neither checked nor unchecked.
- This can be due to an element attribute, or DOM manipulation.</p>
-
- <p>A future version of this specification may introduce an
- <code>:indeterminate</code> pseudo-class that applies to such elements.
- <!--While the <code>:indeterminate</code> pseudo-class is dynamic in
- nature, and is altered by user action, since it can also be based on
- the presence of an element attribute, it applies to all media.</p>
-
- <p>Components of a radio-group initialized with no pre-selected choice
- are an example of :indeterminate state.--></p>
-
-</div>
-
-
-<h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>
-
-<p>Selectors introduces the concept of <dfn>structural
- pseudo-classes</dfn> to permit selection based on extra information that
- lies in
- the document tree but cannot be represented by other simple selectors or
- combinators.
-
-<p>Note that standalone pieces of PCDATA (text nodes in the DOM) are
- not counted when calculating the position of an element in the list of
- children of its parent. When calculating the position of an element in
- the list of children of its parent, the index numbering starts at 1.
-
-
-<h5><a name=root-pseudo>:root pseudo-class</a></h5>
-
-<p>The <code>:root</code> pseudo-class represents an element that is
- the root of the document. In HTML 4, this is always the
- <code>HTML</code> element.
-
-
-<h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>
-
-<p>The
- <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>before</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. In
- other words, this matches the <var>b</var>th child of an element after
- all the children have been split into groups of <var>a</var> elements
- each. For example, this allows the selectors to address every other
- row in a table, and could be used to alternate the color
- of paragraph text in a cycle of four. The <var>a</var> and
- <var>b</var> values must be zero, negative integers or positive
- integers. The index of the first child of an element is 1.
-
-<p>In addition to this, <code>:nth-child()</code> can take
- '<code>odd</code>' and '<code>even</code>' as arguments instead.
- '<code>odd</code>' has the same signification as <code>2n+1</code>,
- and '<code>even</code>' has the same signification as <code>2n</code>.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
-tr:nth-child(odd) /* same */
-tr:nth-child(2n) /* represents every even row of an HTML table */
-tr:nth-child(even) /* same */
-
-/* Alternate paragraph colours in CSS */
-p:nth-child(4n+1) { color: navy; }
-p:nth-child(4n+2) { color: green; }
-p:nth-child(4n+3) { color: maroon; }
-p:nth-child(4n+4) { color: purple; }</pre>
-</div>
-
-<p>When <var>a</var>=0, no repeating is used, so for example
- <code>:nth-child(0n+5)</code> matches only the fifth child. When
- <var>a</var>=0, the <var>a</var><code>n</code> part need not be
- included, so the syntax simplifies to
- <code>:nth-child(<var>b</var>)</code> and the last example simplifies
- to <code>:nth-child(5)</code>.
-
-<div class="example">
- <p>Examples:</p>
-<pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */
-foo:nth-child(1) /* same */</pre>
-</div>
-
-<p>When <var>a</var>=1, the number may be omitted from the rule.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selectors are therefore equivalent:</p>
-<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
-bar:nth-child(n+0) /* same */
-bar:nth-child(n) /* same */
-bar /* same but lower specificity (0,0,1) */</pre>
-</div>
-
-<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In
- such a case, the <var>b</var> part may be omitted.
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
-tr:nth-child(2n) /* same */</pre>
-</div>
-
-<p>If both <var>a</var> and <var>b</var> are equal to zero, the
- pseudo-class represents no element in the document tree.</p>
-
-<p>The value <var>a</var> can be negative, but only the positive
- values of <var>a</var><code>n</code>+<var>b</var>, for
- <code>n</code>≥0, may represent an element in the document
- tree.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
-</div>
-
-<p>When the value <var>b</var> is negative, the "+" character in the
- expression must be removed (it is effectively replaced by the "-"
- character indicating the negative value of <var>b</var>).</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>: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 */</pre>
-</div>
-
-
-<h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>after</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. See
- <code>:nth-child()</code> pseudo-class for the syntax of its argument.
- It also accepts the '<code>even</code>' and '<code>odd</code>' values
- as arguments.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
-
-foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
- counting from the last one */</pre>
-</div>
-
-
-<h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>before</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. In other words, this matches the <var>b</var>th child
- of that type after all the children of that type have been split into
- groups of a elements each. See <code>:nth-child()</code> pseudo-class
- for the syntax of its argument. It also accepts the
- '<code>even</code>' and '<code>odd</code>' values.
-
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>This allows an author to alternate the position of floated images:</p>
-<pre>img:nth-of-type(2n+1) { float: right; }
-img:nth-of-type(2n) { float: left; }</pre>
-</div>
-
-
-<h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>after</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. See <code>:nth-child()</code> pseudo-class for the
- syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>'
- values.
-
-
-<div class="example">
- <p>Example:</p>
-
- <p>To represent all <code>h2</code> children of an XHTML
- <code>body</code> except the first and last, one could use the
- following selector:</p>
- <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
- <p>In this case, one could also use <code>:not()</code>, although the
- selector ends up being just as long:</p>
- <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
-</div>
-
-
-<h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
- pseudo-class
- represents an element that is the first child of some other element.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- the first child of a <code>div</code> element:</p>
- <pre>div > p:first-child</pre>
- <p>This selector can represent the <code>p</code> inside the
- <code>div</code> of the following fragment:</p>
- <pre><p> The last P before the note.</p>
-<div class="note">
- <p> The first P inside the note.</p>
-</div></pre>
- but cannot represent the second <code>p</code> in the following
- fragment:
- <pre><p> The last P before the note.</p>
-<div class="note">
- <h2> Note </h2>
- <p> The first P inside the note.</p>
-</div></pre>
- <p>The following two selectors are usually equivalent:</p>
- <pre>* > a:first-child /* a is first child of any element */
-a:first-child /* Same (assuming a is not the root element) */</pre>
-</div>
-
-<h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
- pseudo-class
- represents an element that is the last child of some other element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a list item <code>li</code> that
- is the last child of an ordered list <code>ol</code>.
- <pre>ol > li:last-child</pre>
-</div>
-
-<h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
- pseudo-class
- represents an element that is the first sibling of its type in the list of
- children of its parent element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a definition title
- <code>dt</code> inside a definition list <code>dl</code>, this
- <code>dt</code> being the first of its type in the list of children of
- its parent element.</p>
- <pre>dl dt:first-of-type</pre>
- <p>It is a valid description for the first two <code>dt</code>
- elements in the following example but not for the third one:</p>
-<pre><dl>
- <dt>gigogne</dt>
- <dd>
- <dl>
- <dt>fusée</dt>
- <dd>multistage rocket</dd>
- <dt>table</dt>
- <dd>nest of tables</dd>
- </dl>
- </dd>
-</dl></pre>
-</div>
-
-<h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-of-type(1)</code>. The
- <code>:last-of-type</code> pseudo-class represents an element that is
- the last sibling of its type in the list of children of its parent
- element.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents the last data cell
- <code>td</code> of a table row.</p>
- <pre>tr > td:last-of-type</pre>
-</div>
-
-<h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children. Same as
- <code>:first-child:last-child</code> or
- <code>:nth-child(1):nth-last-child(1)</code>, but with a lower
- specificity.</p>
-
-<h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children with the same element name. Same
- as <code>:first-of-type:last-of-type</code> or
- <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
- specificity.</p>
-
-
-<h5><a name=empty-pseudo></a>:empty pseudo-class</h5>
-
-<p>The <code>:empty</code> pseudo-class represents an element that has
- no children at all. In terms of the DOM, only element nodes and text
- nodes (including CDATA nodes and entity references) whose data has a
- non-zero length must be considered as affecting emptiness; comments,
- PIs, and other nodes must not affect whether an element is considered
- empty or not.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p><code>p:empty</code> is a valid representation of the following fragment:
- </p>
- <pre><p></p></pre>
- <p><code>foo:empty</code> is not a valid representation for the
- following fragments:</p>
- <pre><foo>bar</foo></pre>
- <pre><foo><bar>bla</bar></foo></pre>
- <pre><foo>this is not <bar>:empty</bar></foo></pre>
-</div>
-
-<h4><a name=content-selectors>6.6.6. Blank</a></h4>
-<!-- It's the Return of Appendix H!!! Run away! -->
-
-<p>This section intentionally left blank.</p>
-<!-- (used to be :contains()) -->
-
-<h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>
-
-<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
- functional notation taking a <a href="#simple-selectors-dfn">simple
- selector</a> (excluding the negation pseudo-class itself and
- pseudo-elements) as an argument. It represents an element that is not
- represented by the argument.
-
- <!-- pseudo-elements are not simple selectors, so the above paragraph
-may be a bit confusing -->
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following CSS selector matches all <code>button</code>
- elements in an HTML document that are not disabled.</p>
- <pre>button:not([DISABLED])</pre>
- <p>The following selector represents all but <code>FOO</code>
- elements.</p>
- <pre>*:not(FOO)</pre>
- <p>The following group of selectors represents all HTML elements
- except links.</p>
- <pre>html|*:not(:link):not(:visited)</pre>
-</div>
-
-<p>Default namespace declarations do not affect the argument of the
- negation pseudo-class unless the argument is a universal selector or a
- type selector.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>Assuming that the default namespace is bound to
- "http://example.com/", the following selector represents all
- elements that are not in that namespace:</p>
- <pre>*|*:not(*)</pre>
- <p>The following CSS selector matches any element being hovered,
- regardless of its namespace. In particular, it is not limited to
- only matching elements in the default namespace that are not being
- hovered, and elements not in the default namespace don't match the
- rule when they <em>are</em> being hovered.</p>
- <pre>*|*:not(:hover)</pre>
-</div>
-
-<p class="note"><strong>Note</strong>: the :not() pseudo allows
- useless selectors to be written. For instance <code>:not(*|*)</code>,
- which represents no element at all, or <code>foo:not(bar)</code>,
- which is equivalent to <code>foo</code> but with a higher
- specificity.</p>
-
-<h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>
-
-<p>Pseudo-elements create abstractions about the document tree beyond
- those specified by the document language. For instance, document
- languages do not offer mechanisms to access the first letter or first
- line of an element's content. Pseudo-elements allow designers to refer
- to this otherwise inaccessible information. Pseudo-elements may also
- provide designers a way to refer to content that does not exist in the
- source document (e.g., the <code>::before</code> and
- <code>::after</code> pseudo-elements give access to generated
- content).</p>
-
-<p>A pseudo-element is made of two colons (<code>::</code>) followed
- by the name of the pseudo-element.</p>
-
-<p>This <code>::</code> notation is introduced by the current document
- in order to establish a discrimination between pseudo-classes and
- pseudo-elements. For compatibility with existing style sheets, user
- agents must also accept the previous one-colon notation for
- pseudo-elements introduced in CSS levels 1 and 2 (namely,
- <code>:first-line</code>, <code>:first-letter</code>,
- <code>:before</code> and <code>:after</code>). This compatibility is
- not allowed for the new pseudo-elements introduced in CSS level 3.</p>
-
-<p>Only one pseudo-element may appear per selector, and if present it
- must appear after the sequence of simple selectors that represents the
- <a href="#subject">subjects</a> of the selector. <span class="note">A
-future version of this specification may allow multiple
-pesudo-elements per selector.</span></p>
-
-<h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>
-
-<p>The <code>::first-line</code> pseudo-element describes the contents
- of the first formatted line of an element.
-
-<div class="example">
- <p>CSS example:</p>
- <pre>p::first-line { text-transform: uppercase }</pre>
- <p>The above rule means "change the letters of the first line of every
- paragraph to uppercase".</p>
-</div>
-
-<p>The selector <code>p::first-line</code> does not match any real
- HTML element. It does match a pseudo-element that conforming user
- agents will insert at the beginning of every paragraph.</p>
-
-<p>Note that the length of the first line depends on a number of
- factors, including the width of the page, the font size, etc. Thus,
- an ordinary HTML paragraph such as:</p>
-
-<pre>
-<P>This is a somewhat long HTML
-paragraph that will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the lines of which happen to be broken as follows:
-
-<pre>
-THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
-will be broken into several lines. The first
-line will be identified by a fictional tag
-sequence. The other lines will be treated as
-ordinary lines in the paragraph.
-</pre>
-
-<p>This paragraph might be "rewritten" by user agents to include the
- <em>fictional tag sequence</em> for <code>::first-line</code>. This
- fictional tag sequence helps to show how properties are inherited.</p>
-
-<pre>
-<P><b><P::first-line></b> This is a somewhat long HTML
-paragraph that <b></P::first-line></b> will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>If a pseudo-element breaks up a real element, the desired effect
- can often be described by a fictional tag sequence that closes and
- then re-opens the element. Thus, if we mark up the previous paragraph
- with a <code>span</code> element:</p>
-
-<pre>
-<P><b><SPAN class="test"></b> This is a somewhat long HTML
-paragraph that will be broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the user agent could simulate start and end tags for
- <code>span</code> when inserting the fictional tag sequence for
- <code>::first-line</code>.
-
-<pre>
-<P><P::first-line><b><SPAN class="test"></b> This is a
-somewhat long HTML
-paragraph that will <b></SPAN></b></P::first-line><b><SPAN
- class="test"></b> be
-broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>In CSS, the <code>::first-line</code> pseudo-element can only be
- attached to a block-level element, an inline-block, a table-caption,
- or a table-cell.</p>
-
-<p><a name="first-formatted-line"></a>The "first formatted line" of an
- element may occur inside a
- block-level descendant in the same flow (i.e., a block-level
- descendant that is not positioned and not a float). E.g., the first
- line of the <code>div</code> in <code><DIV><P>This
- line...</P></DIV></code> is the first line of the <code>p</code>
- (assuming
- that both <code>p</code> and <code>div</code> are block-level).
-
-<p>The first line of a table-cell or inline-block cannot be the first
- formatted line of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first formatted line of the
- <code>div</code> is not the line "Hello".
-
-<p class="note">Note that the first line of the <code>p</code> in this
- fragment: <code><p><br>First...</code> doesn't contain any
- letters (assuming the default style for <code>br</code> in HTML
- 4). The word "First" is not on the first formatted line.
-
-<p>A UA should act as if the fictional start tags of the
- <code>::first-line</code> pseudo-elements were nested just inside the
- innermost enclosing block-level element. (Since CSS1 and CSS2 were
- silent on this case, authors should not rely on this behavior.) Here
- is an example. The fictional tag sequence for</p>
-
-<pre>
-<DIV>
- <P>First paragraph</P>
- <P>Second paragraph</P>
-</DIV>
-</pre>
-
-<p>is</p>
-
-<pre>
-<DIV>
- <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
- <P><P::first-line>Second paragraph</P::first-line></P>
-</DIV>
-</pre>
-
-<p>The <code>::first-line</code> pseudo-element is similar to an
- inline-level element, but with certain restrictions. In CSS, the
- following properties apply to a <code>::first-line</code>
- pseudo-element: font properties, color property, background
- properties, 'word-spacing', 'letter-spacing', 'text-decoration',
- 'vertical-align', 'text-transform', 'line-height'. UAs may apply other
- properties as well.</p>
-
-
-<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
-
-<p>The <code>::first-letter</code> pseudo-element represents the first
- letter of the first line of a block, if it is not preceded by any
- other content (such as images or inline tables) on its line. The
- ::first-letter pseudo-element may be used for "initial caps" and "drop
- caps", which are common typographical effects. This type of initial
- letter is similar to an inline-level element if its 'float' property
- is 'none'; otherwise, it is similar to a floated element.</p>
-
-<p>In CSS, these are the properties that apply to <code>::first-letter</code>
- pseudo-elements: font properties, 'text-decoration', 'text-transform',
- 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
- 'float', 'vertical-align' (only if 'float' is 'none'), margin
- properties, padding properties, border properties, color property,
- background properties. UAs may apply other properties as well. To
- allow UAs to render a typographically correct drop cap or initial cap,
- the UA may choose a line-height, width and height based on the shape
- of the letter, unlike for normal elements.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>This example shows a possible rendering of an initial cap. Note
- that the 'line-height' that is inherited by the
- <code>::first-letter</code>
- pseudo-element is 1.1, but the UA in this example has computed the
- height of the first letter differently, so that it doesn't cause any
- unnecessary space between the first two lines. Also note that the
- fictional start tag of the first letter is inside the <span>span</span>,
- and thus
- the font weight of the first letter is normal, not bold as the <span>span</span>:
-<pre>
-p { line-height: 1.1 }
-p::first-letter { font-size: 3em; font-weight: normal }
-span { font-weight: bold }
-...
-<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
-Erbarremt over my en mijn benaeuwde vesten<br>
-En arme burgery, en op mijn volcx gebed<br>
-En dagelix geschrey de bange stad ontzet.
-</pre>
- <div class="figure">
- <p><img src="initial-cap.png"
- alt="Image illustrating the ::first-letter pseudo-element">
- </div>
-</div>
-
-<div class="example">
- <p>The following CSS will make a drop cap initial letter span about two
- lines:</p>
-
-<pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<HTML>
- <HEAD>
- <TITLE>Drop cap initial letter</TITLE>
- <STYLE type="text/css">
- P { font-size: 12pt; line-height: 1.2 }
- P::first-letter { font-size: 200%; font-weight: bold; float: left }
- SPAN { text-transform: uppercase }
- </STYLE>
- </HEAD>
- <BODY>
- <P><SPAN>The first</SPAN> few words of an article
- in The Economist.</P>
- </BODY>
-</HTML>
-</pre>
-
- <p>This example might be formatted as follows:</p>
-
- <div class="figure">
- <P><img src="first-letter.gif"
- alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements">
- </p>
- </div>
-
- <p>The <span class="index-inst" title="fictional tag
-sequence">fictional tag sequence</span> is:</p>
-
-<pre>
-<P>
-<SPAN>
-<P::first-letter>
-T
-</P::first-letter>he first
-</SPAN>
-few words of an article in the Economist.
-</P>
-</pre>
-
- <p>Note that the <code>::first-letter</code> pseudo-element tags abut
- the content (i.e., the initial character), while the ::first-line
- pseudo-element start tag is inserted right after the start tag of the
- block element.</p></div>
-
-<p>In order to achieve traditional drop caps formatting, user agents
- may approximate font sizes, for example to align baselines. Also, the
- glyph outline may be taken into account when formatting.</p>
-
-<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
- "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
- punctuation classes), that precedes or follows the first letter should
- be included. <a href="#refsUNICODE">[UNICODE]</a></p>
-
-<div class="figure">
- <P><img src="first-letter2.gif" alt="Quotes that precede the
-first letter should be included."></p>
-</div>
-
-<p>The <code>::first-letter</code> also applies if the first letter is
- in fact a digit, e.g., the "6" in "67 million dollars is a lot of
- money."</p>
-
-<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
- block, list-item, table-cell, table-caption, and inline-block
- elements. <span class="note">A future version of this specification
-may allow this pesudo-element to apply to more element
-types.</span></p>
-
-<p>The <code>::first-letter</code> pseudo-element can be used with all
- such elements that contain text, or that have a descendant in the same
- flow that contains text. A UA should act as if the fictional start tag
- of the ::first-letter pseudo-element is just before the first text of
- the element, even if that first text is in a descendant.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The fictional tag sequence for this HTMLfragment:
-<pre><div>
-<p>The first text.</pre>
- <p>is:
-<pre><div>
-<p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>
-</div>
-
-<p>The first letter of a table-cell or inline-block cannot be the
- first letter of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first letter of the <code>div</code> is
- not the
- letter "H". In fact, the <code>div</code> doesn't have a first letter.
-
-<p>The first letter must occur on the <a
- href="#first-formatted-line">first formatted line.</a> For example, in
- this fragment: <code><p><br>First...</code> the first line
- doesn't contain any letters and <code>::first-letter</code> doesn't
- match anything (assuming the default style for <code>br</code> in HTML
- 4). In particular, it does not match the "F" of "First."
-
-<p>In CSS, if an element is a list item ('display: list-item'), the
- <code>::first-letter</code> applies to the first letter in the
- principal box after the marker. UAs may ignore
- <code>::first-letter</code> on list items with 'list-style-position:
- inside'. If an element has <code>::before</code> or
- <code>::after</code> content, the <code>::first-letter</code> applies
- to the first letter of the element <em>including</em> that content.
-
-<div class="example">
- <p>Example:</p>
-
- <p>After the rule 'p::before {content: "Note: "}', the selector
- 'p::first-letter' matches the "N" of "Note".</p>
-</div>
-
-<p>Some languages may have specific rules about how to treat certain
- letter combinations. In Dutch, for example, if the letter combination
- "ij" appears at the beginning of a word, both letters should be
- considered within the <code>::first-letter</code> pseudo-element.
-
-<p>If the letters that would form the ::first-letter are not in the
- same element, such as "'T" in <code><p>'<em>T...</code>, the UA
- may create a ::first-letter pseudo-element from one of the elements,
- both elements, or simply not create a pseudo-element.</p>
-
-<p>Similarly, if the first letter(s) of the block are not at the start
- of the line (for example due to bidirectional reordering), then the UA
- need not create the pseudo-element(s).
-
-<div class="example">
- <p>Example:</p>
-
- <p><a name="overlapping-example">The following example</a> illustrates
- how overlapping pseudo-elements may interact. The first letter of
- each P element will be green with a font size of '24pt'. The rest of
- the first formatted line will be 'blue' while the rest of the
- paragraph will be 'red'.</p>
-
-<pre>p { color: red; font-size: 12pt }
-p::first-letter { color: green; font-size: 200% }
-p::first-line { color: blue }
-
-<P>Some text that ends up on two lines</P></pre>
-
- <p>Assuming that a line break will occur before the word "ends", the
-<span class="index-inst" title="fictional tag sequence">fictional tag
-sequence</span> for this fragment might be:</p>
-
-<pre><P>
-<P::first-line>
-<P::first-letter>
-S
-</P::first-letter>ome text that
-</P::first-line>
-ends up on two lines
-</P></pre>
-
- <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
- element. Properties set on <code>::first-line</code> are inherited by
- <code>::first-letter</code>, but are overridden if the same property is
- set on
- <code>::first-letter</code>.</p>
-</div>
-
-
-<h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection
- pseudo-element</a></h4>
-
-<p>The <code>::selection</code> pseudo-element applies to the portion
- of a document that has been highlighted by the user. This also
- applies, for example, to selected text within an editable text
- field. This pseudo-element should not be confused with the <code><a
- href="#checked">:checked</a></code> pseudo-class (which used to be
- named <code>:selected</code>)
-
-<p>Although the <code>::selection</code> pseudo-element is dynamic in
- nature, and is altered by user action, it is reasonable to expect that
- when a UA re-renders to a static medium (such as a printed page, see
- <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a
- dynamic medium (like screen), the UA may wish to transfer the current
- <code>::selection</code> state to that other medium, and have all the
- appropriate formatting and rendering take effect as well. This is not
- required — UAs may omit the <code>::selection</code>
- pseudo-element for static media.
-
-<p>These are the CSS properties that apply to <code>::selection</code>
- pseudo-elements: color, background, cursor (optional), outline
- (optional). The computed value of the 'background-image' property on
- <code>::selection</code> may be ignored.
-
-
-<h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>
-
-<p>The <code>::before</code> and <code>::after</code> pseudo-elements
- can be used to describe generated content before or after an element's
- content. They are explained in CSS 2.1 <a
- href="#refsCSS21">[CSS21]</a>.</p>
-
-<p>When the <code>::first-letter</code> and <code>::first-line</code>
- pseudo-elements are combined with <code>::before</code> and
- <code>::after</code>, they apply to the first letter or line of the
- element including the inserted text.</p>
-
-<h2><a name=combinators>8. Combinators</a></h2>
-
-<h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>
-
-<p>At times, authors may want selectors to describe an element that is
- the descendant of another element in the document tree (e.g., "an
- <code>EM</code> element that is contained within an <code>H1</code>
- element"). Descendant combinators express such a relationship. A
- descendant combinator is <a href="#whitespace">white space</a> that
- separates two sequences of simple selectors. A selector of the form
- "<code>A B</code>" represents an element <code>B</code> that is an
- arbitrary descendant of some ancestor element <code>A</code>.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>For example, consider the following selector:</p>
- <pre>h1 em</pre>
- <p>It represents an <code>em</code> element being the descendant of
- an <code>h1</code> element. It is a correct and valid, but partial,
- description of the following fragment:</p>
- <pre><h1>This <span class="myclass">headline
-is <em>very</em> important</span></h1></pre>
- <p>The following selector:</p>
- <pre>div * p</pre>
- <p>represents a <code>p</code> element that is a grandchild or later
- descendant of a <code>div</code> element. Note the whitespace on
- either side of the "*" is not part of the universal selector; the
- whitespace is a combinator indicating that the DIV must be the
- ancestor of some element, and that that element must be an ancestor
- of the P.</p>
-
- <p>The following selector, which combines descendant combinators and
- <a href="#attribute-selectors">attribute selectors</a>, represents an
- element that (1) has the <code>href</code> attribute set and (2) is
- inside a <code>p</code> that is itself inside a <code>div</code>:</p>
- <pre>div p *[href]</pre>
-</div>
-
-<h3><a name=child-combinators>8.2. Child combinators</a></h3>
-
-<p>A <dfn>child combinator</dfn> describes a childhood relationship
- between two elements. A child combinator is made of the
- "greater-than sign" (<code>></code>) character and
- separates two sequences of simple selectors.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- child of <code>body</code>:</p>
- <pre>body > p</pre>
- <p>The following example combines descendant combinators and child
- combinators.</p>
- <pre>div ol>li p</pre>
- <!-- LEAVE THOSE SPACES OUT! see below -->
- <p>It represents a <code>p</code> element that is a descendant of an
- <code>li</code> element; the <code>li</code> element must be the
- child of an <code>ol</code> element; the <code>ol</code> element must
- be a descendant of a <code>div</code>. Notice that the optional white
- space around the ">" combinator has been left out.</p>
-</div>
-
-<p>For information on selecting the first child of an element, please
- see the section on the <code><a
- href="#structural-pseudos">:first-child</a></code> pseudo-class
- above.</p>
-
-<h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>
-
-<p>There are two different sibling combinators: the adjacent sibling
- combinator and the general sibling combinator. In both cases,
- non-element nodes (e.g. text between elements) are ignored when
- considering adjacency of elements.</p>
-
-<h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>
-</h4>
-
-<p>The adjacent sibling combinator is made of the "plus
- sign" (U+002B, <code>+</code>) character that separates two
- sequences of simple selectors. The elements represented by the two
- sequences share the same parent in the document tree and the element
- represented by the first sequence immediately precedes the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element
- immediately following a <code>math</code> element:</p>
- <pre>math + p</pre>
- <p>The following selector is conceptually similar to the one in the
- previous example, except that it adds an attribute selector — it
- adds a constraint to the <code>h1</code> element, that it must have
- <code>class="opener"</code>:</p>
- <pre>h1.opener + h2</pre>
-</div>
-
-
-<h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a>
-</h4>
-
-<p>The general sibling combinator is made of the "tilde"
- (U+007E, <code>~</code>) character that separates two sequences of
- simple selectors. The elements represented by the two sequences share
- the same parent in the document tree and the element represented by
- the first sequence precedes (not necessarily immediately) the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>h1 ~ pre</pre>
- <p>represents a <code>pre</code> element following an <code>h1</code>. It
- is a correct and valid, but partial, description of:</p>
- <pre><h1>Definition of the function a</h1>
-<p>Function a(x) has to be applied to all figures in the table.</p>
-<pre>function a(x) = 12x/13.5</pre></pre>
-</div>
-
-<h2><a name=specificity>9. Calculating a selector's specificity</a></h2>
-
-<p>A selector's specificity is calculated as follows:</p>
-
-<ul>
- <li>count the number of ID selectors in the selector (= a)</li>
- <li>count the number of class selectors, attributes selectors, and
- pseudo-classes in the selector (= b)
- </li>
- <li>count the number of element names in the selector (= c)</li>
- <li>ignore pseudo-elements</li>
-</ul>
-
-<p>Selectors inside <a href="#negation">the negation pseudo-class</a>
- are counted like any other, but the negation itself does not count as
- a pseudo-class.</p>
-
-<p>Concatenating the three numbers a-b-c (in a number system with a
- large base) gives the specificity.</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>* /* a=0 b=0 c=0 -> specificity = 0 */
-LI /* a=0 b=0 c=1 -> specificity = 1 */
-UL LI /* a=0 b=0 c=2 -> specificity = 2 */
-UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
-H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
-UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
-LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
-#x34y /* a=1 b=0 c=0 -> specificity = 100 */
-#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
-</pre>
-</div>
-
-<p class="note"><strong>Note:</strong> the specificity of the styles
- specified in an HTML <code>style</code> attribute is described in CSS
- 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>
-
-<h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>
-
-<h3><a name=grammar>10.1. Grammar</a></h3>
-
-<p>The grammar below defines the syntax of Selectors. It is globally
- LL(1) and can be locally LL(2) (but note that most UA's should not use
- it directly, since it doesn't express the parsing conventions). The
- format of the productions is optimized for human consumption and some
- shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)
- are used:</p>
-
-<ul>
- <li><b>*</b>: 0 or more
- <li><b>+</b>: 1 or more
- <li><b>?</b>: 0 or 1
- <li><b>|</b>: separates alternatives
- <li><b>[ ]</b>: grouping</li>
-</ul>
-
-<p>The productions are:</p>
-
-<pre>selectors_group
- : selector [ COMMA S* selector ]*
- ;
-
-selector
- : simple_selector_sequence [ combinator simple_selector_sequence ]*
- ;
-
-combinator
- /* combinators can be surrounded by white space */
- : PLUS S* | GREATER S* | TILDE S* | S+
- ;
-
-simple_selector_sequence
- : [ type_selector | universal ]
- [ HASH | class | attrib | pseudo | negation ]*
- | [ HASH | class | attrib | pseudo | negation ]+
- ;
-
-type_selector
- : [ namespace_prefix ]? element_name
- ;
-
-namespace_prefix
- : [ IDENT | '*' ]? '|'
- ;
-
-element_name
- : IDENT
- ;
-
-universal
- : [ namespace_prefix ]? '*'
- ;
-
-class
- : '.' IDENT
- ;
-
-attrib
- : '[' S* [ namespace_prefix ]? IDENT S*
- [ [ PREFIXMATCH |
- SUFFIXMATCH |
- SUBSTRINGMATCH |
- '=' |
- INCLUDES |
- DASHMATCH ] S* [ IDENT | STRING ] S*
- ]? ']'
- ;
-
-pseudo
- /* '::' starts a pseudo-element, ':' a pseudo-class */
- /* Exceptions: :first-line, :first-letter, :before and :after. */
- /* Note that pseudo-elements are restricted to one per selector and */
- /* occur only in the last simple_selector_sequence. */
- : ':' ':'? [ IDENT | functional_pseudo ]
- ;
-
-functional_pseudo
- : FUNCTION S* expression ')'
- ;
-
-expression
- /* In CSS3, the expressions are identifiers, strings, */
- /* or of the form "an+b" */
- : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
- ;
-
-negation
- : NOT S* negation_arg S* ')'
- ;
-
-negation_arg
- : type_selector | universal | HASH | class | attrib | pseudo
- ;</pre>
-
-
-<h3><a name=lex>10.2. Lexical scanner</a></h3>
-
-<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see
- <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is
- case-insensitive.</p>
-
-<p>The two occurrences of "\377" represent the highest character
- number that current versions of Flex can deal with (decimal 255). They
- should be read as "\4177777" (decimal 1114111), which is the highest
- possible code point in Unicode/ISO-10646. <a
- href="#refsUNICODE">[UNICODE]</a></p>
-
-<pre>%option case-insensitive
-
-ident [-]?{nmstart}{nmchar}*
-name {nmchar}+
-nmstart [_a-z]|{nonascii}|{escape}
-nonascii [^\0-\177]
-unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
-escape {unicode}|\\[^\n\r\f0-9a-f]
-nmchar [_a-z0-9-]|{nonascii}|{escape}
-num [0-9]+|[0-9]*\.[0-9]+
-string {string1}|{string2}
-string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
-string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
-invalid {invalid1}|{invalid2}
-invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
-invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
-nl \n|\r\n|\r|\f
-w [ \t\r\n\f]*
-
-%%
-
-[ \t\r\n\f]+ return S;
-
-"~=" return INCLUDES;
-"|=" return DASHMATCH;
-"^=" return PREFIXMATCH;
-"$=" return SUFFIXMATCH;
-"*=" return SUBSTRINGMATCH;
-{ident} return IDENT;
-{string} return STRING;
-{ident}"(" return FUNCTION;
-{num} return NUMBER;
-"#"{name} return HASH;
-{w}"+" return PLUS;
-{w}">" return GREATER;
-{w}"," return COMMA;
-{w}"~" return TILDE;
-":not(" return NOT;
-@{ident} return ATKEYWORD;
-{invalid} return INVALID;
-{num}% return PERCENTAGE;
-{num}{ident} return DIMENSION;
-"<!--" return CDO;
-"-->" return CDC;
-
-"url("{w}{string}{w}")" return URI;
-"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI;
-U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;
-
-\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
-
-. return *yytext;</pre>
-
-
-<h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>
-
-<p>An important issue is the interaction of CSS selectors with XML
- documents in web clients that were produced prior to this
- document. Unfortunately, due to the fact that namespaces must be
- matched based on the URI which identifies the namespace, not the
- namespace prefix, some mechanism is required to identify namespaces in
- CSS by their URI as well. Without such a mechanism, it is impossible
- to construct a CSS style sheet which will properly match selectors in
- all cases against a random set of XML documents. However, given
- complete knowledge of the XML document to which a style sheet is to be
- applied, and a limited use of namespaces within the XML document, it
- is possible to construct a style sheet in which selectors would match
- elements and attributes correctly.</p>
-
-<p>It should be noted that a down-level CSS client will (if it
- properly conforms to CSS forward compatible parsing rules) ignore all
- <code>@namespace</code> at-rules, as well as all style rules that make
- use of namespace qualified element type or attribute selectors. The
- syntax of delimiting namespace prefixes in CSS was deliberately chosen
- so that down-level CSS clients would ignore the style rules rather
- than possibly match them incorrectly.</p>
-
-<p>The use of default namespaces in CSS makes it possible to write
- element type selectors that will function in both namespace aware CSS
- clients as well as down-level clients. It should be noted that
- down-level clients may incorrectly match selectors against XML
- elements in other namespaces.</p>
-
-<p>The following are scenarios and examples in which it is possible to
- construct style sheets which would function properly in web clients
- that do not implement this proposal.</p>
-
-<ol>
- <li>
-
- <p>The XML document does not use namespaces.</p>
-
- <ul>
-
- <li>In this case, it is obviously not necessary to declare or use
- namespaces in the style sheet. Standard CSS element type and
- attribute selectors will function adequately in a down-level
- client.
- </li>
-
- <li>In a CSS namespace aware client, the default behavior of
- element selectors matching without regard to namespace will
- function properly against all elements, since no namespaces are
- present. However, the use of specific element type selectors
- that
- match only elements that have no namespace ("<code>|name</code>")
- will guarantee that selectors will match only XML elements that
- do
- not have a declared namespace.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document defines a single, default namespace used
- throughout the document. No namespace prefixes are used in element
- names.</p>
-
- <ul>
-
- <li>In this case, a down-level client will function as if
- namespaces were not used in the XML document at all. Standard
- CSS
- element type and attribute selectors will match against all
- elements.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document does <b>not</b> use a default namespace, all
- namespace prefixes used are known to the style sheet author, and
- there is a direct mapping between namespace prefixes and namespace
- URIs. (A given prefix may only be mapped to one namespace URI
- throughout the XML document; there may be multiple prefixes mapped
- to the same URI).</p>
-
- <ul>
-
- <li>In this case, the down-level client will view and match
- element type and attribute selectors based on their fully
- qualified name, not the local part as outlined in the <a
- href="#typenmsp">Type selectors and Namespaces</a>
- section. CSS
- selectors may be declared using an escaped colon
- "<code>\:</code>"
- to describe the fully qualified names, e.g.
- "<code>html\:h1</code>" will match
- <code><html:h1></code>. Selectors using the qualified name
- will only match XML elements that use the same prefix. Other
- namespace prefixes used in the XML that are mapped to the same
- URI
- will not match as expected unless additional CSS style rules are
- declared for them.
- </li>
-
- <li>Note that selectors declared in this fashion will
- <em>only</em> match in down-level clients. A CSS namespace aware
- client will match element type and attribute selectors based on
- the name's local part. Selectors declared with the fully
- qualified name will not match (unless there is no namespace
- prefix
- in the fully qualified name).
- </li>
-
- </ul>
-
- </li>
-
-</ol>
-
-<p>In other scenarios: when the namespace prefixes used in the XML are
- not known in advance by the style sheet author; or a combination of
- elements with no namespace are used in conjunction with elements using
- a default namespace; or the same namespace prefix is mapped to
- <em>different</em> namespace URIs within the same document, or in
- different documents; it is impossible to construct a CSS style sheet
- that will function properly against all elements in those documents,
- unless, the style sheet is written using a namespace URI syntax (as
- outlined in this document or similar) and the document is processed by
- a CSS and XML namespace aware client.</p>
-
-<h2><a name=profiling>12. Profiles</a></h2>
-
-<p>Each specification using Selectors must define the subset of W3C
- Selectors it allows and excludes, and describe the local meaning of
- all the components of that subset.</p>
-
-<p>Non normative examples:
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 1</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>class selectors<br>ID selectors<br>:link,
- :visited and :active pseudo-classes<br>descendant combinator
- <br>::first-line and ::first-letter pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>universal selector<br>attribute selectors<br>:hover and
- :focus
- pseudo-classes<br>:target pseudo-class<br>:lang()
- pseudo-class<br>all UI
- element states pseudo-classes<br>all structural
- pseudo-classes<br>negation pseudo-class<br>all
- UI element fragments pseudo-elements<br>::before and ::after
- pseudo-elements<br>child combinators<br>sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>only one class selector allowed per sequence of simple
- selectors
- </td>
- </tr>
- </tbody>
- </table>
- <br><br>
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 2</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>universal selector<br>attribute presence and
- values selectors<br>class selectors<br>ID selectors<br>:link,
- :visited,
- :active, :hover, :focus, :lang() and :first-child pseudo-classes
- <br>descendant combinator<br>child combinator<br>adjacent
- sibling
- combinator<br>::first-line and ::first-letter
- pseudo-elements<br>::before
- and ::after pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>content selectors<br>substring matching attribute
- selectors<br>:target pseudo-classes<br>all UI element
- states pseudo-classes<br>all structural pseudo-classes other
- than :first-child<br>negation pseudo-class<br>all UI element
- fragments pseudo-elements<br>general sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>more than one class selector per sequence of simple selectors
- (CSS1
- constraint) allowed
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>In CSS, selectors express pattern matching rules that determine which
- style
- rules apply to elements in the document tree.
-
- <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
- with attribute <code>name</code> set inside a section 1 header
- <code>h1</code>:
- <pre>h1 a[name]</pre>
-
- <p>All CSS declarations attached to such a selector are applied to elements
- matching it.</div>
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>STTS 3</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>
-
- <p>type selectors<br>universal selectors<br>attribute
- selectors<br>class
- selectors<br>ID selectors<br>all structural
- pseudo-classes<br>
- all combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>non-accepted pseudo-classes<br>pseudo-elements<br></td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>some selectors and combinators are not allowed in fragment
- descriptions on the right side of STTS declarations.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>Selectors can be used in STTS 3 in two different
- manners:
- <ol>
- <li>a selection mechanism equivalent to CSS selection mechanism:
- declarations
- attached to a given selector are applied to elements matching that
- selector,
- <li>fragment descriptions that appear on the right side of declarations.
- </li>
- </ol>
-</div>
-
-<h2><a name=Conformance></a>13. Conformance and requirements</h2>
-
-<p>This section defines conformance with the present specification only.
-
-<p>The inability of a user agent to implement part of this specification due to
- the limitations of a particular device (e.g., non interactive user agents
- will
- probably not implement dynamic pseudo-classes because they make no sense
- without
- interactivity) does not imply non-conformance.
-
-<p>All specifications reusing Selectors must contain a <a
- href="#profiling">Profile</a> listing the
- subset of Selectors it accepts or excludes, and describing the constraints
- it adds to the current specification.
-
-<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a
- token
- which is not allowed at the current parsing point.
-
-<p>User agents must observe the rules for handling parsing errors:
-<ul>
- <li>a simple selector containing an undeclared namespace prefix is invalid
- </li>
- <li>a selector containing an invalid simple selector, an invalid combinator
- or an invalid token is invalid.
- </li>
- <li>a group of selectors containing an invalid selector is invalid.</li>
-</ul>
-
-<p>Specifications reusing Selectors must define how to handle parsing
- errors. (In the case of CSS, the entire rule in which the selector is
- used is dropped.)</p>
-
-<!-- Apparently all these references are out of date:
-<p>Implementations of this specification must behave as
-"recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>
-when parsing selectors and attempting matches. (In particular,
-implementations must assume the data is normalized and must not
-normalize it.) Normative rules for matching strings are defined in
-<a href="#refsCWWW">[CWWW]</a> and <a
-href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this
-specification.</p>-->
-
-<h2><a name=Tests></a>14. Tests</h2>
-
-<p>This specification has <a
- href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
- suite</a> allowing user agents to verify their basic conformance to
- the specification. This test suite does not pretend to be exhaustive
- and does not cover all possible combined cases of Selectors.</p>
-
-<h2><a name=ACKS></a>15. Acknowledgements</h2>
-
-<p>The CSS working group would like to thank everyone who has sent
- comments on this specification over the years.</p>
-
-<p>The working group would like to extend special thanks to Donna
- McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed
- the final editorial review.</p>
-
-<h2><a name=references>16. References</a></h2>
-
-<dl class="refs">
-
- <dt>[CSS1]
- <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading
- Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised
- 11 Jan 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>)
-
- <dt>[CSS21]
- <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon
- Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision
- 1</cite>", W3C Working Draft, 13 June 2005
- <dd>(<code><a
- href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>)
-
- <dt>[CWWW]
- <dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau,
- Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model
- for the World Wide Web</cite>", W3C Recommendation, 15 February 2005
- <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>)
-
- <dt>[FLEX]
- <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner
- Generator</cite>", Version 2.3.7, ISBN 1882114213
-
- <dt>[HTML4]
- <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs,
- editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24
- December 1999
- <dd>
- (<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>)
-
- <dt>[MATH]
- <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical
- Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7
- July 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>)
-
- <dt>[RFC3066]
- <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the
- Identification of Languages</cite>", Request for Comments 3066, January
- 2001
- <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)
-
- <dt>[STTS]
- <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation
- Sheets 3</cite>", Electricité de France, submission to the W3C,
- 11 November 1998
- <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>)
-
- <dt>[SVG]
- <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean
- Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1
- Specification</cite>", W3C Recommendation, 14 January 2003
- <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>)
-
- <dt>[UNICODE]</dt>
- <dd><a name="refsUNICODE"></a> <cite><a
- href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode
- Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA,
- Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a
- href="http://www.unicode.org/versions/Unicode4.0.1/">Unicode
- 4.0.1</a> and <a
- href="http://www.unicode.org/versions/Unicode4.1.0/">Unicode
- 4.1.0</a>.
- <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)
- </dd>
-
- <dt>[XML10]
- <dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,
- Eve Maler, François Yergeau, editors; "<cite>Extensible Markup
- Language (XML) 1.0 (Third Edition)</cite>", W3C Recommendation, 4
- February 2004
- <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>)
-
- <dt>[XMLNAMES]
- <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman,
- editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14
- January 1999
- <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>)
-
- <dt>[YACC]
- <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another
- compiler compiler</cite>", Technical Report, Murray Hill, 1975
-
-</dl>
-
-</div>
+ <h2 style="color: white; border-bottom: 1px solid gray">
+ GWTSpeed - GWT Query benchmarks
+ <div id="startrace" style="float: right; color: red">Start Race</div>
+ </h2>
+
+ <div id="racetrack" style="height: 0px; overflow: hidden;">
+ <div id="racefield"
+ style="height: 100%; padding: 15px; background-image: url(images/bench/grass-texture-small.jpg); background-repeat: repeat;">
+ </div>
+ </div>
+
+ <div id ="results" style="display: block; height: 200px; overflow-y:scroll; overflow-x: hidden; margin: 0">
+ <table id="resultstable" border="1" style="width: 100%; border-collapse: collapse">
+ </table>
+ </div>
+
+ <script language="javascript" src="gwtquery.samples.GwtQueryBench.nocache.js"></script>
</body>
</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/dojobench.html b/samples/src/main/java/gwtquery/samples/public/dojobench.html deleted file mode 100644 index 8f225a54..00000000 --- a/samples/src/main/java/gwtquery/samples/public/dojobench.html +++ /dev/null @@ -1,3172 +0,0 @@ -<html>
-<head>
- <title>JQuery</title>
- <script type="text/javascript" src="dojo.js"></script>
- <script type="text/javascript">
- window.parent.dojobenchmark = function(sel) {
- return dojo.query(sel).length;
- }
- </script>
-</head>
-<body>
-<div style="display: none">
-<div style="display: none" class="head">
- <p><a href="http://www.w3.org/"><img height=48 alt=W3C
- src="http://www.w3.org/Icons/w3c_home"
- width=72></a>
-
- <h1 id="title">Selectors</h1>
-
- <h2>W3C Working Draft 15 December 2005</h2>
-
- <dl>
-
- <dt>This version:
-
- <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">
- http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>
-
- <dt>Latest version:
-
- <dd><a href="http://www.w3.org/TR/css3-selectors">
- http://www.w3.org/TR/css3-selectors</a>
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">
- http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
-
- <dt><a name=editors-list></a>Editors:
-
- <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited
- Expert)
- </dd>
-
- <dd class="vcard"><a lang="tr" class="url fn"
- href="http://www.tantek.com/">Tantek Çelik</a>
- (Invited Expert)
-
- <dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian
- Hickson</a> (<span
- class="company"><a
- href="http://www.google.com/">Google</a></span>)
-
- <dd class="vcard"><span class="fn">Peter Linss</span> (former
- editor, <span class="company"><a
- href="http://www.netscape.com/">Netscape/AOL</a></span>)
-
- <dd class="vcard"><span class="fn">John Williams</span> (former editor, <span
- class="company"><a
- href="http://www.quark.com/">Quark, Inc.</a></span>)
-
- </dl>
-
- <p class="copyright"><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">
- Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr
- title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
- (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
- Institute of Technology">MIT</abbr></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research
- Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
- W3C
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.
-
- <hr title="Separator for header">
-
-</div>
-
-<h2><a name=abstract></a>Abstract</h2>
-
-<p><em>Selectors</em> are patterns that match against elements in a
- tree. Selectors have been optimized for use with HTML and XML, and
- are designed to be usable in performance-critical code.</p>
-
-<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading
- Style Sheets) is a language for describing the rendering of <acronym
- title="Hypertext Markup Language">HTML</acronym> and <acronym
- title="Extensible Markup Language">XML</acronym> documents on
- screen, on paper, in speech, etc. CSS uses Selectors for binding
- style properties to elements in the document. This document
- describes extensions to the selectors defined in CSS level 2. These
- extended selectors will be used by CSS level 3.
-
-<p>Selectors define the following function:</p>
-
-<pre>expression ∗ element → boolean</pre>
-
-<p>That is, given an element and a selector, this specification
- defines whether that element matches the selector.</p>
-
-<p>These expressions can also be used, for instance, to select a set
- of elements, or a single element from a set of elements, by
- evaluating the expression across all the elements in a
- subtree. <acronym title="Simple Tree Transformation
- Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a
- language for transforming XML trees, uses this mechanism. <a
- href="#refsSTTS">[STTS]</a></p>
-
-<h2><a name=status></a>Status of this document</h2>
-
-<p><em>This section describes the status of this document at the
- time of its publication. Other documents may supersede this
- document. A list of current W3C publications and the latest revision
- of this technical report can be found in the <a
- href="http://www.w3.org/TR/">W3C technical reports index at
- http://www.w3.org/TR/.</a></em></p>
-
-<p>This document describes the selectors that already exist in <a
- href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a
- href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and
- also proposes new selectors for <abbr title="CSS level
- 3">CSS3</abbr> and other languages that may need them.</p>
-
-<p>The CSS Working Group doesn't expect that all implementations of
- CSS3 will have to implement all selectors. Instead, there will
- probably be a small number of variants of CSS3, called profiles. For
- example, it may be that only a profile for interactive user agents
- will include all of the selectors.</p>
-
-<p>This specification is a last call working draft for the the <a
- href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
- (<a href="/Style/">Style Activity</a>). This
- document is a revision of the <a
- href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate
- Recommendation dated 2001 November 13</a>, and has incorporated
- implementation feedback received in the past few years. It is
- expected that this last call will proceed straight to Proposed
- Recommendation stage since it is believed that interoperability will
- be demonstrable.</p>
-
-<p>All persons are encouraged to review and implement this
- specification and return comments to the (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
- public mailing list <a
- href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>
- (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C
- Members can also send comments directly to the CSS Working
- Group.
- The deadline for comments is 14 January 2006.</p>
-
-<p>This is still a draft document and may be updated, replaced, or
- obsoleted by other documents at any time. It is inappropriate to
- cite a W3C Working Draft as other than "work in progress".
-
-<p>This document may be available in <a
- href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.
- The English version of this specification is the only normative
- version.
-
-<div class="subtoc">
-
- <h2><a name=contents>Table of contents</a></h2>
-
- <ul class="toc">
- <li class="tocline2"><a href="#context">1. Introduction</a>
- <ul>
- <li><a href="#dependencies">1.1. Dependencies</a></li>
- <li><a href="#terminology">1.2. Terminology</a></li>
- <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a></li>
- </ul>
- <li class="tocline2"><a href="#selectors">2. Selectors</a>
- <li class="tocline2"><a href="#casesens">3. Case sensitivity</a>
- <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>
- <li class="tocline2"><a href="#grouping">5. Groups of selectors</a>
- <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#type-selectors">6.1. Type
- selectors</a>
- <ul class="toc">
- <li class="tocline4"><a href="#typenmsp">6.1.1. Type
- selectors and namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#universal-selector">6.2.
- Universal selector</a>
- <ul>
- <li><a href="#univnmsp">6.2.1. Universal selector and
- namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#attribute-selectors">6.3.
- Attribute selectors</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#attribute-representation">6.3.1.
- Representation of attributes and attributes
- values</a>
- <li><a href="#attribute-substrings">6.3.2. Substring
- matching attribute selectors</a>
- <li class="tocline4"><a href="#attrnmsp">6.3.3.
- Attribute selectors and namespaces</a>
- <li class="tocline4"><a href="#def-values">6.3.4.
- Default attribute values in DTDs</a></li>
- </ul>
- <li class="tocline3"><a href="#class-html">6.4. Class
- selectors</a>
- <li class="tocline3"><a href="#id-selectors">6.5. ID
- selectors</a>
- <li class="tocline3"><a href="#pseudo-classes">6.6.
- Pseudo-classes</a>
- <ul class="toc">
- <li class="tocline4"><a href="#dynamic-pseudos">6.6.1.
- Dynamic pseudo-classes</a>
- <li class="tocline4"><a href="#target-pseudo">6.6.2. The
- :target pseudo-class</a>
- <li class="tocline4"><a href="#lang-pseudo">6.6.3. The
- :lang() pseudo-class</a>
- <li class="tocline4"><a href="#UIstates">6.6.4. UI
- element states pseudo-classes</a>
- <li class="tocline4"><a href="#structural-pseudos">6.6.5.
- Structural pseudo-classes</a>
- <ul>
- <li><a href="#root-pseudo">:root
- pseudo-class</a>
- <li><a href="#nth-child-pseudo">:nth-child()
- pseudo-class</a>
- <li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
- <li><a href="#nth-of-type-pseudo">:nth-of-type()
- pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
- <li><a href="#first-child-pseudo">:first-child
- pseudo-class</a>
- <li><a href="#last-child-pseudo">:last-child
- pseudo-class</a>
- <li><a href="#first-of-type-pseudo">:first-of-type
- pseudo-class</a>
- <li><a href="#last-of-type-pseudo">:last-of-type
- pseudo-class</a>
- <li><a href="#only-child-pseudo">:only-child
- pseudo-class</a>
- <li><a href="#only-of-type-pseudo">:only-of-type
- pseudo-class</a>
- <li><a href="#empty-pseudo">:empty
- pseudo-class</a></li>
- </ul>
- <li class="tocline4"><a href="#negation">6.6.7. The
- negation pseudo-class</a></li>
- </ul>
- </li>
- </ul>
- <li><a href="#pseudo-elements">7. Pseudo-elements</a>
- <ul>
- <li><a href="#first-line">7.1. The ::first-line
- pseudo-element</a>
- <li><a href="#first-letter">7.2. The ::first-letter
- pseudo-element</a>
- <li><a href="#UIfragments">7.3. The ::selection
- pseudo-element</a>
- <li><a href="#gen-content">7.4. The ::before and ::after
- pseudo-elements</a></li>
- </ul>
- <li class="tocline2"><a href="#combinators">8. Combinators</a>
- <ul class="toc">
- <li class="tocline3"><a href="#descendant-combinators">8.1.
- Descendant combinators</a>
- <li class="tocline3"><a href="#child-combinators">8.2. Child
- combinators</a>
- <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling
- combinators</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#adjacent-sibling-combinators">8.3.1.
- Adjacent sibling combinator</a>
- <li class="tocline4"><a
- href="#general-sibling-combinators">8.3.2.
- General sibling combinator</a></li>
- </ul>
- </li>
- </ul>
- <li class="tocline2"><a href="#specificity">9. Calculating a selector's
- specificity</a>
- <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
- Selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#grammar">10.1. Grammar</a>
- <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a>
- </li>
- </ul>
- <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level
- clients</a>
- <li class="tocline2"><a href="#profiling">12. Profiles</a>
- <li><a href="#Conformance">13. Conformance and requirements</a>
- <li><a href="#Tests">14. Tests</a>
- <li><a href="#ACKS">15. Acknowledgements</a>
- <li class="tocline2"><a href="#references">16. References</a>
- </ul>
-
-</div>
-
-<h2><a name=context>1. Introduction</a></h2>
-
-<h3><a name=dependencies></a>1.1. Dependencies</h3>
-
-<p>Some features of this specification are specific to CSS, or have
- particular limitations or rules specific to CSS. In this
- specification, these have been described in terms of CSS2.1. <a
- href="#refsCSS21">[CSS21]</a></p>
-
-<h3><a name=terminology></a>1.2. Terminology</h3>
-
-<p>All of the text of this specification is normative except
- examples, notes, and sections explicitly marked as
- non-normative.</p>
-
-<h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>
-
-<p><em>This section is non-normative.</em></p>
-
-<p>The main differences between the selectors in CSS2 and those in
- Selectors are:
-
-<ul>
-
- <li>the list of basic definitions (selector, group of selectors,
- simple selector, etc.) has been changed; in particular, what was
- referred to in CSS2 as a simple selector is now called a sequence
- of simple selectors, and the term "simple selector" is now used for
- the components of this sequence
- </li>
-
- <li>an optional namespace component is now allowed in type element
- selectors, the universal selector and attribute selectors
- </li>
-
- <li>a <a href="#general-sibling-combinators">new combinator</a> has been
- introduced
- </li>
-
- <li>new simple selectors including substring matching attribute
- selectors, and new pseudo-classes
- </li>
-
- <li>new pseudo-elements, and introduction of the "::" convention
- for pseudo-elements
- </li>
-
- <li>the grammar has been rewritten</li>
-
- <li>profiles to be added to specifications integrating Selectors
- and defining the set of selectors which is actually supported by
- each specification
- </li>
-
- <li>Selectors are now a CSS3 Module and an independent
- specification; other specifications can now refer to this document
- independently of CSS
- </li>
-
- <li>the specification now has its own test suite</li>
-
-</ul>
-
-<h2><a name=selectors></a>2. Selectors</h2>
-
-<p><em>This section is non-normative, as it merely summarizes the
- following sections.</em></p>
-
-<p>A Selector represents a structure. This structure can be used as a
- condition (e.g. in a CSS rule) that determines which elements a
- selector matches in the document tree, or as a flat description of the
- HTML or XML fragment corresponding to that structure.</p>
-
-<p>Selectors may range from simple element names to rich contextual
- representations.</p>
-
-<p>The following table summarizes the Selector syntax:</p>
-
-<table class="selectorsReview">
-<thead>
-<tr>
- <th class="pattern">Pattern</th>
- <th class="meaning">Meaning</th>
- <th class="described">Described in section</th>
- <th class="origin">First defined in CSS level</th>
-</tr>
-<tbody>
-<tr>
- <td class="pattern">*</td>
- <td class="meaning">any element</td>
- <td class="described"><a
- href="#universal-selector">Universal
- selector</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E</td>
- <td class="meaning">an element of type E</td>
- <td class="described"><a
- href="#type-selectors">Type selector</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E[foo]</td>
- <td class="meaning">an E element with a "foo" attribute</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is exactly
- equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo~="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is a list of
- space-separated values, one of which is exactly equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo^="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value begins exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo$="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value ends exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo*="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value contains the
- substring "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[hreflang|="en"]</td>
- <td class="meaning">an E element whose "hreflang" attribute has a
- hyphen-separated
- list of values beginning (from the left) with "en"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:root</td>
- <td class="meaning">an E element, root of the document</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-child</td>
- <td class="meaning">an E element, first child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:last-child</td>
- <td class="meaning">an E element, last child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-of-type</td>
- <td class="meaning">an E element, first sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:last-of-type</td>
- <td class="meaning">an E element, last sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-child</td>
- <td class="meaning">an E element, only child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-of-type</td>
- <td class="meaning">an E element, only sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:empty</td>
- <td class="meaning">an E element that has no children (including text
- nodes)
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:link<br>E:visited</td>
- <td class="meaning">an E element being the source anchor of a hyperlink of
- which the target is not yet visited (:link) or already visited
- (:visited)
- </td>
- <td class="described"><a
- href="#link">The link
- pseudo-classes</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:active<br>E:hover<br>E:focus</td>
- <td class="meaning">an E element during certain user actions</td>
- <td class="described"><a
- href="#useraction-pseudos">The user
- action pseudo-classes</a></td>
- <td class="origin">1 and 2</td>
-</tr>
-<tr>
- <td class="pattern">E:target</td>
- <td class="meaning">an E element being the target of the referring URI</td>
- <td class="described"><a
- href="#target-pseudo">The target
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:lang(fr)</td>
- <td class="meaning">an element of type E in language "fr" (the document
- language specifies how language is determined)
- </td>
- <td class="described"><a
- href="#lang-pseudo">The :lang()
- pseudo-class</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:enabled<br>E:disabled</td>
- <td class="meaning">a user interface element E which is enabled or
- disabled
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:checked<!--<br>E:indeterminate--></td>
- <td class="meaning">a user interface element E which is checked<!-- or in an
- indeterminate state--> (for instance a radio-button or checkbox)
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::first-line</td>
- <td class="meaning">the first formatted line of an E element</td>
- <td class="described"><a
- href="#first-line">The ::first-line
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::first-letter</td>
- <td class="meaning">the first formatted letter of an E element</td>
- <td class="described"><a
- href="#first-letter">The ::first-letter
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::selection</td>
- <td class="meaning">the portion of an E element that is currently
- selected/highlighted by the user
- </td>
- <td class="described"><a
- href="#UIfragments">The UI element
- fragments pseudo-elements</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::before</td>
- <td class="meaning">generated content before an E element</td>
- <td class="described"><a
- href="#gen-content">The ::before
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E::after</td>
- <td class="meaning">generated content after an E element</td>
- <td class="described"><a
- href="#gen-content">The ::after
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E.warning</td>
- <td class="meaning">an E element whose class is
- "warning" (the document language specifies how class is determined).
- </td>
- <td class="described"><a
- href="#class-html">Class
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E#myid</td>
- <td class="meaning">an E element with ID equal to "myid".</td>
- <td class="described"><a
- href="#id-selectors">ID
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:not(s)</td>
- <td class="meaning">an E element that does not match simple selector s</td>
- <td class="described"><a
- href="#negation">Negation
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E F</td>
- <td class="meaning">an F element descendant of an E element</td>
- <td class="described"><a
- href="#descendant-combinators">Descendant
- combinator</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E > F</td>
- <td class="meaning">an F element child of an E element</td>
- <td class="described"><a
- href="#child-combinators">Child
- combinator</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E + F</td>
- <td class="meaning">an F element immediately preceded by an E element</td>
- <td class="described"><a
- href="#adjacent-sibling-combinators">Adjacent sibling combinator</a>
- </td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E ~ F</td>
- <td class="meaning">an F element preceded by an E element</td>
- <td class="described"><a
- href="#general-sibling-combinators">General sibling combinator</a>
- </td>
- <td class="origin">3</td>
-</tr>
-</tbody>
-</table>
-
-<p>The meaning of each selector is derived from the table above by
- prepending "matches" to the contents of each cell in the "Meaning"
- column.</p>
-
-<h2><a name=casesens>3. Case sensitivity</a></h2>
-
-<p>The case sensitivity of document language element names, attribute
- names, and attribute values in selectors depends on the document
- language. For example, in HTML, element names are case-insensitive,
- but in XML, they are case-sensitive.</p>
-
-<h2><a name=selector-syntax>4. Selector syntax</a></h2>
-
-<p>A <dfn><a name=selector>selector</a></dfn> is a chain of one
- or more <a href="#sequence">sequences of simple selectors</a>
- separated by <a href="#combinators">combinators</a>.</p>
-
-<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>
- is a chain of <a href="#simple-selectors-dfn">simple selectors</a>
- that are not separated by a <a href="#combinators">combinator</a>. It
- always begins with a <a href="#type-selectors">type selector</a> or a
- <a href="#universal-selector">universal selector</a>. No other type
- selector or universal selector is allowed in the sequence.</p>
-
-<p>A <dfn><a name=simple-selectors-dfn></a><a
- href="#simple-selectors">simple selector</a></dfn> is either a <a
- href="#type-selectors">type selector</a>, <a
- href="#universal-selector">universal selector</a>, <a
- href="#attribute-selectors">attribute selector</a>, <a
- href="#class-html">class selector</a>, <a
- href="#id-selectors">ID selector</a>, <a
- href="#content-selectors">content selector</a>, or <a
- href="#pseudo-classes">pseudo-class</a>. One <a
- href="#pseudo-elements">pseudo-element</a> may be appended to the last
- sequence of simple selectors.</p>
-
-<p><dfn>Combinators</dfn> are: white space, "greater-than
- sign" (U+003E, <code>></code>), "plus sign" (U+002B,
- <code>+</code>) and "tilde" (U+007E, <code>~</code>). White
- space may appear between a combinator and the simple selectors around
- it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"
- (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form
- feed" (U+000C) can occur in white space. Other space-like characters,
- such as "em-space" (U+2003) and "ideographic space" (U+3000), are
- never part of white space.</p>
-
-<p>The elements of a document tree that are represented by a selector
- are the <dfn><a name=subject></a>subjects of the selector</dfn>. A
- selector consisting of a single sequence of simple selectors
- represents any element satisfying its requirements. Prepending another
- sequence of simple selectors and a combinator to a sequence imposes
- additional matching constraints, so the subjects of a selector are
- always a subset of the elements represented by the last sequence of
- simple selectors.</p>
-
-<p>An empty selector, containing no sequence of simple selectors and
- no pseudo-element, is an <a href="#Conformance">invalid
- selector</a>.</p>
-
-<h2><a name=grouping>5. Groups of selectors</a></h2>
-
-<p>When several selectors share the same declarations, they may be
- grouped into a comma-separated list. (A comma is U+002C.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>In this example, we condense three rules with identical
- declarations into one. Thus,</p>
-<pre>h1 { font-family: sans-serif }
-h2 { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
- <p>is equivalent to:</p>
- <pre>h1, h2, h3 { font-family: sans-serif }</pre>
-</div>
-
-<p><strong>Warning</strong>: the equivalence is true in this example
- because all the selectors are valid selectors. If just one of these
- selectors were invalid, the entire group of selectors would be
- invalid. This would invalidate the rule for all three heading
- elements, whereas in the former case only one of the three individual
- heading rules would be invalidated.</p>
-
-
-<h2><a name=simple-selectors>6. Simple selectors</a></h2>
-
-<h3><a name=type-selectors>6.1. Type selector</a></h3>
-
-<p>A <dfn>type selector</dfn> is the name of a document language
- element type. A type selector represents an instance of the element
- type in the document tree.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents an <code>h1</code> element in the
- document tree:</p>
- <pre>h1</pre>
-</div>
-
-
-<h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>
-
-<p>Type selectors allow an optional namespace (<a
- href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix
- that has been previously declared may be prepended to the element name
- separated by the namespace separator "vertical bar"
- (U+007C, <code>|</code>).</p>
-
-<p>The namespace component may be left empty to indicate that the
- selector is only to represent elements with no declared namespace.</p>
-
-<p>An asterisk may be used for the namespace prefix, indicating that
- the selector represents elements in any namespace (including elements
- with no namespace).</p>
-
-<p>Element type selectors that have no namespace component (no
- namespace separator), represent elements without regard to the
- element's namespace (equivalent to "<code>*|</code>") unless a default
- namespace has been declared. If a default namespace has been declared,
- the selector will represent only elements in the default
- namespace.</p>
-
-<p>A type selector containing a namespace prefix that has not been
- previously declared is an <a href="#Conformance">invalid</a> selector.
- The mechanism for declaring a namespace prefix is left up to the
- language implementing Selectors. In CSS, such a mechanism is defined
- in the General Syntax module.</p>
-
-<p>In a namespace-aware client, element type selectors will only match
- against the <a
- href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local
- part</a>
- of the element's <a
- href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
- name</a>. See <a href="#downlevel">below</a> for notes about matching
- behaviors in down-level clients.</p>
-
-<p>In summary:</p>
-
-<dl>
- <dt><code>ns|E</code></dt>
- <dd>elements with name E in namespace ns</dd>
- <dt><code>*|E</code></dt>
- <dd>elements with name E in any namespace, including those without any
- declared namespace
- </dd>
- <dt><code>|E</code></dt>
- <dd>elements with name E without any declared namespace</dd>
- <dt><code>E</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|E.
- Otherwise it is equivalent to ns|E where ns is the default namespace.
- </dd>
-</dl>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <pre>@namespace foo url(http://www.example.com);
- foo|h1 { color: blue }
- foo|* { color: yellow }
- |h1 { color: red }
- *|h1 { color: green }
- h1 { color: green }</pre>
-
- <p>The first rule will match only <code>h1</code> elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The second rule will match all elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The third rule will match only <code>h1</code> elements without
- any declared namespace.</p>
-
- <p>The fourth rule will match <code>h1</code> elements in any
- namespace (including those without any declared namespace).</p>
-
- <p>The last rule is equivalent to the fourth rule because no default
- namespace has been defined.</p>
-
-</div>
-
-<h3><a name=universal-selector>6.2. Universal selector</a></h3>
-
-<p>The <dfn>universal selector</dfn>, written "asterisk"
- (<code>*</code>), represents the qualified name of any element
- type. It represents any single element in the document tree in any
- namespace (including those without any declared namespace) if no
- default namespace has been specified. If a default namespace has been
- specified, see <a href="#univnmsp">Universal selector and
- Namespaces</a> below.</p>
-
-<p>If the universal selector is not the only component of a sequence
- of simple selectors, the <code>*</code> may be omitted.</p>
-
-<div class="example">
- <p>Examples:</p>
- <ul>
- <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
- equivalent,
- </li>
- <li><code>*.warning</code> and <code>.warning</code> are equivalent,
- </li>
- <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>
- </ul>
-</div>
-
-<p class="note"><strong>Note:</strong> it is recommended that the
- <code>*</code>, representing the universal selector, not be
- omitted.</p>
-
-<h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>
-
-<p>The universal selector allows an optional namespace component. It
- is used as follows:</p>
-
-<dl>
- <dt><code>ns|*</code></dt>
- <dd>all elements in namespace ns</dd>
- <dt><code>*|*</code></dt>
- <dd>all elements</dd>
- <dt><code>|*</code></dt>
- <dd>all elements without any declared namespace</dd>
- <dt><code>*</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|*.
- Otherwise it is equivalent to ns|* where ns is the default namespace.
- </dd>
-</dl>
-
-<p>A universal selector containing a namespace prefix that has not
- been previously declared is an <a href="#Conformance">invalid</a>
- selector. The mechanism for declaring a namespace prefix is left up
- to the language implementing Selectors. In CSS, such a mechanism is
- defined in the General Syntax module.</p>
-
-
-<h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>
-
-<p>Selectors allow the representation of an element's attributes. When
- a selector is used as an expression to match against an element,
- attribute selectors must be considered to match an element if that
- element has an attribute that matches the attribute represented by the
- attribute selector.</p>
-
-<h4><a name=attribute-representation>6.3.1. Attribute presence and values
- selectors</a></h4>
-
-<p>CSS2 introduced four attribute selectors:</p>
-
-<dl>
- <dt><code>[att]</code>
- <dd>Represents an element with the <code>att</code> attribute, whatever the
- value of
- the attribute.
- </dd>
- <dt><code>[att=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- exactly
- "val".
- </dd>
- <dt><code>[att~=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- a <a
- href="#whitespace">whitespace</a>-separated list of words, one
- of
- which is exactly "val". If "val" contains whitespace, it will never
- represent anything (since the words are <em>separated</em> by
- spaces).
- </dd>
- <dt><code>[att|=val]</code>
- <dd>Represents an element with the <code>att</code> attribute, its value
- either
- being exactly "val" or beginning with "val" immediately followed by
- "-" (U+002D). This is primarily intended to allow language subcode
- matches (e.g., the <code>hreflang</code> attribute on the
- <code>link</code> element in HTML) as described in RFC 3066 (<a
- href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or
- <code>xml:lang</code>) language subcode matching, please see <a
- href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names and values in selectors depends on
- the document language.</p>
-
-<div class="example">
-
- <p>Examples:</p>
-
- <p>The following attribute selector represents an <code>h1</code>
- element that carries the <code>title</code> attribute, whatever its
- value:</p>
-
- <pre>h1[title]</pre>
-
- <p>In the following example, the selector represents a
- <code>span</code> element whose <code>class</code> attribute has
- exactly the value "example":</p>
-
- <pre>span[class="example"]</pre>
-
- <p>Multiple attribute selectors can be used to represent several
- attributes of an element, or several conditions on the same
- attribute. Here, the selector represents a <code>span</code> element
- whose <code>hello</code> attribute has exactly the value "Cleveland"
- and whose <code>goodbye</code> attribute has exactly the value
- "Columbus":</p>
-
- <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
-
- <p>The following selectors illustrate the differences between "="
- and "~=". The first selector will represent, for example, the value
- "copyright copyleft copyeditor" on a <code>rel</code> attribute. The
- second selector will only represent an <code>a</code> element with
- an <code>href</code> attribute having the exact value
- "http://www.w3.org/".</p>
-
- <pre>a[rel~="copyright"]
-a[href="http://www.w3.org/"]</pre>
-
- <p>The following selector represents a <code>link</code> element
- whose <code>hreflang</code> attribute is exactly "fr".</p>
-
- <pre>link[hreflang=fr]</pre>
-
- <p>The following selector represents a <code>link</code> element for
- which the values of the <code>hreflang</code> attribute begins with
- "en", including "en", "en-US", and "en-cockney":</p>
-
- <pre>link[hreflang|="en"]</pre>
-
- <p>Similarly, the following selectors represents a
- <code>DIALOGUE</code> element whenever it has one of two different
- values for an attribute <code>character</code>:</p>
-
- <pre>DIALOGUE[character=romeo]
-DIALOGUE[character=juliet]</pre>
-
-</div>
-
-<h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute
- selectors</h4>
-
-<p>Three additional attribute selectors are provided for matching
- substrings in the value of an attribute:</p>
-
-<dl>
- <dt><code>[att^=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value
- begins
- with the prefix "val".
- </dd>
- <dt><code>[att$=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- ends with
- the suffix "val".
- </dd>
- <dt><code>[att*=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- contains
- at least one instance of the substring "val".
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names in selectors depends on the
- document language.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents an HTML <code>object</code>,
- referencing an
- image:</p>
- <pre>object[type^="image/"]</pre>
- <p>The following selector represents an HTML anchor <code>a</code> with an
- <code>href</code> attribute whose value ends with ".html".</p>
- <pre>a[href$=".html"]</pre>
- <p>The following selector represents an HTML paragraph with a
- <code>title</code>
- attribute whose value contains the substring "hello"</p>
- <pre>p[title*="hello"]</pre>
-</div>
-
-<h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>
-
-<p>Attribute selectors allow an optional namespace component to the
- attribute name. A namespace prefix that has been previously declared
- may be prepended to the attribute name separated by the namespace
- separator "vertical bar" (<code>|</code>). In keeping with
- the Namespaces in the XML recommendation, default namespaces do not
- apply to attributes, therefore attribute selectors without a namespace
- component apply only to attributes that have no declared namespace
- (equivalent to "<code>|attr</code>"). An asterisk may be used for the
- namespace prefix indicating that the selector is to match all
- attribute names without regard to the attribute's namespace.
-
-<p>An attribute selector with an attribute name containing a namespace
- prefix that has not been previously declared is an <a
- href="#Conformance">invalid</a> selector. The mechanism for
- declaring
- a namespace prefix is left up to the language implementing Selectors.
- In CSS, such a mechanism is defined in the General Syntax module.
-
-<div class="example">
- <p>CSS examples:</p>
- <pre>@namespace foo "http://www.example.com";
-[foo|att=val] { color: blue }
-[*|att] { color: yellow }
-[|att] { color: green }
-[att] { color: green }</pre>
-
- <p>The first rule will match only elements with the attribute
- <code>att</code> in the "http://www.example.com" namespace with the
- value "val".</p>
-
- <p>The second rule will match only elements with the attribute
- <code>att</code> regardless of the namespace of the attribute
- (including no declared namespace).</p>
-
- <p>The last two rules are equivalent and will match only elements
- with the attribute <code>att</code> where the attribute is not
- declared to be in a namespace.</p>
-
-</div>
-
-<h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>
-
-<p>Attribute selectors represent explicitly set attribute values in
- the document tree. Default attribute values may be defined in a DTD or
- elsewhere, but cannot always be selected by attribute
- selectors. Selectors should be designed so that they work even if the
- default values are not included in the document tree.</p>
-
-<p>More precisely, a UA is <em>not</em> required to read an "external
- subset" of the DTD but <em>is</em> required to look for default
- attribute values in the document's "internal subset." (See <a
- href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>
-
-<p>A UA that recognizes an XML namespace <a
- href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its
- knowledge of that namespace to treat default attribute values as if
- they were present in the document. (For example, an XHTML UA is not
- required to use its built-in knowledge of the XHTML DTD.)</p>
-
-<p class="note"><strong>Note:</strong> Typically, implementations
- choose to ignore external subsets.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>Consider an element EXAMPLE with an attribute "notation" that has a
- default value of "decimal". The DTD fragment might be</p>
-
- <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
-
- <p>If the style sheet contains the rules</p>
-
-<pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>the first rule will not match elements whose "notation" attribute
- is set by default, i.e. not set explicitly. To catch all cases, the
- attribute selector for the default value must be dropped:</p>
-
-<pre>EXAMPLE { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is
- more specific than the tag
- selector alone, the style declarations in the second rule will override
- those in the first for elements that have a "notation" attribute value
- of "octal". Care has to be taken that all property declarations that
- are to apply only to the default case are overridden in the non-default
- cases' style rules.</p>
-
-</div>
-
-<h3><a name=class-html>6.4. Class selectors</a></h3>
-
-<p>Working with HTML, authors may use the period (U+002E,
- <code>.</code>) notation as an alternative to the <code>~=</code>
- notation when representing the <code>class</code> attribute. Thus, for
- HTML, <code>div.value</code> and <code>div[class~=value]</code> have
- the same meaning. The attribute value must immediately follow the
- "period" (<code>.</code>).</p>
-
-<p>UAs may apply selectors using the period (.) notation in XML
- documents if the UA has namespace-specific knowledge that allows it to
- determine which attribute is the "class" attribute for the
- respective namespace. One such example of namespace-specific knowledge
- is the prose in the specification for a particular namespace (e.g. SVG
- 1.0 <a href="#refsSVG">[SVG]</a> describes the <a
- href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG
- "class" attribute</a> and how a UA should interpret it, and
- similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a
- href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML
- "class" attribute</a>.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>We can assign style information to all elements with
- <code>class~="pastoral"</code> as follows:</p>
-
- <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>or just</p>
-
- <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>The following assigns style only to H1 elements with
- <code>class~="pastoral"</code>:</p>
-
- <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>
-
- <p>Given these rules, the first H1 instance below would not have
- green text, while the second would:</p>
-
- <pre><H1>Not green</H1>
-<H1 class="pastoral">Very green</H1></pre>
-
-</div>
-
-<p>To represent a subset of "class" values, each value must be preceded
- by a ".", in any order.</P>
-
-<div class="example">
-
- <p>CSS example:</p>
-
- <p>The following rule matches any P element whose "class" attribute
- has been assigned a list of <a
- href="#whitespace">whitespace</a>-separated values that includes
- "pastoral" and "marine":</p>
-
- <pre>p.pastoral.marine { color: green }</pre>
-
- <p>This rule matches when <code>class="pastoral blue aqua
- marine"</code> but does not match for <code>class="pastoral
- blue"</code>.</p>
-
-</div>
-
-<p class="note"><strong>Note:</strong> Because CSS gives considerable
- power to the "class" attribute, authors could conceivably design their
- own "document language" based on elements with almost no associated
- presentation (such as DIV and SPAN in HTML) and assigning style
- information through the "class" attribute. Authors should avoid this
- practice since the structural elements of a document language often
- have recognized and accepted meanings and author-defined classes may
- not.</p>
-
-<p class="note"><strong>Note:</strong> If an element has multiple
- class attributes, their values must be concatenated with spaces
- between the values before searching for the class. As of this time the
- working group is not aware of any manner in which this situation can
- be reached, however, so this behavior is explicitly non-normative in
- this specification.</p>
-
-<h3><a name=id-selectors>6.5. ID selectors</a></h3>
-
-<p>Document languages may contain attributes that are declared to be
- of type ID. What makes attributes of type ID special is that no two
- such attributes can have the same value in a document, regardless of
- the type of the elements that carry them; whatever the document
- language, an ID typed attribute can be used to uniquely identify its
- element. In HTML all ID attributes are named "id"; XML applications
- may name ID attributes differently, but the same restriction
- applies.</p>
-
-<p>An ID-typed attribute of a document language allows authors to
- assign an identifier to one element instance in the document tree. W3C
- ID selectors represent an element instance based on its identifier. An
- ID selector contains a "number sign" (U+0023,
- <code>#</code>) immediately followed by the ID value, which must be an
- identifier.</p>
-
-<p>Selectors does not specify how a UA knows the ID-typed attribute of
- an element. The UA may, e.g., read a document's DTD, have the
- information hard-coded or ask the user.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following ID selector represents an <code>h1</code> element
- whose ID-typed attribute has the value "chapter1":</p>
- <pre>h1#chapter1</pre>
- <p>The following ID selector represents any element whose ID-typed
- attribute has the value "chapter1":</p>
- <pre>#chapter1</pre>
- <p>The following selector represents any element whose ID-typed
- attribute has the value "z98y".</p>
- <pre>*#z98y</pre>
-</div>
-
-<p class="note"><strong>Note.</strong> In XML 1.0 <a
- href="#refsXML10">[XML10]</a>, the information about which attribute
- contains an element's IDs is contained in a DTD or a schema. When
- parsing XML, UAs do not always read the DTD, and thus may not know
- what the ID of an element is (though a UA may have namespace-specific
- knowledge that allows it to determine which attribute is the ID
- attribute for that namespace). If a style sheet designer knows or
- suspects that a UA may not know what the ID of an element is, he
- should use normal attribute selectors instead:
- <code>[name=p371]</code> instead of <code>#p371</code>. Elements in
- XML 1.0 documents without a DTD do not have IDs at all.</p>
-
-<p>If an element has multiple ID attributes, all of them must be
- treated as IDs for that element for the purposes of the ID
- selector. Such a situation could be reached using mixtures of xml:id,
- DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
-
-<h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>
-
-<p>The pseudo-class concept is introduced to permit selection based on
- information that lies outside of the document tree or that cannot be
- expressed using the other simple selectors.</p>
-
-<p>A pseudo-class always consists of a "colon"
- (<code>:</code>) followed by the name of the pseudo-class and
- optionally by a value between parentheses.</p>
-
-<p>Pseudo-classes are allowed in all sequences of simple selectors
- contained in a selector. Pseudo-classes are allowed anywhere in
- sequences of simple selectors, after the leading type selector or
- universal selector (possibly omitted). Pseudo-class names are
- case-insensitive. Some pseudo-classes are mutually exclusive, while
- others can be applied simultaneously to the same
- element. Pseudo-classes may be dynamic, in the sense that an element
- may acquire or lose a pseudo-class while a user interacts with the
- document.</p>
-
-
-<h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>
-
-<p>Dynamic pseudo-classes classify elements on characteristics other
- than their name, attributes, or content, in principle characteristics
- that cannot be deduced from the document tree.</p>
-
-<p>Dynamic pseudo-classes do not appear in the document source or
- document tree.</p>
-
-
-<h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>
-
-<p>User agents commonly display unvisited links differently from
- previously visited ones. Selectors
- provides the pseudo-classes <code>:link</code> and
- <code>:visited</code> to distinguish them:</p>
-
-<ul>
- <li>The <code>:link</code> pseudo-class applies to links that have
- not yet been visited.
- </li>
- <li>The <code>:visited</code> pseudo-class applies once the link has
- been visited by the user.
- </li>
-</ul>
-
-<p>After some amount of time, user agents may choose to return a
- visited link to the (unvisited) ':link' state.</p>
-
-<p>The two states are mutually exclusive.</p>
-
-<div class="example">
-
- <p>Example:</p>
-
- <p>The following selector represents links carrying class
- <code>external</code> and already visited:</p>
-
- <pre>a.external:visited</pre>
-
-</div>
-
-<p class="note"><strong>Note:</strong> It is possible for style sheet
- authors to abuse the :link and :visited pseudo-classes to determine
- which sites a user has visited without the user's consent.
-
-<p>UAs may therefore treat all links as unvisited links, or implement
- other measures to preserve the user's privacy while rendering visited
- and unvisited links differently.</p>
-
-<h5>The <a name=useraction-pseudos>user action pseudo-classes
- :hover, :active, and :focus</a></h5>
-
-<p>Interactive user agents sometimes change the rendering in response
- to user actions. Selectors provides
- three pseudo-classes for the selection of an element the user is
- acting on.</p>
-
-<ul>
-
- <li>The <code>:hover</code> pseudo-class applies while the user
- designates an element with a pointing device, but does not activate
- it. For example, a visual user agent could apply this pseudo-class
- when the cursor (mouse pointer) hovers over a box generated by the
- element. User agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> do not have to support this pseudo-class. Some conforming
- user agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> may not be able to support this pseudo-class (e.g., a pen
- device that does not detect hovering).
- </li>
-
- <li>The <code>:active</code> pseudo-class applies while an element
- is being activated by the user. For example, between the times the
- user presses the mouse button and releases it.
- </li>
-
- <li>The <code>:focus</code> pseudo-class applies while an element
- has the focus (accepts keyboard or mouse events, or other forms of
- input).
- </li>
-
-</ul>
-
-<p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.</p>
-
-<p>These pseudo-classes are not mutually exclusive. An element may
- match several pseudo-classes at the same time.</p>
-
-<p>Selectors doesn't define if the parent of an element that is
- ':active' or ':hover' is also in that state.</p>
-
-<div class="example">
- <p>Examples:</p>
- <pre>a:link /* unvisited links */
-a:visited /* visited links */
-a:hover /* user hovers */
-a:active /* active links */</pre>
- <p>An example of combining dynamic pseudo-classes:</p>
- <pre>a:focus
-a:focus:hover</pre>
- <p>The last selector matches <code>a</code> elements that are in
- the pseudo-class :focus and in the pseudo-class :hover.</p>
-</div>
-
-<p class="note"><strong>Note:</strong> An element can be both ':visited'
- and ':active' (or ':link' and ':active').</p>
-
-<h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>
-
-<p>Some URIs refer to a location within a resource. This kind of URI
- ends with a "number sign" (#) followed by an anchor
- identifier (called the fragment identifier).</p>
-
-<p>URIs with fragment identifiers link to a certain element within the
- document, known as the target element. For instance, here is a URI
- pointing to an anchor named <code>section_2</code> in an HTML
- document:</p>
-
-<pre>http://example.com/html/top.html#section_2</pre>
-
-<p>A target element can be represented by the <code>:target</code>
- pseudo-class. If the document's URI has no fragment identifier, then
- the document has no target element.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>p.note:target</pre>
- <p>This selector represents a <code>p</code> element of class
- <code>note</code> that is the target element of the referring
- URI.</p>
-</div>
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>Here, the <code>:target</code> pseudo-class is used to make the
- target element red and place an image before it, if there is one:</p>
- <pre>*:target { color : red }
-*:target::before { content : url(target.png) }</pre>
-</div>
-
-<h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>
-
-<p>If the document language specifies how the human language of an
- element is determined, it is possible to write selectors that
- represent an element based on its language. For example, in HTML <a
- href="#refsHTML4">[HTML4]</a>, the language is determined by a
- combination of the <code>lang</code> attribute, the <code>meta</code>
- element, and possibly by information from the protocol (such as HTTP
- headers). XML uses an attribute called <code>xml:lang</code>, and
- there may be other document language-specific methods for determining
- the language.</p>
-
-<p>The pseudo-class <code>:lang(C)</code> represents an element that
- is in language C. Whether an element is represented by a
- <code>:lang()</code> selector is based solely on the identifier C
- being either equal to, or a hyphen-separated substring of, the
- element's language value, in the same way as if performed by the <a
- href="#attribute-representation">'|='</a> operator in attribute
- selectors. The identifier C does not have to be a valid language
- name.</p>
-
-<p>C must not be empty. (If it is, the selector is invalid.)</p>
-
-<p class="note"><strong>Note:</strong> It is recommended that
- documents and protocols indicate language using codes from RFC 3066 <a
- href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of
- "xml:lang" attributes in the case of XML-based documents <a
- href="#refsXML10">[XML10]</a>. See <a
- href="http://www.w3.org/International/questions/qa-lang-2or3.html">
- "FAQ: Two-letter or three-letter language codes."</a></p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The two following selectors represent an HTML document that is in
- Belgian, French, or German. The two next selectors represent
- <code>q</code> quotations in an arbitrary element in Belgian, French,
- or German.</p>
- <pre>html:lang(fr-be)
-html:lang(de)
-:lang(fr-be) > q
-:lang(de) > q</pre>
-</div>
-
-<h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>
-
-<h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>
-
-<p>The <code>:enabled</code> pseudo-class allows authors to customize
- the look of user interface elements that are enabled — which the
- user can select or activate in some fashion (e.g. clicking on a button
- with a mouse). There is a need for such a pseudo-class because there
- is no way to programmatically specify the default appearance of say,
- an enabled <code>input</code> element without also specifying what it
- would look like when it was disabled.</p>
-
-<p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the
- author to specify precisely how a disabled or inactive user interface
- element should look.</p>
-
-<p>Most elements will be neither enabled nor disabled. An element is
- enabled if the user can either activate it or transfer the focus to
- it. An element is disabled if it could be enabled, but the user cannot
- presently activate it or transfer focus to it.</p>
-
-
-<h5><a name=checked>The :checked pseudo-class</a></h5>
-
-<p>Radio and checkbox elements can be toggled by the user. Some menu
- items are "checked" when the user selects them. When such elements are
- toggled "on" the <code>:checked</code> pseudo-class applies. The
- <code>:checked</code> pseudo-class initially applies to such elements
- that have the HTML4 <code>selected</code> and <code>checked</code>
- attributes as described in <a
- href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section
- 17.2.1 of HTML4</a>, but of course the user can toggle "off" such
- elements in which case the <code>:checked</code> pseudo-class would no
- longer apply. While the <code>:checked</code> pseudo-class is dynamic
- in nature, and is altered by user action, since it can also be based
- on the presence of the semantic HTML4 <code>selected</code> and
- <code>checked</code> attributes, it applies to all media.
-
-
-<h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>
-
-<div class="note">
-
- <p>Radio and checkbox elements can be toggled by the user, but are
- sometimes in an indeterminate state, neither checked nor unchecked.
- This can be due to an element attribute, or DOM manipulation.</p>
-
- <p>A future version of this specification may introduce an
- <code>:indeterminate</code> pseudo-class that applies to such elements.
- <!--While the <code>:indeterminate</code> pseudo-class is dynamic in
- nature, and is altered by user action, since it can also be based on
- the presence of an element attribute, it applies to all media.</p>
-
- <p>Components of a radio-group initialized with no pre-selected choice
- are an example of :indeterminate state.--></p>
-
-</div>
-
-
-<h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>
-
-<p>Selectors introduces the concept of <dfn>structural
- pseudo-classes</dfn> to permit selection based on extra information that
- lies in
- the document tree but cannot be represented by other simple selectors or
- combinators.
-
-<p>Note that standalone pieces of PCDATA (text nodes in the DOM) are
- not counted when calculating the position of an element in the list of
- children of its parent. When calculating the position of an element in
- the list of children of its parent, the index numbering starts at 1.
-
-
-<h5><a name=root-pseudo>:root pseudo-class</a></h5>
-
-<p>The <code>:root</code> pseudo-class represents an element that is
- the root of the document. In HTML 4, this is always the
- <code>HTML</code> element.
-
-
-<h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>
-
-<p>The
- <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>before</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. In
- other words, this matches the <var>b</var>th child of an element after
- all the children have been split into groups of <var>a</var> elements
- each. For example, this allows the selectors to address every other
- row in a table, and could be used to alternate the color
- of paragraph text in a cycle of four. The <var>a</var> and
- <var>b</var> values must be zero, negative integers or positive
- integers. The index of the first child of an element is 1.
-
-<p>In addition to this, <code>:nth-child()</code> can take
- '<code>odd</code>' and '<code>even</code>' as arguments instead.
- '<code>odd</code>' has the same signification as <code>2n+1</code>,
- and '<code>even</code>' has the same signification as <code>2n</code>.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
-tr:nth-child(odd) /* same */
-tr:nth-child(2n) /* represents every even row of an HTML table */
-tr:nth-child(even) /* same */
-
-/* Alternate paragraph colours in CSS */
-p:nth-child(4n+1) { color: navy; }
-p:nth-child(4n+2) { color: green; }
-p:nth-child(4n+3) { color: maroon; }
-p:nth-child(4n+4) { color: purple; }</pre>
-</div>
-
-<p>When <var>a</var>=0, no repeating is used, so for example
- <code>:nth-child(0n+5)</code> matches only the fifth child. When
- <var>a</var>=0, the <var>a</var><code>n</code> part need not be
- included, so the syntax simplifies to
- <code>:nth-child(<var>b</var>)</code> and the last example simplifies
- to <code>:nth-child(5)</code>.
-
-<div class="example">
- <p>Examples:</p>
-<pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */
-foo:nth-child(1) /* same */</pre>
-</div>
-
-<p>When <var>a</var>=1, the number may be omitted from the rule.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selectors are therefore equivalent:</p>
-<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
-bar:nth-child(n+0) /* same */
-bar:nth-child(n) /* same */
-bar /* same but lower specificity (0,0,1) */</pre>
-</div>
-
-<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In
- such a case, the <var>b</var> part may be omitted.
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
-tr:nth-child(2n) /* same */</pre>
-</div>
-
-<p>If both <var>a</var> and <var>b</var> are equal to zero, the
- pseudo-class represents no element in the document tree.</p>
-
-<p>The value <var>a</var> can be negative, but only the positive
- values of <var>a</var><code>n</code>+<var>b</var>, for
- <code>n</code>≥0, may represent an element in the document
- tree.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
-</div>
-
-<p>When the value <var>b</var> is negative, the "+" character in the
- expression must be removed (it is effectively replaced by the "-"
- character indicating the negative value of <var>b</var>).</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>: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 */</pre>
-</div>
-
-
-<h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>after</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. See
- <code>:nth-child()</code> pseudo-class for the syntax of its argument.
- It also accepts the '<code>even</code>' and '<code>odd</code>' values
- as arguments.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
-
-foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
- counting from the last one */</pre>
-</div>
-
-
-<h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>before</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. In other words, this matches the <var>b</var>th child
- of that type after all the children of that type have been split into
- groups of a elements each. See <code>:nth-child()</code> pseudo-class
- for the syntax of its argument. It also accepts the
- '<code>even</code>' and '<code>odd</code>' values.
-
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>This allows an author to alternate the position of floated images:</p>
-<pre>img:nth-of-type(2n+1) { float: right; }
-img:nth-of-type(2n) { float: left; }</pre>
-</div>
-
-
-<h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>after</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. See <code>:nth-child()</code> pseudo-class for the
- syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>'
- values.
-
-
-<div class="example">
- <p>Example:</p>
-
- <p>To represent all <code>h2</code> children of an XHTML
- <code>body</code> except the first and last, one could use the
- following selector:</p>
- <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
- <p>In this case, one could also use <code>:not()</code>, although the
- selector ends up being just as long:</p>
- <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
-</div>
-
-
-<h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
- pseudo-class
- represents an element that is the first child of some other element.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- the first child of a <code>div</code> element:</p>
- <pre>div > p:first-child</pre>
- <p>This selector can represent the <code>p</code> inside the
- <code>div</code> of the following fragment:</p>
- <pre><p> The last P before the note.</p>
-<div class="note">
- <p> The first P inside the note.</p>
-</div></pre>
- but cannot represent the second <code>p</code> in the following
- fragment:
- <pre><p> The last P before the note.</p>
-<div class="note">
- <h2> Note </h2>
- <p> The first P inside the note.</p>
-</div></pre>
- <p>The following two selectors are usually equivalent:</p>
- <pre>* > a:first-child /* a is first child of any element */
-a:first-child /* Same (assuming a is not the root element) */</pre>
-</div>
-
-<h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
- pseudo-class
- represents an element that is the last child of some other element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a list item <code>li</code> that
- is the last child of an ordered list <code>ol</code>.
- <pre>ol > li:last-child</pre>
-</div>
-
-<h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
- pseudo-class
- represents an element that is the first sibling of its type in the list of
- children of its parent element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a definition title
- <code>dt</code> inside a definition list <code>dl</code>, this
- <code>dt</code> being the first of its type in the list of children of
- its parent element.</p>
- <pre>dl dt:first-of-type</pre>
- <p>It is a valid description for the first two <code>dt</code>
- elements in the following example but not for the third one:</p>
-<pre><dl>
- <dt>gigogne</dt>
- <dd>
- <dl>
- <dt>fusée</dt>
- <dd>multistage rocket</dd>
- <dt>table</dt>
- <dd>nest of tables</dd>
- </dl>
- </dd>
-</dl></pre>
-</div>
-
-<h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-of-type(1)</code>. The
- <code>:last-of-type</code> pseudo-class represents an element that is
- the last sibling of its type in the list of children of its parent
- element.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents the last data cell
- <code>td</code> of a table row.</p>
- <pre>tr > td:last-of-type</pre>
-</div>
-
-<h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children. Same as
- <code>:first-child:last-child</code> or
- <code>:nth-child(1):nth-last-child(1)</code>, but with a lower
- specificity.</p>
-
-<h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children with the same element name. Same
- as <code>:first-of-type:last-of-type</code> or
- <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
- specificity.</p>
-
-
-<h5><a name=empty-pseudo></a>:empty pseudo-class</h5>
-
-<p>The <code>:empty</code> pseudo-class represents an element that has
- no children at all. In terms of the DOM, only element nodes and text
- nodes (including CDATA nodes and entity references) whose data has a
- non-zero length must be considered as affecting emptiness; comments,
- PIs, and other nodes must not affect whether an element is considered
- empty or not.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p><code>p:empty</code> is a valid representation of the following fragment:
- </p>
- <pre><p></p></pre>
- <p><code>foo:empty</code> is not a valid representation for the
- following fragments:</p>
- <pre><foo>bar</foo></pre>
- <pre><foo><bar>bla</bar></foo></pre>
- <pre><foo>this is not <bar>:empty</bar></foo></pre>
-</div>
-
-<h4><a name=content-selectors>6.6.6. Blank</a></h4>
-<!-- It's the Return of Appendix H!!! Run away! -->
-
-<p>This section intentionally left blank.</p>
-<!-- (used to be :contains()) -->
-
-<h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>
-
-<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
- functional notation taking a <a href="#simple-selectors-dfn">simple
- selector</a> (excluding the negation pseudo-class itself and
- pseudo-elements) as an argument. It represents an element that is not
- represented by the argument.
-
- <!-- pseudo-elements are not simple selectors, so the above paragraph
-may be a bit confusing -->
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following CSS selector matches all <code>button</code>
- elements in an HTML document that are not disabled.</p>
- <pre>button:not([DISABLED])</pre>
- <p>The following selector represents all but <code>FOO</code>
- elements.</p>
- <pre>*:not(FOO)</pre>
- <p>The following group of selectors represents all HTML elements
- except links.</p>
- <pre>html|*:not(:link):not(:visited)</pre>
-</div>
-
-<p>Default namespace declarations do not affect the argument of the
- negation pseudo-class unless the argument is a universal selector or a
- type selector.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>Assuming that the default namespace is bound to
- "http://example.com/", the following selector represents all
- elements that are not in that namespace:</p>
- <pre>*|*:not(*)</pre>
- <p>The following CSS selector matches any element being hovered,
- regardless of its namespace. In particular, it is not limited to
- only matching elements in the default namespace that are not being
- hovered, and elements not in the default namespace don't match the
- rule when they <em>are</em> being hovered.</p>
- <pre>*|*:not(:hover)</pre>
-</div>
-
-<p class="note"><strong>Note</strong>: the :not() pseudo allows
- useless selectors to be written. For instance <code>:not(*|*)</code>,
- which represents no element at all, or <code>foo:not(bar)</code>,
- which is equivalent to <code>foo</code> but with a higher
- specificity.</p>
-
-<h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>
-
-<p>Pseudo-elements create abstractions about the document tree beyond
- those specified by the document language. For instance, document
- languages do not offer mechanisms to access the first letter or first
- line of an element's content. Pseudo-elements allow designers to refer
- to this otherwise inaccessible information. Pseudo-elements may also
- provide designers a way to refer to content that does not exist in the
- source document (e.g., the <code>::before</code> and
- <code>::after</code> pseudo-elements give access to generated
- content).</p>
-
-<p>A pseudo-element is made of two colons (<code>::</code>) followed
- by the name of the pseudo-element.</p>
-
-<p>This <code>::</code> notation is introduced by the current document
- in order to establish a discrimination between pseudo-classes and
- pseudo-elements. For compatibility with existing style sheets, user
- agents must also accept the previous one-colon notation for
- pseudo-elements introduced in CSS levels 1 and 2 (namely,
- <code>:first-line</code>, <code>:first-letter</code>,
- <code>:before</code> and <code>:after</code>). This compatibility is
- not allowed for the new pseudo-elements introduced in CSS level 3.</p>
-
-<p>Only one pseudo-element may appear per selector, and if present it
- must appear after the sequence of simple selectors that represents the
- <a href="#subject">subjects</a> of the selector. <span class="note">A
-future version of this specification may allow multiple
-pesudo-elements per selector.</span></p>
-
-<h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>
-
-<p>The <code>::first-line</code> pseudo-element describes the contents
- of the first formatted line of an element.
-
-<div class="example">
- <p>CSS example:</p>
- <pre>p::first-line { text-transform: uppercase }</pre>
- <p>The above rule means "change the letters of the first line of every
- paragraph to uppercase".</p>
-</div>
-
-<p>The selector <code>p::first-line</code> does not match any real
- HTML element. It does match a pseudo-element that conforming user
- agents will insert at the beginning of every paragraph.</p>
-
-<p>Note that the length of the first line depends on a number of
- factors, including the width of the page, the font size, etc. Thus,
- an ordinary HTML paragraph such as:</p>
-
-<pre>
-<P>This is a somewhat long HTML
-paragraph that will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the lines of which happen to be broken as follows:
-
-<pre>
-THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
-will be broken into several lines. The first
-line will be identified by a fictional tag
-sequence. The other lines will be treated as
-ordinary lines in the paragraph.
-</pre>
-
-<p>This paragraph might be "rewritten" by user agents to include the
- <em>fictional tag sequence</em> for <code>::first-line</code>. This
- fictional tag sequence helps to show how properties are inherited.</p>
-
-<pre>
-<P><b><P::first-line></b> This is a somewhat long HTML
-paragraph that <b></P::first-line></b> will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>If a pseudo-element breaks up a real element, the desired effect
- can often be described by a fictional tag sequence that closes and
- then re-opens the element. Thus, if we mark up the previous paragraph
- with a <code>span</code> element:</p>
-
-<pre>
-<P><b><SPAN class="test"></b> This is a somewhat long HTML
-paragraph that will be broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the user agent could simulate start and end tags for
- <code>span</code> when inserting the fictional tag sequence for
- <code>::first-line</code>.
-
-<pre>
-<P><P::first-line><b><SPAN class="test"></b> This is a
-somewhat long HTML
-paragraph that will <b></SPAN></b></P::first-line><b><SPAN
- class="test"></b> be
-broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>In CSS, the <code>::first-line</code> pseudo-element can only be
- attached to a block-level element, an inline-block, a table-caption,
- or a table-cell.</p>
-
-<p><a name="first-formatted-line"></a>The "first formatted line" of an
- element may occur inside a
- block-level descendant in the same flow (i.e., a block-level
- descendant that is not positioned and not a float). E.g., the first
- line of the <code>div</code> in <code><DIV><P>This
- line...</P></DIV></code> is the first line of the <code>p</code>
- (assuming
- that both <code>p</code> and <code>div</code> are block-level).
-
-<p>The first line of a table-cell or inline-block cannot be the first
- formatted line of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first formatted line of the
- <code>div</code> is not the line "Hello".
-
-<p class="note">Note that the first line of the <code>p</code> in this
- fragment: <code><p><br>First...</code> doesn't contain any
- letters (assuming the default style for <code>br</code> in HTML
- 4). The word "First" is not on the first formatted line.
-
-<p>A UA should act as if the fictional start tags of the
- <code>::first-line</code> pseudo-elements were nested just inside the
- innermost enclosing block-level element. (Since CSS1 and CSS2 were
- silent on this case, authors should not rely on this behavior.) Here
- is an example. The fictional tag sequence for</p>
-
-<pre>
-<DIV>
- <P>First paragraph</P>
- <P>Second paragraph</P>
-</DIV>
-</pre>
-
-<p>is</p>
-
-<pre>
-<DIV>
- <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
- <P><P::first-line>Second paragraph</P::first-line></P>
-</DIV>
-</pre>
-
-<p>The <code>::first-line</code> pseudo-element is similar to an
- inline-level element, but with certain restrictions. In CSS, the
- following properties apply to a <code>::first-line</code>
- pseudo-element: font properties, color property, background
- properties, 'word-spacing', 'letter-spacing', 'text-decoration',
- 'vertical-align', 'text-transform', 'line-height'. UAs may apply other
- properties as well.</p>
-
-
-<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
-
-<p>The <code>::first-letter</code> pseudo-element represents the first
- letter of the first line of a block, if it is not preceded by any
- other content (such as images or inline tables) on its line. The
- ::first-letter pseudo-element may be used for "initial caps" and "drop
- caps", which are common typographical effects. This type of initial
- letter is similar to an inline-level element if its 'float' property
- is 'none'; otherwise, it is similar to a floated element.</p>
-
-<p>In CSS, these are the properties that apply to <code>::first-letter</code>
- pseudo-elements: font properties, 'text-decoration', 'text-transform',
- 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
- 'float', 'vertical-align' (only if 'float' is 'none'), margin
- properties, padding properties, border properties, color property,
- background properties. UAs may apply other properties as well. To
- allow UAs to render a typographically correct drop cap or initial cap,
- the UA may choose a line-height, width and height based on the shape
- of the letter, unlike for normal elements.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>This example shows a possible rendering of an initial cap. Note
- that the 'line-height' that is inherited by the
- <code>::first-letter</code>
- pseudo-element is 1.1, but the UA in this example has computed the
- height of the first letter differently, so that it doesn't cause any
- unnecessary space between the first two lines. Also note that the
- fictional start tag of the first letter is inside the <span>span</span>,
- and thus
- the font weight of the first letter is normal, not bold as the <span>span</span>:
-<pre>
-p { line-height: 1.1 }
-p::first-letter { font-size: 3em; font-weight: normal }
-span { font-weight: bold }
-...
-<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
-Erbarremt over my en mijn benaeuwde vesten<br>
-En arme burgery, en op mijn volcx gebed<br>
-En dagelix geschrey de bange stad ontzet.
-</pre>
- <div class="figure">
- <p><img src="initial-cap.png"
- alt="Image illustrating the ::first-letter pseudo-element">
- </div>
-</div>
-
-<div class="example">
- <p>The following CSS will make a drop cap initial letter span about two
- lines:</p>
-
-<pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<HTML>
- <HEAD>
- <TITLE>Drop cap initial letter</TITLE>
- <STYLE type="text/css">
- P { font-size: 12pt; line-height: 1.2 }
- P::first-letter { font-size: 200%; font-weight: bold; float: left }
- SPAN { text-transform: uppercase }
- </STYLE>
- </HEAD>
- <BODY>
- <P><SPAN>The first</SPAN> few words of an article
- in The Economist.</P>
- </BODY>
-</HTML>
-</pre>
-
- <p>This example might be formatted as follows:</p>
-
- <div class="figure">
- <P><img src="first-letter.gif"
- alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements">
- </p>
- </div>
-
- <p>The <span class="index-inst" title="fictional tag
-sequence">fictional tag sequence</span> is:</p>
-
-<pre>
-<P>
-<SPAN>
-<P::first-letter>
-T
-</P::first-letter>he first
-</SPAN>
-few words of an article in the Economist.
-</P>
-</pre>
-
- <p>Note that the <code>::first-letter</code> pseudo-element tags abut
- the content (i.e., the initial character), while the ::first-line
- pseudo-element start tag is inserted right after the start tag of the
- block element.</p></div>
-
-<p>In order to achieve traditional drop caps formatting, user agents
- may approximate font sizes, for example to align baselines. Also, the
- glyph outline may be taken into account when formatting.</p>
-
-<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
- "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
- punctuation classes), that precedes or follows the first letter should
- be included. <a href="#refsUNICODE">[UNICODE]</a></p>
-
-<div class="figure">
- <P><img src="first-letter2.gif" alt="Quotes that precede the
-first letter should be included."></p>
-</div>
-
-<p>The <code>::first-letter</code> also applies if the first letter is
- in fact a digit, e.g., the "6" in "67 million dollars is a lot of
- money."</p>
-
-<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
- block, list-item, table-cell, table-caption, and inline-block
- elements. <span class="note">A future version of this specification
-may allow this pesudo-element to apply to more element
-types.</span></p>
-
-<p>The <code>::first-letter</code> pseudo-element can be used with all
- such elements that contain text, or that have a descendant in the same
- flow that contains text. A UA should act as if the fictional start tag
- of the ::first-letter pseudo-element is just before the first text of
- the element, even if that first text is in a descendant.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The fictional tag sequence for this HTMLfragment:
-<pre><div>
-<p>The first text.</pre>
- <p>is:
-<pre><div>
-<p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>
-</div>
-
-<p>The first letter of a table-cell or inline-block cannot be the
- first letter of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first letter of the <code>div</code> is
- not the
- letter "H". In fact, the <code>div</code> doesn't have a first letter.
-
-<p>The first letter must occur on the <a
- href="#first-formatted-line">first formatted line.</a> For example, in
- this fragment: <code><p><br>First...</code> the first line
- doesn't contain any letters and <code>::first-letter</code> doesn't
- match anything (assuming the default style for <code>br</code> in HTML
- 4). In particular, it does not match the "F" of "First."
-
-<p>In CSS, if an element is a list item ('display: list-item'), the
- <code>::first-letter</code> applies to the first letter in the
- principal box after the marker. UAs may ignore
- <code>::first-letter</code> on list items with 'list-style-position:
- inside'. If an element has <code>::before</code> or
- <code>::after</code> content, the <code>::first-letter</code> applies
- to the first letter of the element <em>including</em> that content.
-
-<div class="example">
- <p>Example:</p>
-
- <p>After the rule 'p::before {content: "Note: "}', the selector
- 'p::first-letter' matches the "N" of "Note".</p>
-</div>
-
-<p>Some languages may have specific rules about how to treat certain
- letter combinations. In Dutch, for example, if the letter combination
- "ij" appears at the beginning of a word, both letters should be
- considered within the <code>::first-letter</code> pseudo-element.
-
-<p>If the letters that would form the ::first-letter are not in the
- same element, such as "'T" in <code><p>'<em>T...</code>, the UA
- may create a ::first-letter pseudo-element from one of the elements,
- both elements, or simply not create a pseudo-element.</p>
-
-<p>Similarly, if the first letter(s) of the block are not at the start
- of the line (for example due to bidirectional reordering), then the UA
- need not create the pseudo-element(s).
-
-<div class="example">
- <p>Example:</p>
-
- <p><a name="overlapping-example">The following example</a> illustrates
- how overlapping pseudo-elements may interact. The first letter of
- each P element will be green with a font size of '24pt'. The rest of
- the first formatted line will be 'blue' while the rest of the
- paragraph will be 'red'.</p>
-
-<pre>p { color: red; font-size: 12pt }
-p::first-letter { color: green; font-size: 200% }
-p::first-line { color: blue }
-
-<P>Some text that ends up on two lines</P></pre>
-
- <p>Assuming that a line break will occur before the word "ends", the
-<span class="index-inst" title="fictional tag sequence">fictional tag
-sequence</span> for this fragment might be:</p>
-
-<pre><P>
-<P::first-line>
-<P::first-letter>
-S
-</P::first-letter>ome text that
-</P::first-line>
-ends up on two lines
-</P></pre>
-
- <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
- element. Properties set on <code>::first-line</code> are inherited by
- <code>::first-letter</code>, but are overridden if the same property is
- set on
- <code>::first-letter</code>.</p>
-</div>
-
-
-<h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection
- pseudo-element</a></h4>
-
-<p>The <code>::selection</code> pseudo-element applies to the portion
- of a document that has been highlighted by the user. This also
- applies, for example, to selected text within an editable text
- field. This pseudo-element should not be confused with the <code><a
- href="#checked">:checked</a></code> pseudo-class (which used to be
- named <code>:selected</code>)
-
-<p>Although the <code>::selection</code> pseudo-element is dynamic in
- nature, and is altered by user action, it is reasonable to expect that
- when a UA re-renders to a static medium (such as a printed page, see
- <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a
- dynamic medium (like screen), the UA may wish to transfer the current
- <code>::selection</code> state to that other medium, and have all the
- appropriate formatting and rendering take effect as well. This is not
- required — UAs may omit the <code>::selection</code>
- pseudo-element for static media.
-
-<p>These are the CSS properties that apply to <code>::selection</code>
- pseudo-elements: color, background, cursor (optional), outline
- (optional). The computed value of the 'background-image' property on
- <code>::selection</code> may be ignored.
-
-
-<h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>
-
-<p>The <code>::before</code> and <code>::after</code> pseudo-elements
- can be used to describe generated content before or after an element's
- content. They are explained in CSS 2.1 <a
- href="#refsCSS21">[CSS21]</a>.</p>
-
-<p>When the <code>::first-letter</code> and <code>::first-line</code>
- pseudo-elements are combined with <code>::before</code> and
- <code>::after</code>, they apply to the first letter or line of the
- element including the inserted text.</p>
-
-<h2><a name=combinators>8. Combinators</a></h2>
-
-<h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>
-
-<p>At times, authors may want selectors to describe an element that is
- the descendant of another element in the document tree (e.g., "an
- <code>EM</code> element that is contained within an <code>H1</code>
- element"). Descendant combinators express such a relationship. A
- descendant combinator is <a href="#whitespace">white space</a> that
- separates two sequences of simple selectors. A selector of the form
- "<code>A B</code>" represents an element <code>B</code> that is an
- arbitrary descendant of some ancestor element <code>A</code>.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>For example, consider the following selector:</p>
- <pre>h1 em</pre>
- <p>It represents an <code>em</code> element being the descendant of
- an <code>h1</code> element. It is a correct and valid, but partial,
- description of the following fragment:</p>
- <pre><h1>This <span class="myclass">headline
-is <em>very</em> important</span></h1></pre>
- <p>The following selector:</p>
- <pre>div * p</pre>
- <p>represents a <code>p</code> element that is a grandchild or later
- descendant of a <code>div</code> element. Note the whitespace on
- either side of the "*" is not part of the universal selector; the
- whitespace is a combinator indicating that the DIV must be the
- ancestor of some element, and that that element must be an ancestor
- of the P.</p>
-
- <p>The following selector, which combines descendant combinators and
- <a href="#attribute-selectors">attribute selectors</a>, represents an
- element that (1) has the <code>href</code> attribute set and (2) is
- inside a <code>p</code> that is itself inside a <code>div</code>:</p>
- <pre>div p *[href]</pre>
-</div>
-
-<h3><a name=child-combinators>8.2. Child combinators</a></h3>
-
-<p>A <dfn>child combinator</dfn> describes a childhood relationship
- between two elements. A child combinator is made of the
- "greater-than sign" (<code>></code>) character and
- separates two sequences of simple selectors.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- child of <code>body</code>:</p>
- <pre>body > p</pre>
- <p>The following example combines descendant combinators and child
- combinators.</p>
- <pre>div ol>li p</pre>
- <!-- LEAVE THOSE SPACES OUT! see below -->
- <p>It represents a <code>p</code> element that is a descendant of an
- <code>li</code> element; the <code>li</code> element must be the
- child of an <code>ol</code> element; the <code>ol</code> element must
- be a descendant of a <code>div</code>. Notice that the optional white
- space around the ">" combinator has been left out.</p>
-</div>
-
-<p>For information on selecting the first child of an element, please
- see the section on the <code><a
- href="#structural-pseudos">:first-child</a></code> pseudo-class
- above.</p>
-
-<h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>
-
-<p>There are two different sibling combinators: the adjacent sibling
- combinator and the general sibling combinator. In both cases,
- non-element nodes (e.g. text between elements) are ignored when
- considering adjacency of elements.</p>
-
-<h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>
-</h4>
-
-<p>The adjacent sibling combinator is made of the "plus
- sign" (U+002B, <code>+</code>) character that separates two
- sequences of simple selectors. The elements represented by the two
- sequences share the same parent in the document tree and the element
- represented by the first sequence immediately precedes the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element
- immediately following a <code>math</code> element:</p>
- <pre>math + p</pre>
- <p>The following selector is conceptually similar to the one in the
- previous example, except that it adds an attribute selector — it
- adds a constraint to the <code>h1</code> element, that it must have
- <code>class="opener"</code>:</p>
- <pre>h1.opener + h2</pre>
-</div>
-
-
-<h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a>
-</h4>
-
-<p>The general sibling combinator is made of the "tilde"
- (U+007E, <code>~</code>) character that separates two sequences of
- simple selectors. The elements represented by the two sequences share
- the same parent in the document tree and the element represented by
- the first sequence precedes (not necessarily immediately) the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>h1 ~ pre</pre>
- <p>represents a <code>pre</code> element following an <code>h1</code>. It
- is a correct and valid, but partial, description of:</p>
- <pre><h1>Definition of the function a</h1>
-<p>Function a(x) has to be applied to all figures in the table.</p>
-<pre>function a(x) = 12x/13.5</pre></pre>
-</div>
-
-<h2><a name=specificity>9. Calculating a selector's specificity</a></h2>
-
-<p>A selector's specificity is calculated as follows:</p>
-
-<ul>
- <li>count the number of ID selectors in the selector (= a)</li>
- <li>count the number of class selectors, attributes selectors, and
- pseudo-classes in the selector (= b)
- </li>
- <li>count the number of element names in the selector (= c)</li>
- <li>ignore pseudo-elements</li>
-</ul>
-
-<p>Selectors inside <a href="#negation">the negation pseudo-class</a>
- are counted like any other, but the negation itself does not count as
- a pseudo-class.</p>
-
-<p>Concatenating the three numbers a-b-c (in a number system with a
- large base) gives the specificity.</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>* /* a=0 b=0 c=0 -> specificity = 0 */
-LI /* a=0 b=0 c=1 -> specificity = 1 */
-UL LI /* a=0 b=0 c=2 -> specificity = 2 */
-UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
-H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
-UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
-LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
-#x34y /* a=1 b=0 c=0 -> specificity = 100 */
-#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
-</pre>
-</div>
-
-<p class="note"><strong>Note:</strong> the specificity of the styles
- specified in an HTML <code>style</code> attribute is described in CSS
- 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>
-
-<h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>
-
-<h3><a name=grammar>10.1. Grammar</a></h3>
-
-<p>The grammar below defines the syntax of Selectors. It is globally
- LL(1) and can be locally LL(2) (but note that most UA's should not use
- it directly, since it doesn't express the parsing conventions). The
- format of the productions is optimized for human consumption and some
- shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)
- are used:</p>
-
-<ul>
- <li><b>*</b>: 0 or more
- <li><b>+</b>: 1 or more
- <li><b>?</b>: 0 or 1
- <li><b>|</b>: separates alternatives
- <li><b>[ ]</b>: grouping</li>
-</ul>
-
-<p>The productions are:</p>
-
-<pre>selectors_group
- : selector [ COMMA S* selector ]*
- ;
-
-selector
- : simple_selector_sequence [ combinator simple_selector_sequence ]*
- ;
-
-combinator
- /* combinators can be surrounded by white space */
- : PLUS S* | GREATER S* | TILDE S* | S+
- ;
-
-simple_selector_sequence
- : [ type_selector | universal ]
- [ HASH | class | attrib | pseudo | negation ]*
- | [ HASH | class | attrib | pseudo | negation ]+
- ;
-
-type_selector
- : [ namespace_prefix ]? element_name
- ;
-
-namespace_prefix
- : [ IDENT | '*' ]? '|'
- ;
-
-element_name
- : IDENT
- ;
-
-universal
- : [ namespace_prefix ]? '*'
- ;
-
-class
- : '.' IDENT
- ;
-
-attrib
- : '[' S* [ namespace_prefix ]? IDENT S*
- [ [ PREFIXMATCH |
- SUFFIXMATCH |
- SUBSTRINGMATCH |
- '=' |
- INCLUDES |
- DASHMATCH ] S* [ IDENT | STRING ] S*
- ]? ']'
- ;
-
-pseudo
- /* '::' starts a pseudo-element, ':' a pseudo-class */
- /* Exceptions: :first-line, :first-letter, :before and :after. */
- /* Note that pseudo-elements are restricted to one per selector and */
- /* occur only in the last simple_selector_sequence. */
- : ':' ':'? [ IDENT | functional_pseudo ]
- ;
-
-functional_pseudo
- : FUNCTION S* expression ')'
- ;
-
-expression
- /* In CSS3, the expressions are identifiers, strings, */
- /* or of the form "an+b" */
- : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
- ;
-
-negation
- : NOT S* negation_arg S* ')'
- ;
-
-negation_arg
- : type_selector | universal | HASH | class | attrib | pseudo
- ;</pre>
-
-
-<h3><a name=lex>10.2. Lexical scanner</a></h3>
-
-<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see
- <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is
- case-insensitive.</p>
-
-<p>The two occurrences of "\377" represent the highest character
- number that current versions of Flex can deal with (decimal 255). They
- should be read as "\4177777" (decimal 1114111), which is the highest
- possible code point in Unicode/ISO-10646. <a
- href="#refsUNICODE">[UNICODE]</a></p>
-
-<pre>%option case-insensitive
-
-ident [-]?{nmstart}{nmchar}*
-name {nmchar}+
-nmstart [_a-z]|{nonascii}|{escape}
-nonascii [^\0-\177]
-unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
-escape {unicode}|\\[^\n\r\f0-9a-f]
-nmchar [_a-z0-9-]|{nonascii}|{escape}
-num [0-9]+|[0-9]*\.[0-9]+
-string {string1}|{string2}
-string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
-string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
-invalid {invalid1}|{invalid2}
-invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
-invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
-nl \n|\r\n|\r|\f
-w [ \t\r\n\f]*
-
-%%
-
-[ \t\r\n\f]+ return S;
-
-"~=" return INCLUDES;
-"|=" return DASHMATCH;
-"^=" return PREFIXMATCH;
-"$=" return SUFFIXMATCH;
-"*=" return SUBSTRINGMATCH;
-{ident} return IDENT;
-{string} return STRING;
-{ident}"(" return FUNCTION;
-{num} return NUMBER;
-"#"{name} return HASH;
-{w}"+" return PLUS;
-{w}">" return GREATER;
-{w}"," return COMMA;
-{w}"~" return TILDE;
-":not(" return NOT;
-@{ident} return ATKEYWORD;
-{invalid} return INVALID;
-{num}% return PERCENTAGE;
-{num}{ident} return DIMENSION;
-"<!--" return CDO;
-"-->" return CDC;
-
-"url("{w}{string}{w}")" return URI;
-"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI;
-U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;
-
-\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
-
-. return *yytext;</pre>
-
-
-<h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>
-
-<p>An important issue is the interaction of CSS selectors with XML
- documents in web clients that were produced prior to this
- document. Unfortunately, due to the fact that namespaces must be
- matched based on the URI which identifies the namespace, not the
- namespace prefix, some mechanism is required to identify namespaces in
- CSS by their URI as well. Without such a mechanism, it is impossible
- to construct a CSS style sheet which will properly match selectors in
- all cases against a random set of XML documents. However, given
- complete knowledge of the XML document to which a style sheet is to be
- applied, and a limited use of namespaces within the XML document, it
- is possible to construct a style sheet in which selectors would match
- elements and attributes correctly.</p>
-
-<p>It should be noted that a down-level CSS client will (if it
- properly conforms to CSS forward compatible parsing rules) ignore all
- <code>@namespace</code> at-rules, as well as all style rules that make
- use of namespace qualified element type or attribute selectors. The
- syntax of delimiting namespace prefixes in CSS was deliberately chosen
- so that down-level CSS clients would ignore the style rules rather
- than possibly match them incorrectly.</p>
-
-<p>The use of default namespaces in CSS makes it possible to write
- element type selectors that will function in both namespace aware CSS
- clients as well as down-level clients. It should be noted that
- down-level clients may incorrectly match selectors against XML
- elements in other namespaces.</p>
-
-<p>The following are scenarios and examples in which it is possible to
- construct style sheets which would function properly in web clients
- that do not implement this proposal.</p>
-
-<ol>
- <li>
-
- <p>The XML document does not use namespaces.</p>
-
- <ul>
-
- <li>In this case, it is obviously not necessary to declare or use
- namespaces in the style sheet. Standard CSS element type and
- attribute selectors will function adequately in a down-level
- client.
- </li>
-
- <li>In a CSS namespace aware client, the default behavior of
- element selectors matching without regard to namespace will
- function properly against all elements, since no namespaces are
- present. However, the use of specific element type selectors
- that
- match only elements that have no namespace ("<code>|name</code>")
- will guarantee that selectors will match only XML elements that
- do
- not have a declared namespace.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document defines a single, default namespace used
- throughout the document. No namespace prefixes are used in element
- names.</p>
-
- <ul>
-
- <li>In this case, a down-level client will function as if
- namespaces were not used in the XML document at all. Standard
- CSS
- element type and attribute selectors will match against all
- elements.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document does <b>not</b> use a default namespace, all
- namespace prefixes used are known to the style sheet author, and
- there is a direct mapping between namespace prefixes and namespace
- URIs. (A given prefix may only be mapped to one namespace URI
- throughout the XML document; there may be multiple prefixes mapped
- to the same URI).</p>
-
- <ul>
-
- <li>In this case, the down-level client will view and match
- element type and attribute selectors based on their fully
- qualified name, not the local part as outlined in the <a
- href="#typenmsp">Type selectors and Namespaces</a>
- section. CSS
- selectors may be declared using an escaped colon
- "<code>\:</code>"
- to describe the fully qualified names, e.g.
- "<code>html\:h1</code>" will match
- <code><html:h1></code>. Selectors using the qualified name
- will only match XML elements that use the same prefix. Other
- namespace prefixes used in the XML that are mapped to the same
- URI
- will not match as expected unless additional CSS style rules are
- declared for them.
- </li>
-
- <li>Note that selectors declared in this fashion will
- <em>only</em> match in down-level clients. A CSS namespace aware
- client will match element type and attribute selectors based on
- the name's local part. Selectors declared with the fully
- qualified name will not match (unless there is no namespace
- prefix
- in the fully qualified name).
- </li>
-
- </ul>
-
- </li>
-
-</ol>
-
-<p>In other scenarios: when the namespace prefixes used in the XML are
- not known in advance by the style sheet author; or a combination of
- elements with no namespace are used in conjunction with elements using
- a default namespace; or the same namespace prefix is mapped to
- <em>different</em> namespace URIs within the same document, or in
- different documents; it is impossible to construct a CSS style sheet
- that will function properly against all elements in those documents,
- unless, the style sheet is written using a namespace URI syntax (as
- outlined in this document or similar) and the document is processed by
- a CSS and XML namespace aware client.</p>
-
-<h2><a name=profiling>12. Profiles</a></h2>
-
-<p>Each specification using Selectors must define the subset of W3C
- Selectors it allows and excludes, and describe the local meaning of
- all the components of that subset.</p>
-
-<p>Non normative examples:
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 1</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>class selectors<br>ID selectors<br>:link,
- :visited and :active pseudo-classes<br>descendant combinator
- <br>::first-line and ::first-letter pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>universal selector<br>attribute selectors<br>:hover and
- :focus
- pseudo-classes<br>:target pseudo-class<br>:lang()
- pseudo-class<br>all UI
- element states pseudo-classes<br>all structural
- pseudo-classes<br>negation pseudo-class<br>all
- UI element fragments pseudo-elements<br>::before and ::after
- pseudo-elements<br>child combinators<br>sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>only one class selector allowed per sequence of simple
- selectors
- </td>
- </tr>
- </tbody>
- </table>
- <br><br>
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 2</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>universal selector<br>attribute presence and
- values selectors<br>class selectors<br>ID selectors<br>:link,
- :visited,
- :active, :hover, :focus, :lang() and :first-child pseudo-classes
- <br>descendant combinator<br>child combinator<br>adjacent
- sibling
- combinator<br>::first-line and ::first-letter
- pseudo-elements<br>::before
- and ::after pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>content selectors<br>substring matching attribute
- selectors<br>:target pseudo-classes<br>all UI element
- states pseudo-classes<br>all structural pseudo-classes other
- than :first-child<br>negation pseudo-class<br>all UI element
- fragments pseudo-elements<br>general sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>more than one class selector per sequence of simple selectors
- (CSS1
- constraint) allowed
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>In CSS, selectors express pattern matching rules that determine which
- style
- rules apply to elements in the document tree.
-
- <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
- with attribute <code>name</code> set inside a section 1 header
- <code>h1</code>:
- <pre>h1 a[name]</pre>
-
- <p>All CSS declarations attached to such a selector are applied to elements
- matching it.</div>
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>STTS 3</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>
-
- <p>type selectors<br>universal selectors<br>attribute
- selectors<br>class
- selectors<br>ID selectors<br>all structural
- pseudo-classes<br>
- all combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>non-accepted pseudo-classes<br>pseudo-elements<br></td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>some selectors and combinators are not allowed in fragment
- descriptions on the right side of STTS declarations.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>Selectors can be used in STTS 3 in two different
- manners:
- <ol>
- <li>a selection mechanism equivalent to CSS selection mechanism:
- declarations
- attached to a given selector are applied to elements matching that
- selector,
- <li>fragment descriptions that appear on the right side of declarations.
- </li>
- </ol>
-</div>
-
-<h2><a name=Conformance></a>13. Conformance and requirements</h2>
-
-<p>This section defines conformance with the present specification only.
-
-<p>The inability of a user agent to implement part of this specification due to
- the limitations of a particular device (e.g., non interactive user agents
- will
- probably not implement dynamic pseudo-classes because they make no sense
- without
- interactivity) does not imply non-conformance.
-
-<p>All specifications reusing Selectors must contain a <a
- href="#profiling">Profile</a> listing the
- subset of Selectors it accepts or excludes, and describing the constraints
- it adds to the current specification.
-
-<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a
- token
- which is not allowed at the current parsing point.
-
-<p>User agents must observe the rules for handling parsing errors:
-<ul>
- <li>a simple selector containing an undeclared namespace prefix is invalid
- </li>
- <li>a selector containing an invalid simple selector, an invalid combinator
- or an invalid token is invalid.
- </li>
- <li>a group of selectors containing an invalid selector is invalid.</li>
-</ul>
-
-<p>Specifications reusing Selectors must define how to handle parsing
- errors. (In the case of CSS, the entire rule in which the selector is
- used is dropped.)</p>
-
-<!-- Apparently all these references are out of date:
-<p>Implementations of this specification must behave as
-"recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>
-when parsing selectors and attempting matches. (In particular,
-implementations must assume the data is normalized and must not
-normalize it.) Normative rules for matching strings are defined in
-<a href="#refsCWWW">[CWWW]</a> and <a
-href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this
-specification.</p>-->
-
-<h2><a name=Tests></a>14. Tests</h2>
-
-<p>This specification has <a
- href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
- suite</a> allowing user agents to verify their basic conformance to
- the specification. This test suite does not pretend to be exhaustive
- and does not cover all possible combined cases of Selectors.</p>
-
-<h2><a name=ACKS></a>15. Acknowledgements</h2>
-
-<p>The CSS working group would like to thank everyone who has sent
- comments on this specification over the years.</p>
-
-<p>The working group would like to extend special thanks to Donna
- McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed
- the final editorial review.</p>
-
-<h2><a name=references>16. References</a></h2>
-
-<dl class="refs">
-
- <dt>[CSS1]
- <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading
- Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised
- 11 Jan 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>)
-
- <dt>[CSS21]
- <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon
- Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision
- 1</cite>", W3C Working Draft, 13 June 2005
- <dd>(<code><a
- href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>)
-
- <dt>[CWWW]
- <dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau,
- Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model
- for the World Wide Web</cite>", W3C Recommendation, 15 February 2005
- <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>)
-
- <dt>[FLEX]
- <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner
- Generator</cite>", Version 2.3.7, ISBN 1882114213
-
- <dt>[HTML4]
- <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs,
- editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24
- December 1999
- <dd>
- (<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>)
-
- <dt>[MATH]
- <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical
- Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7
- July 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>)
-
- <dt>[RFC3066]
- <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the
- Identification of Languages</cite>", Request for Comments 3066, January
- 2001
- <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)
-
- <dt>[STTS]
- <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation
- Sheets 3</cite>", Electricité de France, submission to the W3C,
- 11 November 1998
- <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>)
-
- <dt>[SVG]
- <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean
- Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1
- Specification</cite>", W3C Recommendation, 14 January 2003
- <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>)
-
- <dt>[UNICODE]</dt>
- <dd><a name="refsUNICODE"></a> <cite><a
- href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode
- Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA,
- Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a
- href="http://www.unicode.org/versions/Unicode4.0.1/">Unicode
- 4.0.1</a> and <a
- href="http://www.unicode.org/versions/Unicode4.1.0/">Unicode
- 4.1.0</a>.
- <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)
- </dd>
-
- <dt>[XML10]
- <dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,
- Eve Maler, François Yergeau, editors; "<cite>Extensible Markup
- Language (XML) 1.0 (Third Edition)</cite>", W3C Recommendation, 4
- February 2004
- <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>)
-
- <dt>[XMLNAMES]
- <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman,
- editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14
- January 1999
- <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>)
-
- <dt>[YACC]
- <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another
- compiler compiler</cite>", Technical Report, Murray Hill, 1975
-
-</dl>
-</div>
-</body>
-</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/dojobench.html b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html new file mode 100644 index 00000000..4f4e94db --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html @@ -0,0 +1,13 @@ +<html>
+<head>
+ <title>Dojo</title>
+ <script type="text/javascript" src="../js/dojo.js"></script>
+ <script type="text/javascript">
+ window.parent.dojobenchmark = function(sel) {
+ return dojo.query(sel).length;
+ }
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html new file mode 100644 index 00000000..fc1dab7a --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html @@ -0,0 +1,13 @@ +<html>
+<head>
+ <title>DomAssistant</title>
+ <script type="text/javascript" src="../js/DOMAssistantComplete-2.7.js"></script>
+ <script type="text/javascript">
+ window.parent.domassistantbenchmark = function(sel) {
+ return $(sel).length;
+ }
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html new file mode 100644 index 00000000..deb7ac1e --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html @@ -0,0 +1,7 @@ +<html> +<head> + <title>Gwt</title> +</head> +<body> +</body> +</html> diff --git a/samples/src/main/java/gwtquery/samples/public/html/iframebench.html b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html new file mode 100644 index 00000000..44f42393 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html @@ -0,0 +1,38 @@ +<html>
+ <head>
+ <script type="text/javascript" src="../js/dojo.js"></script>
+ <script type="text/javascript">
+ window.parent.dojobenchmark = function(sel) {
+ return dojo.query(sel).length;
+ }
+ </script>
+ <script type="text/javascript" src="../js/sizzle.js"></script>
+ <script type="text/javascript">
+ window.parent.sizzlebenchmark = function(sel) {
+ return Sizzle(sel).length;
+ }
+ </script>
+ <script type="text/javascript" src="../js/DOMAssistantComplete-2.7.js"></script>
+ <script type="text/javascript">
+ DOMAssistant.harmonize();
+ window.parent.domassistantbenchmark = function(sel) {
+ return DOMAssistant.$(sel).length;
+ }
+ </script>
+ <script language="javascript" src="../js/jquery-1.3.1.js"></script>
+ <script type="text/javascript">
+ jQuery.noConflict()
+ window.parent.jquerybenchmark = function(sel) {
+ return jQuery(sel).length;
+ }
+ </script>
+ <script type="text/javascript" src="../js/prototype-1.6.0.3.js"></script>
+ <script type="text/javascript">
+ window.parent.prototypebenchmark = function(sel) {
+ return $$(sel).length;
+ }
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html new file mode 100644 index 00000000..c8da3471 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html @@ -0,0 +1,13 @@ +<html>
+<head>
+ <title>JQuery</title>
+ <script language="javascript" src="../js/jquery-1.3.1.js"></script>
+ <script type="text/javascript">
+ window.parent.jquerybenchmark = function(sel) {
+ return $(sel).length;
+ }
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html new file mode 100644 index 00000000..448e031b --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html @@ -0,0 +1,13 @@ +<html>
+<head>
+ <title>Prototype</title>
+ <script type="text/javascript" src="../js/prototype-1.6.0.3.js"></script>
+ <script type="text/javascript">
+ window.parent.prototypebenchmark = function(sel) {
+ return $$(sel).length;
+ }
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html new file mode 100644 index 00000000..acc7c326 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html @@ -0,0 +1,13 @@ +<html>
+<head>
+ <title>Sizzle</title>
+ <script type="text/javascript" src="../js/sizzle.js"></script>
+ <script type="text/javascript">
+ window.parent.sizzlebenchmark = function(sel) {
+ return Sizzle(sel).length;
+ }
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/animated-flag.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/animated-flag.gif Binary files differindex ea93eeb9..ea93eeb9 100644 --- a/samples/src/main/java/gwtquery/samples/public/animated-flag.gif +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/animated-flag.gif diff --git a/samples/src/main/java/gwtquery/samples/public/grass-texture-small.jpg b/samples/src/main/java/gwtquery/samples/public/images/bench/grass-texture-small.jpg Binary files differindex 3689b8bf..3689b8bf 100644 --- a/samples/src/main/java/gwtquery/samples/public/grass-texture-small.jpg +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/grass-texture-small.jpg diff --git a/samples/src/main/java/gwtquery/samples/public/grass-texture.jpg b/samples/src/main/java/gwtquery/samples/public/images/bench/grass-texture.jpg Binary files differindex d4cc586a..d4cc586a 100644 --- a/samples/src/main/java/gwtquery/samples/public/grass-texture.jpg +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/grass-texture.jpg diff --git a/samples/src/main/java/gwtquery/samples/public/horse.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/horse.gif Binary files differindex d27bf1a2..d27bf1a2 100644 --- a/samples/src/main/java/gwtquery/samples/public/horse.gif +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/horse.gif diff --git a/samples/src/main/java/gwtquery/samples/public/horse.png b/samples/src/main/java/gwtquery/samples/public/images/bench/horse.png Binary files differindex fb185a18..fb185a18 100644 --- a/samples/src/main/java/gwtquery/samples/public/horse.png +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/horse.png diff --git a/samples/src/main/java/gwtquery/samples/public/dojo-logo-text.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-dojo.gif Binary files differindex cacdd231..cacdd231 100644 --- a/samples/src/main/java/gwtquery/samples/public/dojo-logo-text.gif +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-dojo.gif diff --git a/samples/src/main/java/gwtquery/samples/public/images/bench/logo-domassistant.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-domassistant.gif Binary files differnew file mode 100644 index 00000000..bfe8b971 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-domassistant.gif diff --git a/samples/src/main/java/gwtquery/samples/public/gwt-logo-cs.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-gwt.gif Binary files differindex d119c804..d119c804 100644 --- a/samples/src/main/java/gwtquery/samples/public/gwt-logo-cs.gif +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-gwt.gif diff --git a/samples/src/main/java/gwtquery/samples/public/logo_jquery.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-jquery.gif Binary files differindex 0dae334b..0dae334b 100644 --- a/samples/src/main/java/gwtquery/samples/public/logo_jquery.gif +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-jquery.gif diff --git a/samples/src/main/java/gwtquery/samples/public/images/bench/logo-prototype.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-prototype.gif Binary files differnew file mode 100644 index 00000000..ee4ad8df --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-prototype.gif diff --git a/samples/src/main/java/gwtquery/samples/public/images/bench/logo-sizzle.gif b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-sizzle.gif Binary files differnew file mode 100644 index 00000000..7924ddc4 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/images/bench/logo-sizzle.gif diff --git a/samples/src/main/java/gwtquery/samples/public/jquerybench.html b/samples/src/main/java/gwtquery/samples/public/jquerybench.html deleted file mode 100644 index b50ce668..00000000 --- a/samples/src/main/java/gwtquery/samples/public/jquerybench.html +++ /dev/null @@ -1,3172 +0,0 @@ -<html>
-<head>
- <title>JQuery</title>
- <script language="javascript" src="jquery-1.3.1.js"></script>
- <script type="text/javascript">
- window.parent.jquerybenchmark = function(sel) {
- return $(sel).length;
- }
- </script>
-</head>
-<body>
-<div style="display: none">
-<div style="display: none" class="head">
- <p><a href="http://www.w3.org/"><img height=48 alt=W3C
- src="http://www.w3.org/Icons/w3c_home"
- width=72></a>
-
- <h1 id="title">Selectors</h1>
-
- <h2>W3C Working Draft 15 December 2005</h2>
-
- <dl>
-
- <dt>This version:
-
- <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">
- http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>
-
- <dt>Latest version:
-
- <dd><a href="http://www.w3.org/TR/css3-selectors">
- http://www.w3.org/TR/css3-selectors</a>
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">
- http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
-
- <dt><a name=editors-list></a>Editors:
-
- <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited
- Expert)
- </dd>
-
- <dd class="vcard"><a lang="tr" class="url fn"
- href="http://www.tantek.com/">Tantek Çelik</a>
- (Invited Expert)
-
- <dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian
- Hickson</a> (<span
- class="company"><a
- href="http://www.google.com/">Google</a></span>)
-
- <dd class="vcard"><span class="fn">Peter Linss</span> (former
- editor, <span class="company"><a
- href="http://www.netscape.com/">Netscape/AOL</a></span>)
-
- <dd class="vcard"><span class="fn">John Williams</span> (former editor, <span
- class="company"><a
- href="http://www.quark.com/">Quark, Inc.</a></span>)
-
- </dl>
-
- <p class="copyright"><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">
- Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr
- title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
- (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
- Institute of Technology">MIT</abbr></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research
- Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
- W3C
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.
-
- <hr title="Separator for header">
-
-</div>
-
-<h2><a name=abstract></a>Abstract</h2>
-
-<p><em>Selectors</em> are patterns that match against elements in a
- tree. Selectors have been optimized for use with HTML and XML, and
- are designed to be usable in performance-critical code.</p>
-
-<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading
- Style Sheets) is a language for describing the rendering of <acronym
- title="Hypertext Markup Language">HTML</acronym> and <acronym
- title="Extensible Markup Language">XML</acronym> documents on
- screen, on paper, in speech, etc. CSS uses Selectors for binding
- style properties to elements in the document. This document
- describes extensions to the selectors defined in CSS level 2. These
- extended selectors will be used by CSS level 3.
-
-<p>Selectors define the following function:</p>
-
-<pre>expression ∗ element → boolean</pre>
-
-<p>That is, given an element and a selector, this specification
- defines whether that element matches the selector.</p>
-
-<p>These expressions can also be used, for instance, to select a set
- of elements, or a single element from a set of elements, by
- evaluating the expression across all the elements in a
- subtree. <acronym title="Simple Tree Transformation
- Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a
- language for transforming XML trees, uses this mechanism. <a
- href="#refsSTTS">[STTS]</a></p>
-
-<h2><a name=status></a>Status of this document</h2>
-
-<p><em>This section describes the status of this document at the
- time of its publication. Other documents may supersede this
- document. A list of current W3C publications and the latest revision
- of this technical report can be found in the <a
- href="http://www.w3.org/TR/">W3C technical reports index at
- http://www.w3.org/TR/.</a></em></p>
-
-<p>This document describes the selectors that already exist in <a
- href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a
- href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and
- also proposes new selectors for <abbr title="CSS level
- 3">CSS3</abbr> and other languages that may need them.</p>
-
-<p>The CSS Working Group doesn't expect that all implementations of
- CSS3 will have to implement all selectors. Instead, there will
- probably be a small number of variants of CSS3, called profiles. For
- example, it may be that only a profile for interactive user agents
- will include all of the selectors.</p>
-
-<p>This specification is a last call working draft for the the <a
- href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
- (<a href="/Style/">Style Activity</a>). This
- document is a revision of the <a
- href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate
- Recommendation dated 2001 November 13</a>, and has incorporated
- implementation feedback received in the past few years. It is
- expected that this last call will proceed straight to Proposed
- Recommendation stage since it is believed that interoperability will
- be demonstrable.</p>
-
-<p>All persons are encouraged to review and implement this
- specification and return comments to the (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
- public mailing list <a
- href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>
- (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C
- Members can also send comments directly to the CSS Working
- Group.
- The deadline for comments is 14 January 2006.</p>
-
-<p>This is still a draft document and may be updated, replaced, or
- obsoleted by other documents at any time. It is inappropriate to
- cite a W3C Working Draft as other than "work in progress".
-
-<p>This document may be available in <a
- href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.
- The English version of this specification is the only normative
- version.
-
-<div class="subtoc">
-
- <h2><a name=contents>Table of contents</a></h2>
-
- <ul class="toc">
- <li class="tocline2"><a href="#context">1. Introduction</a>
- <ul>
- <li><a href="#dependencies">1.1. Dependencies</a></li>
- <li><a href="#terminology">1.2. Terminology</a></li>
- <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a></li>
- </ul>
- <li class="tocline2"><a href="#selectors">2. Selectors</a>
- <li class="tocline2"><a href="#casesens">3. Case sensitivity</a>
- <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>
- <li class="tocline2"><a href="#grouping">5. Groups of selectors</a>
- <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#type-selectors">6.1. Type
- selectors</a>
- <ul class="toc">
- <li class="tocline4"><a href="#typenmsp">6.1.1. Type
- selectors and namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#universal-selector">6.2.
- Universal selector</a>
- <ul>
- <li><a href="#univnmsp">6.2.1. Universal selector and
- namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#attribute-selectors">6.3.
- Attribute selectors</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#attribute-representation">6.3.1.
- Representation of attributes and attributes
- values</a>
- <li><a href="#attribute-substrings">6.3.2. Substring
- matching attribute selectors</a>
- <li class="tocline4"><a href="#attrnmsp">6.3.3.
- Attribute selectors and namespaces</a>
- <li class="tocline4"><a href="#def-values">6.3.4.
- Default attribute values in DTDs</a></li>
- </ul>
- <li class="tocline3"><a href="#class-html">6.4. Class
- selectors</a>
- <li class="tocline3"><a href="#id-selectors">6.5. ID
- selectors</a>
- <li class="tocline3"><a href="#pseudo-classes">6.6.
- Pseudo-classes</a>
- <ul class="toc">
- <li class="tocline4"><a href="#dynamic-pseudos">6.6.1.
- Dynamic pseudo-classes</a>
- <li class="tocline4"><a href="#target-pseudo">6.6.2. The
- :target pseudo-class</a>
- <li class="tocline4"><a href="#lang-pseudo">6.6.3. The
- :lang() pseudo-class</a>
- <li class="tocline4"><a href="#UIstates">6.6.4. UI
- element states pseudo-classes</a>
- <li class="tocline4"><a href="#structural-pseudos">6.6.5.
- Structural pseudo-classes</a>
- <ul>
- <li><a href="#root-pseudo">:root
- pseudo-class</a>
- <li><a href="#nth-child-pseudo">:nth-child()
- pseudo-class</a>
- <li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
- <li><a href="#nth-of-type-pseudo">:nth-of-type()
- pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
- <li><a href="#first-child-pseudo">:first-child
- pseudo-class</a>
- <li><a href="#last-child-pseudo">:last-child
- pseudo-class</a>
- <li><a href="#first-of-type-pseudo">:first-of-type
- pseudo-class</a>
- <li><a href="#last-of-type-pseudo">:last-of-type
- pseudo-class</a>
- <li><a href="#only-child-pseudo">:only-child
- pseudo-class</a>
- <li><a href="#only-of-type-pseudo">:only-of-type
- pseudo-class</a>
- <li><a href="#empty-pseudo">:empty
- pseudo-class</a></li>
- </ul>
- <li class="tocline4"><a href="#negation">6.6.7. The
- negation pseudo-class</a></li>
- </ul>
- </li>
- </ul>
- <li><a href="#pseudo-elements">7. Pseudo-elements</a>
- <ul>
- <li><a href="#first-line">7.1. The ::first-line
- pseudo-element</a>
- <li><a href="#first-letter">7.2. The ::first-letter
- pseudo-element</a>
- <li><a href="#UIfragments">7.3. The ::selection
- pseudo-element</a>
- <li><a href="#gen-content">7.4. The ::before and ::after
- pseudo-elements</a></li>
- </ul>
- <li class="tocline2"><a href="#combinators">8. Combinators</a>
- <ul class="toc">
- <li class="tocline3"><a href="#descendant-combinators">8.1.
- Descendant combinators</a>
- <li class="tocline3"><a href="#child-combinators">8.2. Child
- combinators</a>
- <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling
- combinators</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#adjacent-sibling-combinators">8.3.1.
- Adjacent sibling combinator</a>
- <li class="tocline4"><a
- href="#general-sibling-combinators">8.3.2.
- General sibling combinator</a></li>
- </ul>
- </li>
- </ul>
- <li class="tocline2"><a href="#specificity">9. Calculating a selector's
- specificity</a>
- <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
- Selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#grammar">10.1. Grammar</a>
- <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a>
- </li>
- </ul>
- <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level
- clients</a>
- <li class="tocline2"><a href="#profiling">12. Profiles</a>
- <li><a href="#Conformance">13. Conformance and requirements</a>
- <li><a href="#Tests">14. Tests</a>
- <li><a href="#ACKS">15. Acknowledgements</a>
- <li class="tocline2"><a href="#references">16. References</a>
- </ul>
-
-</div>
-
-<h2><a name=context>1. Introduction</a></h2>
-
-<h3><a name=dependencies></a>1.1. Dependencies</h3>
-
-<p>Some features of this specification are specific to CSS, or have
- particular limitations or rules specific to CSS. In this
- specification, these have been described in terms of CSS2.1. <a
- href="#refsCSS21">[CSS21]</a></p>
-
-<h3><a name=terminology></a>1.2. Terminology</h3>
-
-<p>All of the text of this specification is normative except
- examples, notes, and sections explicitly marked as
- non-normative.</p>
-
-<h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>
-
-<p><em>This section is non-normative.</em></p>
-
-<p>The main differences between the selectors in CSS2 and those in
- Selectors are:
-
-<ul>
-
- <li>the list of basic definitions (selector, group of selectors,
- simple selector, etc.) has been changed; in particular, what was
- referred to in CSS2 as a simple selector is now called a sequence
- of simple selectors, and the term "simple selector" is now used for
- the components of this sequence
- </li>
-
- <li>an optional namespace component is now allowed in type element
- selectors, the universal selector and attribute selectors
- </li>
-
- <li>a <a href="#general-sibling-combinators">new combinator</a> has been
- introduced
- </li>
-
- <li>new simple selectors including substring matching attribute
- selectors, and new pseudo-classes
- </li>
-
- <li>new pseudo-elements, and introduction of the "::" convention
- for pseudo-elements
- </li>
-
- <li>the grammar has been rewritten</li>
-
- <li>profiles to be added to specifications integrating Selectors
- and defining the set of selectors which is actually supported by
- each specification
- </li>
-
- <li>Selectors are now a CSS3 Module and an independent
- specification; other specifications can now refer to this document
- independently of CSS
- </li>
-
- <li>the specification now has its own test suite</li>
-
-</ul>
-
-<h2><a name=selectors></a>2. Selectors</h2>
-
-<p><em>This section is non-normative, as it merely summarizes the
- following sections.</em></p>
-
-<p>A Selector represents a structure. This structure can be used as a
- condition (e.g. in a CSS rule) that determines which elements a
- selector matches in the document tree, or as a flat description of the
- HTML or XML fragment corresponding to that structure.</p>
-
-<p>Selectors may range from simple element names to rich contextual
- representations.</p>
-
-<p>The following table summarizes the Selector syntax:</p>
-
-<table class="selectorsReview">
-<thead>
-<tr>
- <th class="pattern">Pattern</th>
- <th class="meaning">Meaning</th>
- <th class="described">Described in section</th>
- <th class="origin">First defined in CSS level</th>
-</tr>
-<tbody>
-<tr>
- <td class="pattern">*</td>
- <td class="meaning">any element</td>
- <td class="described"><a
- href="#universal-selector">Universal
- selector</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E</td>
- <td class="meaning">an element of type E</td>
- <td class="described"><a
- href="#type-selectors">Type selector</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E[foo]</td>
- <td class="meaning">an E element with a "foo" attribute</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is exactly
- equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo~="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is a list of
- space-separated values, one of which is exactly equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo^="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value begins exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo$="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value ends exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo*="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value contains the
- substring "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[hreflang|="en"]</td>
- <td class="meaning">an E element whose "hreflang" attribute has a
- hyphen-separated
- list of values beginning (from the left) with "en"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:root</td>
- <td class="meaning">an E element, root of the document</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-child</td>
- <td class="meaning">an E element, first child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:last-child</td>
- <td class="meaning">an E element, last child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-of-type</td>
- <td class="meaning">an E element, first sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:last-of-type</td>
- <td class="meaning">an E element, last sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-child</td>
- <td class="meaning">an E element, only child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-of-type</td>
- <td class="meaning">an E element, only sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:empty</td>
- <td class="meaning">an E element that has no children (including text
- nodes)
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:link<br>E:visited</td>
- <td class="meaning">an E element being the source anchor of a hyperlink of
- which the target is not yet visited (:link) or already visited
- (:visited)
- </td>
- <td class="described"><a
- href="#link">The link
- pseudo-classes</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:active<br>E:hover<br>E:focus</td>
- <td class="meaning">an E element during certain user actions</td>
- <td class="described"><a
- href="#useraction-pseudos">The user
- action pseudo-classes</a></td>
- <td class="origin">1 and 2</td>
-</tr>
-<tr>
- <td class="pattern">E:target</td>
- <td class="meaning">an E element being the target of the referring URI</td>
- <td class="described"><a
- href="#target-pseudo">The target
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:lang(fr)</td>
- <td class="meaning">an element of type E in language "fr" (the document
- language specifies how language is determined)
- </td>
- <td class="described"><a
- href="#lang-pseudo">The :lang()
- pseudo-class</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:enabled<br>E:disabled</td>
- <td class="meaning">a user interface element E which is enabled or
- disabled
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:checked<!--<br>E:indeterminate--></td>
- <td class="meaning">a user interface element E which is checked<!-- or in an
- indeterminate state--> (for instance a radio-button or checkbox)
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::first-line</td>
- <td class="meaning">the first formatted line of an E element</td>
- <td class="described"><a
- href="#first-line">The ::first-line
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::first-letter</td>
- <td class="meaning">the first formatted letter of an E element</td>
- <td class="described"><a
- href="#first-letter">The ::first-letter
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::selection</td>
- <td class="meaning">the portion of an E element that is currently
- selected/highlighted by the user
- </td>
- <td class="described"><a
- href="#UIfragments">The UI element
- fragments pseudo-elements</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::before</td>
- <td class="meaning">generated content before an E element</td>
- <td class="described"><a
- href="#gen-content">The ::before
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E::after</td>
- <td class="meaning">generated content after an E element</td>
- <td class="described"><a
- href="#gen-content">The ::after
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E.warning</td>
- <td class="meaning">an E element whose class is
- "warning" (the document language specifies how class is determined).
- </td>
- <td class="described"><a
- href="#class-html">Class
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E#myid</td>
- <td class="meaning">an E element with ID equal to "myid".</td>
- <td class="described"><a
- href="#id-selectors">ID
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:not(s)</td>
- <td class="meaning">an E element that does not match simple selector s</td>
- <td class="described"><a
- href="#negation">Negation
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E F</td>
- <td class="meaning">an F element descendant of an E element</td>
- <td class="described"><a
- href="#descendant-combinators">Descendant
- combinator</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E > F</td>
- <td class="meaning">an F element child of an E element</td>
- <td class="described"><a
- href="#child-combinators">Child
- combinator</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E + F</td>
- <td class="meaning">an F element immediately preceded by an E element</td>
- <td class="described"><a
- href="#adjacent-sibling-combinators">Adjacent sibling combinator</a>
- </td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E ~ F</td>
- <td class="meaning">an F element preceded by an E element</td>
- <td class="described"><a
- href="#general-sibling-combinators">General sibling combinator</a>
- </td>
- <td class="origin">3</td>
-</tr>
-</tbody>
-</table>
-
-<p>The meaning of each selector is derived from the table above by
- prepending "matches" to the contents of each cell in the "Meaning"
- column.</p>
-
-<h2><a name=casesens>3. Case sensitivity</a></h2>
-
-<p>The case sensitivity of document language element names, attribute
- names, and attribute values in selectors depends on the document
- language. For example, in HTML, element names are case-insensitive,
- but in XML, they are case-sensitive.</p>
-
-<h2><a name=selector-syntax>4. Selector syntax</a></h2>
-
-<p>A <dfn><a name=selector>selector</a></dfn> is a chain of one
- or more <a href="#sequence">sequences of simple selectors</a>
- separated by <a href="#combinators">combinators</a>.</p>
-
-<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>
- is a chain of <a href="#simple-selectors-dfn">simple selectors</a>
- that are not separated by a <a href="#combinators">combinator</a>. It
- always begins with a <a href="#type-selectors">type selector</a> or a
- <a href="#universal-selector">universal selector</a>. No other type
- selector or universal selector is allowed in the sequence.</p>
-
-<p>A <dfn><a name=simple-selectors-dfn></a><a
- href="#simple-selectors">simple selector</a></dfn> is either a <a
- href="#type-selectors">type selector</a>, <a
- href="#universal-selector">universal selector</a>, <a
- href="#attribute-selectors">attribute selector</a>, <a
- href="#class-html">class selector</a>, <a
- href="#id-selectors">ID selector</a>, <a
- href="#content-selectors">content selector</a>, or <a
- href="#pseudo-classes">pseudo-class</a>. One <a
- href="#pseudo-elements">pseudo-element</a> may be appended to the last
- sequence of simple selectors.</p>
-
-<p><dfn>Combinators</dfn> are: white space, "greater-than
- sign" (U+003E, <code>></code>), "plus sign" (U+002B,
- <code>+</code>) and "tilde" (U+007E, <code>~</code>). White
- space may appear between a combinator and the simple selectors around
- it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"
- (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form
- feed" (U+000C) can occur in white space. Other space-like characters,
- such as "em-space" (U+2003) and "ideographic space" (U+3000), are
- never part of white space.</p>
-
-<p>The elements of a document tree that are represented by a selector
- are the <dfn><a name=subject></a>subjects of the selector</dfn>. A
- selector consisting of a single sequence of simple selectors
- represents any element satisfying its requirements. Prepending another
- sequence of simple selectors and a combinator to a sequence imposes
- additional matching constraints, so the subjects of a selector are
- always a subset of the elements represented by the last sequence of
- simple selectors.</p>
-
-<p>An empty selector, containing no sequence of simple selectors and
- no pseudo-element, is an <a href="#Conformance">invalid
- selector</a>.</p>
-
-<h2><a name=grouping>5. Groups of selectors</a></h2>
-
-<p>When several selectors share the same declarations, they may be
- grouped into a comma-separated list. (A comma is U+002C.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>In this example, we condense three rules with identical
- declarations into one. Thus,</p>
-<pre>h1 { font-family: sans-serif }
-h2 { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
- <p>is equivalent to:</p>
- <pre>h1, h2, h3 { font-family: sans-serif }</pre>
-</div>
-
-<p><strong>Warning</strong>: the equivalence is true in this example
- because all the selectors are valid selectors. If just one of these
- selectors were invalid, the entire group of selectors would be
- invalid. This would invalidate the rule for all three heading
- elements, whereas in the former case only one of the three individual
- heading rules would be invalidated.</p>
-
-
-<h2><a name=simple-selectors>6. Simple selectors</a></h2>
-
-<h3><a name=type-selectors>6.1. Type selector</a></h3>
-
-<p>A <dfn>type selector</dfn> is the name of a document language
- element type. A type selector represents an instance of the element
- type in the document tree.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents an <code>h1</code> element in the
- document tree:</p>
- <pre>h1</pre>
-</div>
-
-
-<h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>
-
-<p>Type selectors allow an optional namespace (<a
- href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix
- that has been previously declared may be prepended to the element name
- separated by the namespace separator "vertical bar"
- (U+007C, <code>|</code>).</p>
-
-<p>The namespace component may be left empty to indicate that the
- selector is only to represent elements with no declared namespace.</p>
-
-<p>An asterisk may be used for the namespace prefix, indicating that
- the selector represents elements in any namespace (including elements
- with no namespace).</p>
-
-<p>Element type selectors that have no namespace component (no
- namespace separator), represent elements without regard to the
- element's namespace (equivalent to "<code>*|</code>") unless a default
- namespace has been declared. If a default namespace has been declared,
- the selector will represent only elements in the default
- namespace.</p>
-
-<p>A type selector containing a namespace prefix that has not been
- previously declared is an <a href="#Conformance">invalid</a> selector.
- The mechanism for declaring a namespace prefix is left up to the
- language implementing Selectors. In CSS, such a mechanism is defined
- in the General Syntax module.</p>
-
-<p>In a namespace-aware client, element type selectors will only match
- against the <a
- href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local
- part</a>
- of the element's <a
- href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
- name</a>. See <a href="#downlevel">below</a> for notes about matching
- behaviors in down-level clients.</p>
-
-<p>In summary:</p>
-
-<dl>
- <dt><code>ns|E</code></dt>
- <dd>elements with name E in namespace ns</dd>
- <dt><code>*|E</code></dt>
- <dd>elements with name E in any namespace, including those without any
- declared namespace
- </dd>
- <dt><code>|E</code></dt>
- <dd>elements with name E without any declared namespace</dd>
- <dt><code>E</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|E.
- Otherwise it is equivalent to ns|E where ns is the default namespace.
- </dd>
-</dl>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <pre>@namespace foo url(http://www.example.com);
- foo|h1 { color: blue }
- foo|* { color: yellow }
- |h1 { color: red }
- *|h1 { color: green }
- h1 { color: green }</pre>
-
- <p>The first rule will match only <code>h1</code> elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The second rule will match all elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The third rule will match only <code>h1</code> elements without
- any declared namespace.</p>
-
- <p>The fourth rule will match <code>h1</code> elements in any
- namespace (including those without any declared namespace).</p>
-
- <p>The last rule is equivalent to the fourth rule because no default
- namespace has been defined.</p>
-
-</div>
-
-<h3><a name=universal-selector>6.2. Universal selector</a></h3>
-
-<p>The <dfn>universal selector</dfn>, written "asterisk"
- (<code>*</code>), represents the qualified name of any element
- type. It represents any single element in the document tree in any
- namespace (including those without any declared namespace) if no
- default namespace has been specified. If a default namespace has been
- specified, see <a href="#univnmsp">Universal selector and
- Namespaces</a> below.</p>
-
-<p>If the universal selector is not the only component of a sequence
- of simple selectors, the <code>*</code> may be omitted.</p>
-
-<div class="example">
- <p>Examples:</p>
- <ul>
- <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
- equivalent,
- </li>
- <li><code>*.warning</code> and <code>.warning</code> are equivalent,
- </li>
- <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>
- </ul>
-</div>
-
-<p class="note"><strong>Note:</strong> it is recommended that the
- <code>*</code>, representing the universal selector, not be
- omitted.</p>
-
-<h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>
-
-<p>The universal selector allows an optional namespace component. It
- is used as follows:</p>
-
-<dl>
- <dt><code>ns|*</code></dt>
- <dd>all elements in namespace ns</dd>
- <dt><code>*|*</code></dt>
- <dd>all elements</dd>
- <dt><code>|*</code></dt>
- <dd>all elements without any declared namespace</dd>
- <dt><code>*</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|*.
- Otherwise it is equivalent to ns|* where ns is the default namespace.
- </dd>
-</dl>
-
-<p>A universal selector containing a namespace prefix that has not
- been previously declared is an <a href="#Conformance">invalid</a>
- selector. The mechanism for declaring a namespace prefix is left up
- to the language implementing Selectors. In CSS, such a mechanism is
- defined in the General Syntax module.</p>
-
-
-<h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>
-
-<p>Selectors allow the representation of an element's attributes. When
- a selector is used as an expression to match against an element,
- attribute selectors must be considered to match an element if that
- element has an attribute that matches the attribute represented by the
- attribute selector.</p>
-
-<h4><a name=attribute-representation>6.3.1. Attribute presence and values
- selectors</a></h4>
-
-<p>CSS2 introduced four attribute selectors:</p>
-
-<dl>
- <dt><code>[att]</code>
- <dd>Represents an element with the <code>att</code> attribute, whatever the
- value of
- the attribute.
- </dd>
- <dt><code>[att=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- exactly
- "val".
- </dd>
- <dt><code>[att~=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- a <a
- href="#whitespace">whitespace</a>-separated list of words, one
- of
- which is exactly "val". If "val" contains whitespace, it will never
- represent anything (since the words are <em>separated</em> by
- spaces).
- </dd>
- <dt><code>[att|=val]</code>
- <dd>Represents an element with the <code>att</code> attribute, its value
- either
- being exactly "val" or beginning with "val" immediately followed by
- "-" (U+002D). This is primarily intended to allow language subcode
- matches (e.g., the <code>hreflang</code> attribute on the
- <code>link</code> element in HTML) as described in RFC 3066 (<a
- href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or
- <code>xml:lang</code>) language subcode matching, please see <a
- href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names and values in selectors depends on
- the document language.</p>
-
-<div class="example">
-
- <p>Examples:</p>
-
- <p>The following attribute selector represents an <code>h1</code>
- element that carries the <code>title</code> attribute, whatever its
- value:</p>
-
- <pre>h1[title]</pre>
-
- <p>In the following example, the selector represents a
- <code>span</code> element whose <code>class</code> attribute has
- exactly the value "example":</p>
-
- <pre>span[class="example"]</pre>
-
- <p>Multiple attribute selectors can be used to represent several
- attributes of an element, or several conditions on the same
- attribute. Here, the selector represents a <code>span</code> element
- whose <code>hello</code> attribute has exactly the value "Cleveland"
- and whose <code>goodbye</code> attribute has exactly the value
- "Columbus":</p>
-
- <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
-
- <p>The following selectors illustrate the differences between "="
- and "~=". The first selector will represent, for example, the value
- "copyright copyleft copyeditor" on a <code>rel</code> attribute. The
- second selector will only represent an <code>a</code> element with
- an <code>href</code> attribute having the exact value
- "http://www.w3.org/".</p>
-
- <pre>a[rel~="copyright"]
-a[href="http://www.w3.org/"]</pre>
-
- <p>The following selector represents a <code>link</code> element
- whose <code>hreflang</code> attribute is exactly "fr".</p>
-
- <pre>link[hreflang=fr]</pre>
-
- <p>The following selector represents a <code>link</code> element for
- which the values of the <code>hreflang</code> attribute begins with
- "en", including "en", "en-US", and "en-cockney":</p>
-
- <pre>link[hreflang|="en"]</pre>
-
- <p>Similarly, the following selectors represents a
- <code>DIALOGUE</code> element whenever it has one of two different
- values for an attribute <code>character</code>:</p>
-
- <pre>DIALOGUE[character=romeo]
-DIALOGUE[character=juliet]</pre>
-
-</div>
-
-<h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute
- selectors</h4>
-
-<p>Three additional attribute selectors are provided for matching
- substrings in the value of an attribute:</p>
-
-<dl>
- <dt><code>[att^=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value
- begins
- with the prefix "val".
- </dd>
- <dt><code>[att$=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- ends with
- the suffix "val".
- </dd>
- <dt><code>[att*=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- contains
- at least one instance of the substring "val".
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names in selectors depends on the
- document language.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents an HTML <code>object</code>,
- referencing an
- image:</p>
- <pre>object[type^="image/"]</pre>
- <p>The following selector represents an HTML anchor <code>a</code> with an
- <code>href</code> attribute whose value ends with ".html".</p>
- <pre>a[href$=".html"]</pre>
- <p>The following selector represents an HTML paragraph with a
- <code>title</code>
- attribute whose value contains the substring "hello"</p>
- <pre>p[title*="hello"]</pre>
-</div>
-
-<h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>
-
-<p>Attribute selectors allow an optional namespace component to the
- attribute name. A namespace prefix that has been previously declared
- may be prepended to the attribute name separated by the namespace
- separator "vertical bar" (<code>|</code>). In keeping with
- the Namespaces in the XML recommendation, default namespaces do not
- apply to attributes, therefore attribute selectors without a namespace
- component apply only to attributes that have no declared namespace
- (equivalent to "<code>|attr</code>"). An asterisk may be used for the
- namespace prefix indicating that the selector is to match all
- attribute names without regard to the attribute's namespace.
-
-<p>An attribute selector with an attribute name containing a namespace
- prefix that has not been previously declared is an <a
- href="#Conformance">invalid</a> selector. The mechanism for
- declaring
- a namespace prefix is left up to the language implementing Selectors.
- In CSS, such a mechanism is defined in the General Syntax module.
-
-<div class="example">
- <p>CSS examples:</p>
- <pre>@namespace foo "http://www.example.com";
-[foo|att=val] { color: blue }
-[*|att] { color: yellow }
-[|att] { color: green }
-[att] { color: green }</pre>
-
- <p>The first rule will match only elements with the attribute
- <code>att</code> in the "http://www.example.com" namespace with the
- value "val".</p>
-
- <p>The second rule will match only elements with the attribute
- <code>att</code> regardless of the namespace of the attribute
- (including no declared namespace).</p>
-
- <p>The last two rules are equivalent and will match only elements
- with the attribute <code>att</code> where the attribute is not
- declared to be in a namespace.</p>
-
-</div>
-
-<h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>
-
-<p>Attribute selectors represent explicitly set attribute values in
- the document tree. Default attribute values may be defined in a DTD or
- elsewhere, but cannot always be selected by attribute
- selectors. Selectors should be designed so that they work even if the
- default values are not included in the document tree.</p>
-
-<p>More precisely, a UA is <em>not</em> required to read an "external
- subset" of the DTD but <em>is</em> required to look for default
- attribute values in the document's "internal subset." (See <a
- href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>
-
-<p>A UA that recognizes an XML namespace <a
- href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its
- knowledge of that namespace to treat default attribute values as if
- they were present in the document. (For example, an XHTML UA is not
- required to use its built-in knowledge of the XHTML DTD.)</p>
-
-<p class="note"><strong>Note:</strong> Typically, implementations
- choose to ignore external subsets.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>Consider an element EXAMPLE with an attribute "notation" that has a
- default value of "decimal". The DTD fragment might be</p>
-
- <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
-
- <p>If the style sheet contains the rules</p>
-
-<pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>the first rule will not match elements whose "notation" attribute
- is set by default, i.e. not set explicitly. To catch all cases, the
- attribute selector for the default value must be dropped:</p>
-
-<pre>EXAMPLE { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is
- more specific than the tag
- selector alone, the style declarations in the second rule will override
- those in the first for elements that have a "notation" attribute value
- of "octal". Care has to be taken that all property declarations that
- are to apply only to the default case are overridden in the non-default
- cases' style rules.</p>
-
-</div>
-
-<h3><a name=class-html>6.4. Class selectors</a></h3>
-
-<p>Working with HTML, authors may use the period (U+002E,
- <code>.</code>) notation as an alternative to the <code>~=</code>
- notation when representing the <code>class</code> attribute. Thus, for
- HTML, <code>div.value</code> and <code>div[class~=value]</code> have
- the same meaning. The attribute value must immediately follow the
- "period" (<code>.</code>).</p>
-
-<p>UAs may apply selectors using the period (.) notation in XML
- documents if the UA has namespace-specific knowledge that allows it to
- determine which attribute is the "class" attribute for the
- respective namespace. One such example of namespace-specific knowledge
- is the prose in the specification for a particular namespace (e.g. SVG
- 1.0 <a href="#refsSVG">[SVG]</a> describes the <a
- href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG
- "class" attribute</a> and how a UA should interpret it, and
- similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a
- href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML
- "class" attribute</a>.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>We can assign style information to all elements with
- <code>class~="pastoral"</code> as follows:</p>
-
- <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>or just</p>
-
- <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>The following assigns style only to H1 elements with
- <code>class~="pastoral"</code>:</p>
-
- <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>
-
- <p>Given these rules, the first H1 instance below would not have
- green text, while the second would:</p>
-
- <pre><H1>Not green</H1>
-<H1 class="pastoral">Very green</H1></pre>
-
-</div>
-
-<p>To represent a subset of "class" values, each value must be preceded
- by a ".", in any order.</P>
-
-<div class="example">
-
- <p>CSS example:</p>
-
- <p>The following rule matches any P element whose "class" attribute
- has been assigned a list of <a
- href="#whitespace">whitespace</a>-separated values that includes
- "pastoral" and "marine":</p>
-
- <pre>p.pastoral.marine { color: green }</pre>
-
- <p>This rule matches when <code>class="pastoral blue aqua
- marine"</code> but does not match for <code>class="pastoral
- blue"</code>.</p>
-
-</div>
-
-<p class="note"><strong>Note:</strong> Because CSS gives considerable
- power to the "class" attribute, authors could conceivably design their
- own "document language" based on elements with almost no associated
- presentation (such as DIV and SPAN in HTML) and assigning style
- information through the "class" attribute. Authors should avoid this
- practice since the structural elements of a document language often
- have recognized and accepted meanings and author-defined classes may
- not.</p>
-
-<p class="note"><strong>Note:</strong> If an element has multiple
- class attributes, their values must be concatenated with spaces
- between the values before searching for the class. As of this time the
- working group is not aware of any manner in which this situation can
- be reached, however, so this behavior is explicitly non-normative in
- this specification.</p>
-
-<h3><a name=id-selectors>6.5. ID selectors</a></h3>
-
-<p>Document languages may contain attributes that are declared to be
- of type ID. What makes attributes of type ID special is that no two
- such attributes can have the same value in a document, regardless of
- the type of the elements that carry them; whatever the document
- language, an ID typed attribute can be used to uniquely identify its
- element. In HTML all ID attributes are named "id"; XML applications
- may name ID attributes differently, but the same restriction
- applies.</p>
-
-<p>An ID-typed attribute of a document language allows authors to
- assign an identifier to one element instance in the document tree. W3C
- ID selectors represent an element instance based on its identifier. An
- ID selector contains a "number sign" (U+0023,
- <code>#</code>) immediately followed by the ID value, which must be an
- identifier.</p>
-
-<p>Selectors does not specify how a UA knows the ID-typed attribute of
- an element. The UA may, e.g., read a document's DTD, have the
- information hard-coded or ask the user.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following ID selector represents an <code>h1</code> element
- whose ID-typed attribute has the value "chapter1":</p>
- <pre>h1#chapter1</pre>
- <p>The following ID selector represents any element whose ID-typed
- attribute has the value "chapter1":</p>
- <pre>#chapter1</pre>
- <p>The following selector represents any element whose ID-typed
- attribute has the value "z98y".</p>
- <pre>*#z98y</pre>
-</div>
-
-<p class="note"><strong>Note.</strong> In XML 1.0 <a
- href="#refsXML10">[XML10]</a>, the information about which attribute
- contains an element's IDs is contained in a DTD or a schema. When
- parsing XML, UAs do not always read the DTD, and thus may not know
- what the ID of an element is (though a UA may have namespace-specific
- knowledge that allows it to determine which attribute is the ID
- attribute for that namespace). If a style sheet designer knows or
- suspects that a UA may not know what the ID of an element is, he
- should use normal attribute selectors instead:
- <code>[name=p371]</code> instead of <code>#p371</code>. Elements in
- XML 1.0 documents without a DTD do not have IDs at all.</p>
-
-<p>If an element has multiple ID attributes, all of them must be
- treated as IDs for that element for the purposes of the ID
- selector. Such a situation could be reached using mixtures of xml:id,
- DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
-
-<h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>
-
-<p>The pseudo-class concept is introduced to permit selection based on
- information that lies outside of the document tree or that cannot be
- expressed using the other simple selectors.</p>
-
-<p>A pseudo-class always consists of a "colon"
- (<code>:</code>) followed by the name of the pseudo-class and
- optionally by a value between parentheses.</p>
-
-<p>Pseudo-classes are allowed in all sequences of simple selectors
- contained in a selector. Pseudo-classes are allowed anywhere in
- sequences of simple selectors, after the leading type selector or
- universal selector (possibly omitted). Pseudo-class names are
- case-insensitive. Some pseudo-classes are mutually exclusive, while
- others can be applied simultaneously to the same
- element. Pseudo-classes may be dynamic, in the sense that an element
- may acquire or lose a pseudo-class while a user interacts with the
- document.</p>
-
-
-<h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>
-
-<p>Dynamic pseudo-classes classify elements on characteristics other
- than their name, attributes, or content, in principle characteristics
- that cannot be deduced from the document tree.</p>
-
-<p>Dynamic pseudo-classes do not appear in the document source or
- document tree.</p>
-
-
-<h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>
-
-<p>User agents commonly display unvisited links differently from
- previously visited ones. Selectors
- provides the pseudo-classes <code>:link</code> and
- <code>:visited</code> to distinguish them:</p>
-
-<ul>
- <li>The <code>:link</code> pseudo-class applies to links that have
- not yet been visited.
- </li>
- <li>The <code>:visited</code> pseudo-class applies once the link has
- been visited by the user.
- </li>
-</ul>
-
-<p>After some amount of time, user agents may choose to return a
- visited link to the (unvisited) ':link' state.</p>
-
-<p>The two states are mutually exclusive.</p>
-
-<div class="example">
-
- <p>Example:</p>
-
- <p>The following selector represents links carrying class
- <code>external</code> and already visited:</p>
-
- <pre>a.external:visited</pre>
-
-</div>
-
-<p class="note"><strong>Note:</strong> It is possible for style sheet
- authors to abuse the :link and :visited pseudo-classes to determine
- which sites a user has visited without the user's consent.
-
-<p>UAs may therefore treat all links as unvisited links, or implement
- other measures to preserve the user's privacy while rendering visited
- and unvisited links differently.</p>
-
-<h5>The <a name=useraction-pseudos>user action pseudo-classes
- :hover, :active, and :focus</a></h5>
-
-<p>Interactive user agents sometimes change the rendering in response
- to user actions. Selectors provides
- three pseudo-classes for the selection of an element the user is
- acting on.</p>
-
-<ul>
-
- <li>The <code>:hover</code> pseudo-class applies while the user
- designates an element with a pointing device, but does not activate
- it. For example, a visual user agent could apply this pseudo-class
- when the cursor (mouse pointer) hovers over a box generated by the
- element. User agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> do not have to support this pseudo-class. Some conforming
- user agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> may not be able to support this pseudo-class (e.g., a pen
- device that does not detect hovering).
- </li>
-
- <li>The <code>:active</code> pseudo-class applies while an element
- is being activated by the user. For example, between the times the
- user presses the mouse button and releases it.
- </li>
-
- <li>The <code>:focus</code> pseudo-class applies while an element
- has the focus (accepts keyboard or mouse events, or other forms of
- input).
- </li>
-
-</ul>
-
-<p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.</p>
-
-<p>These pseudo-classes are not mutually exclusive. An element may
- match several pseudo-classes at the same time.</p>
-
-<p>Selectors doesn't define if the parent of an element that is
- ':active' or ':hover' is also in that state.</p>
-
-<div class="example">
- <p>Examples:</p>
- <pre>a:link /* unvisited links */
-a:visited /* visited links */
-a:hover /* user hovers */
-a:active /* active links */</pre>
- <p>An example of combining dynamic pseudo-classes:</p>
- <pre>a:focus
-a:focus:hover</pre>
- <p>The last selector matches <code>a</code> elements that are in
- the pseudo-class :focus and in the pseudo-class :hover.</p>
-</div>
-
-<p class="note"><strong>Note:</strong> An element can be both ':visited'
- and ':active' (or ':link' and ':active').</p>
-
-<h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>
-
-<p>Some URIs refer to a location within a resource. This kind of URI
- ends with a "number sign" (#) followed by an anchor
- identifier (called the fragment identifier).</p>
-
-<p>URIs with fragment identifiers link to a certain element within the
- document, known as the target element. For instance, here is a URI
- pointing to an anchor named <code>section_2</code> in an HTML
- document:</p>
-
-<pre>http://example.com/html/top.html#section_2</pre>
-
-<p>A target element can be represented by the <code>:target</code>
- pseudo-class. If the document's URI has no fragment identifier, then
- the document has no target element.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>p.note:target</pre>
- <p>This selector represents a <code>p</code> element of class
- <code>note</code> that is the target element of the referring
- URI.</p>
-</div>
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>Here, the <code>:target</code> pseudo-class is used to make the
- target element red and place an image before it, if there is one:</p>
- <pre>*:target { color : red }
-*:target::before { content : url(target.png) }</pre>
-</div>
-
-<h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>
-
-<p>If the document language specifies how the human language of an
- element is determined, it is possible to write selectors that
- represent an element based on its language. For example, in HTML <a
- href="#refsHTML4">[HTML4]</a>, the language is determined by a
- combination of the <code>lang</code> attribute, the <code>meta</code>
- element, and possibly by information from the protocol (such as HTTP
- headers). XML uses an attribute called <code>xml:lang</code>, and
- there may be other document language-specific methods for determining
- the language.</p>
-
-<p>The pseudo-class <code>:lang(C)</code> represents an element that
- is in language C. Whether an element is represented by a
- <code>:lang()</code> selector is based solely on the identifier C
- being either equal to, or a hyphen-separated substring of, the
- element's language value, in the same way as if performed by the <a
- href="#attribute-representation">'|='</a> operator in attribute
- selectors. The identifier C does not have to be a valid language
- name.</p>
-
-<p>C must not be empty. (If it is, the selector is invalid.)</p>
-
-<p class="note"><strong>Note:</strong> It is recommended that
- documents and protocols indicate language using codes from RFC 3066 <a
- href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of
- "xml:lang" attributes in the case of XML-based documents <a
- href="#refsXML10">[XML10]</a>. See <a
- href="http://www.w3.org/International/questions/qa-lang-2or3.html">
- "FAQ: Two-letter or three-letter language codes."</a></p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The two following selectors represent an HTML document that is in
- Belgian, French, or German. The two next selectors represent
- <code>q</code> quotations in an arbitrary element in Belgian, French,
- or German.</p>
- <pre>html:lang(fr-be)
-html:lang(de)
-:lang(fr-be) > q
-:lang(de) > q</pre>
-</div>
-
-<h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>
-
-<h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>
-
-<p>The <code>:enabled</code> pseudo-class allows authors to customize
- the look of user interface elements that are enabled — which the
- user can select or activate in some fashion (e.g. clicking on a button
- with a mouse). There is a need for such a pseudo-class because there
- is no way to programmatically specify the default appearance of say,
- an enabled <code>input</code> element without also specifying what it
- would look like when it was disabled.</p>
-
-<p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the
- author to specify precisely how a disabled or inactive user interface
- element should look.</p>
-
-<p>Most elements will be neither enabled nor disabled. An element is
- enabled if the user can either activate it or transfer the focus to
- it. An element is disabled if it could be enabled, but the user cannot
- presently activate it or transfer focus to it.</p>
-
-
-<h5><a name=checked>The :checked pseudo-class</a></h5>
-
-<p>Radio and checkbox elements can be toggled by the user. Some menu
- items are "checked" when the user selects them. When such elements are
- toggled "on" the <code>:checked</code> pseudo-class applies. The
- <code>:checked</code> pseudo-class initially applies to such elements
- that have the HTML4 <code>selected</code> and <code>checked</code>
- attributes as described in <a
- href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section
- 17.2.1 of HTML4</a>, but of course the user can toggle "off" such
- elements in which case the <code>:checked</code> pseudo-class would no
- longer apply. While the <code>:checked</code> pseudo-class is dynamic
- in nature, and is altered by user action, since it can also be based
- on the presence of the semantic HTML4 <code>selected</code> and
- <code>checked</code> attributes, it applies to all media.
-
-
-<h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>
-
-<div class="note">
-
- <p>Radio and checkbox elements can be toggled by the user, but are
- sometimes in an indeterminate state, neither checked nor unchecked.
- This can be due to an element attribute, or DOM manipulation.</p>
-
- <p>A future version of this specification may introduce an
- <code>:indeterminate</code> pseudo-class that applies to such elements.
- <!--While the <code>:indeterminate</code> pseudo-class is dynamic in
- nature, and is altered by user action, since it can also be based on
- the presence of an element attribute, it applies to all media.</p>
-
- <p>Components of a radio-group initialized with no pre-selected choice
- are an example of :indeterminate state.--></p>
-
-</div>
-
-
-<h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>
-
-<p>Selectors introduces the concept of <dfn>structural
- pseudo-classes</dfn> to permit selection based on extra information that
- lies in
- the document tree but cannot be represented by other simple selectors or
- combinators.
-
-<p>Note that standalone pieces of PCDATA (text nodes in the DOM) are
- not counted when calculating the position of an element in the list of
- children of its parent. When calculating the position of an element in
- the list of children of its parent, the index numbering starts at 1.
-
-
-<h5><a name=root-pseudo>:root pseudo-class</a></h5>
-
-<p>The <code>:root</code> pseudo-class represents an element that is
- the root of the document. In HTML 4, this is always the
- <code>HTML</code> element.
-
-
-<h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>
-
-<p>The
- <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>before</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. In
- other words, this matches the <var>b</var>th child of an element after
- all the children have been split into groups of <var>a</var> elements
- each. For example, this allows the selectors to address every other
- row in a table, and could be used to alternate the color
- of paragraph text in a cycle of four. The <var>a</var> and
- <var>b</var> values must be zero, negative integers or positive
- integers. The index of the first child of an element is 1.
-
-<p>In addition to this, <code>:nth-child()</code> can take
- '<code>odd</code>' and '<code>even</code>' as arguments instead.
- '<code>odd</code>' has the same signification as <code>2n+1</code>,
- and '<code>even</code>' has the same signification as <code>2n</code>.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
-tr:nth-child(odd) /* same */
-tr:nth-child(2n) /* represents every even row of an HTML table */
-tr:nth-child(even) /* same */
-
-/* Alternate paragraph colours in CSS */
-p:nth-child(4n+1) { color: navy; }
-p:nth-child(4n+2) { color: green; }
-p:nth-child(4n+3) { color: maroon; }
-p:nth-child(4n+4) { color: purple; }</pre>
-</div>
-
-<p>When <var>a</var>=0, no repeating is used, so for example
- <code>:nth-child(0n+5)</code> matches only the fifth child. When
- <var>a</var>=0, the <var>a</var><code>n</code> part need not be
- included, so the syntax simplifies to
- <code>:nth-child(<var>b</var>)</code> and the last example simplifies
- to <code>:nth-child(5)</code>.
-
-<div class="example">
- <p>Examples:</p>
-<pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */
-foo:nth-child(1) /* same */</pre>
-</div>
-
-<p>When <var>a</var>=1, the number may be omitted from the rule.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selectors are therefore equivalent:</p>
-<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
-bar:nth-child(n+0) /* same */
-bar:nth-child(n) /* same */
-bar /* same but lower specificity (0,0,1) */</pre>
-</div>
-
-<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In
- such a case, the <var>b</var> part may be omitted.
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
-tr:nth-child(2n) /* same */</pre>
-</div>
-
-<p>If both <var>a</var> and <var>b</var> are equal to zero, the
- pseudo-class represents no element in the document tree.</p>
-
-<p>The value <var>a</var> can be negative, but only the positive
- values of <var>a</var><code>n</code>+<var>b</var>, for
- <code>n</code>≥0, may represent an element in the document
- tree.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
-</div>
-
-<p>When the value <var>b</var> is negative, the "+" character in the
- expression must be removed (it is effectively replaced by the "-"
- character indicating the negative value of <var>b</var>).</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>: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 */</pre>
-</div>
-
-
-<h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>after</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. See
- <code>:nth-child()</code> pseudo-class for the syntax of its argument.
- It also accepts the '<code>even</code>' and '<code>odd</code>' values
- as arguments.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
-
-foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
- counting from the last one */</pre>
-</div>
-
-
-<h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>before</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. In other words, this matches the <var>b</var>th child
- of that type after all the children of that type have been split into
- groups of a elements each. See <code>:nth-child()</code> pseudo-class
- for the syntax of its argument. It also accepts the
- '<code>even</code>' and '<code>odd</code>' values.
-
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>This allows an author to alternate the position of floated images:</p>
-<pre>img:nth-of-type(2n+1) { float: right; }
-img:nth-of-type(2n) { float: left; }</pre>
-</div>
-
-
-<h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>after</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. See <code>:nth-child()</code> pseudo-class for the
- syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>'
- values.
-
-
-<div class="example">
- <p>Example:</p>
-
- <p>To represent all <code>h2</code> children of an XHTML
- <code>body</code> except the first and last, one could use the
- following selector:</p>
- <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
- <p>In this case, one could also use <code>:not()</code>, although the
- selector ends up being just as long:</p>
- <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
-</div>
-
-
-<h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
- pseudo-class
- represents an element that is the first child of some other element.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- the first child of a <code>div</code> element:</p>
- <pre>div > p:first-child</pre>
- <p>This selector can represent the <code>p</code> inside the
- <code>div</code> of the following fragment:</p>
- <pre><p> The last P before the note.</p>
-<div class="note">
- <p> The first P inside the note.</p>
-</div></pre>
- but cannot represent the second <code>p</code> in the following
- fragment:
- <pre><p> The last P before the note.</p>
-<div class="note">
- <h2> Note </h2>
- <p> The first P inside the note.</p>
-</div></pre>
- <p>The following two selectors are usually equivalent:</p>
- <pre>* > a:first-child /* a is first child of any element */
-a:first-child /* Same (assuming a is not the root element) */</pre>
-</div>
-
-<h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
- pseudo-class
- represents an element that is the last child of some other element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a list item <code>li</code> that
- is the last child of an ordered list <code>ol</code>.
- <pre>ol > li:last-child</pre>
-</div>
-
-<h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
- pseudo-class
- represents an element that is the first sibling of its type in the list of
- children of its parent element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a definition title
- <code>dt</code> inside a definition list <code>dl</code>, this
- <code>dt</code> being the first of its type in the list of children of
- its parent element.</p>
- <pre>dl dt:first-of-type</pre>
- <p>It is a valid description for the first two <code>dt</code>
- elements in the following example but not for the third one:</p>
-<pre><dl>
- <dt>gigogne</dt>
- <dd>
- <dl>
- <dt>fusée</dt>
- <dd>multistage rocket</dd>
- <dt>table</dt>
- <dd>nest of tables</dd>
- </dl>
- </dd>
-</dl></pre>
-</div>
-
-<h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-of-type(1)</code>. The
- <code>:last-of-type</code> pseudo-class represents an element that is
- the last sibling of its type in the list of children of its parent
- element.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents the last data cell
- <code>td</code> of a table row.</p>
- <pre>tr > td:last-of-type</pre>
-</div>
-
-<h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children. Same as
- <code>:first-child:last-child</code> or
- <code>:nth-child(1):nth-last-child(1)</code>, but with a lower
- specificity.</p>
-
-<h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children with the same element name. Same
- as <code>:first-of-type:last-of-type</code> or
- <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
- specificity.</p>
-
-
-<h5><a name=empty-pseudo></a>:empty pseudo-class</h5>
-
-<p>The <code>:empty</code> pseudo-class represents an element that has
- no children at all. In terms of the DOM, only element nodes and text
- nodes (including CDATA nodes and entity references) whose data has a
- non-zero length must be considered as affecting emptiness; comments,
- PIs, and other nodes must not affect whether an element is considered
- empty or not.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p><code>p:empty</code> is a valid representation of the following fragment:
- </p>
- <pre><p></p></pre>
- <p><code>foo:empty</code> is not a valid representation for the
- following fragments:</p>
- <pre><foo>bar</foo></pre>
- <pre><foo><bar>bla</bar></foo></pre>
- <pre><foo>this is not <bar>:empty</bar></foo></pre>
-</div>
-
-<h4><a name=content-selectors>6.6.6. Blank</a></h4>
-<!-- It's the Return of Appendix H!!! Run away! -->
-
-<p>This section intentionally left blank.</p>
-<!-- (used to be :contains()) -->
-
-<h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>
-
-<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
- functional notation taking a <a href="#simple-selectors-dfn">simple
- selector</a> (excluding the negation pseudo-class itself and
- pseudo-elements) as an argument. It represents an element that is not
- represented by the argument.
-
- <!-- pseudo-elements are not simple selectors, so the above paragraph
-may be a bit confusing -->
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following CSS selector matches all <code>button</code>
- elements in an HTML document that are not disabled.</p>
- <pre>button:not([DISABLED])</pre>
- <p>The following selector represents all but <code>FOO</code>
- elements.</p>
- <pre>*:not(FOO)</pre>
- <p>The following group of selectors represents all HTML elements
- except links.</p>
- <pre>html|*:not(:link):not(:visited)</pre>
-</div>
-
-<p>Default namespace declarations do not affect the argument of the
- negation pseudo-class unless the argument is a universal selector or a
- type selector.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>Assuming that the default namespace is bound to
- "http://example.com/", the following selector represents all
- elements that are not in that namespace:</p>
- <pre>*|*:not(*)</pre>
- <p>The following CSS selector matches any element being hovered,
- regardless of its namespace. In particular, it is not limited to
- only matching elements in the default namespace that are not being
- hovered, and elements not in the default namespace don't match the
- rule when they <em>are</em> being hovered.</p>
- <pre>*|*:not(:hover)</pre>
-</div>
-
-<p class="note"><strong>Note</strong>: the :not() pseudo allows
- useless selectors to be written. For instance <code>:not(*|*)</code>,
- which represents no element at all, or <code>foo:not(bar)</code>,
- which is equivalent to <code>foo</code> but with a higher
- specificity.</p>
-
-<h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>
-
-<p>Pseudo-elements create abstractions about the document tree beyond
- those specified by the document language. For instance, document
- languages do not offer mechanisms to access the first letter or first
- line of an element's content. Pseudo-elements allow designers to refer
- to this otherwise inaccessible information. Pseudo-elements may also
- provide designers a way to refer to content that does not exist in the
- source document (e.g., the <code>::before</code> and
- <code>::after</code> pseudo-elements give access to generated
- content).</p>
-
-<p>A pseudo-element is made of two colons (<code>::</code>) followed
- by the name of the pseudo-element.</p>
-
-<p>This <code>::</code> notation is introduced by the current document
- in order to establish a discrimination between pseudo-classes and
- pseudo-elements. For compatibility with existing style sheets, user
- agents must also accept the previous one-colon notation for
- pseudo-elements introduced in CSS levels 1 and 2 (namely,
- <code>:first-line</code>, <code>:first-letter</code>,
- <code>:before</code> and <code>:after</code>). This compatibility is
- not allowed for the new pseudo-elements introduced in CSS level 3.</p>
-
-<p>Only one pseudo-element may appear per selector, and if present it
- must appear after the sequence of simple selectors that represents the
- <a href="#subject">subjects</a> of the selector. <span class="note">A
-future version of this specification may allow multiple
-pesudo-elements per selector.</span></p>
-
-<h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>
-
-<p>The <code>::first-line</code> pseudo-element describes the contents
- of the first formatted line of an element.
-
-<div class="example">
- <p>CSS example:</p>
- <pre>p::first-line { text-transform: uppercase }</pre>
- <p>The above rule means "change the letters of the first line of every
- paragraph to uppercase".</p>
-</div>
-
-<p>The selector <code>p::first-line</code> does not match any real
- HTML element. It does match a pseudo-element that conforming user
- agents will insert at the beginning of every paragraph.</p>
-
-<p>Note that the length of the first line depends on a number of
- factors, including the width of the page, the font size, etc. Thus,
- an ordinary HTML paragraph such as:</p>
-
-<pre>
-<P>This is a somewhat long HTML
-paragraph that will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the lines of which happen to be broken as follows:
-
-<pre>
-THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
-will be broken into several lines. The first
-line will be identified by a fictional tag
-sequence. The other lines will be treated as
-ordinary lines in the paragraph.
-</pre>
-
-<p>This paragraph might be "rewritten" by user agents to include the
- <em>fictional tag sequence</em> for <code>::first-line</code>. This
- fictional tag sequence helps to show how properties are inherited.</p>
-
-<pre>
-<P><b><P::first-line></b> This is a somewhat long HTML
-paragraph that <b></P::first-line></b> will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>If a pseudo-element breaks up a real element, the desired effect
- can often be described by a fictional tag sequence that closes and
- then re-opens the element. Thus, if we mark up the previous paragraph
- with a <code>span</code> element:</p>
-
-<pre>
-<P><b><SPAN class="test"></b> This is a somewhat long HTML
-paragraph that will be broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the user agent could simulate start and end tags for
- <code>span</code> when inserting the fictional tag sequence for
- <code>::first-line</code>.
-
-<pre>
-<P><P::first-line><b><SPAN class="test"></b> This is a
-somewhat long HTML
-paragraph that will <b></SPAN></b></P::first-line><b><SPAN
- class="test"></b> be
-broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>In CSS, the <code>::first-line</code> pseudo-element can only be
- attached to a block-level element, an inline-block, a table-caption,
- or a table-cell.</p>
-
-<p><a name="first-formatted-line"></a>The "first formatted line" of an
- element may occur inside a
- block-level descendant in the same flow (i.e., a block-level
- descendant that is not positioned and not a float). E.g., the first
- line of the <code>div</code> in <code><DIV><P>This
- line...</P></DIV></code> is the first line of the <code>p</code>
- (assuming
- that both <code>p</code> and <code>div</code> are block-level).
-
-<p>The first line of a table-cell or inline-block cannot be the first
- formatted line of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first formatted line of the
- <code>div</code> is not the line "Hello".
-
-<p class="note">Note that the first line of the <code>p</code> in this
- fragment: <code><p><br>First...</code> doesn't contain any
- letters (assuming the default style for <code>br</code> in HTML
- 4). The word "First" is not on the first formatted line.
-
-<p>A UA should act as if the fictional start tags of the
- <code>::first-line</code> pseudo-elements were nested just inside the
- innermost enclosing block-level element. (Since CSS1 and CSS2 were
- silent on this case, authors should not rely on this behavior.) Here
- is an example. The fictional tag sequence for</p>
-
-<pre>
-<DIV>
- <P>First paragraph</P>
- <P>Second paragraph</P>
-</DIV>
-</pre>
-
-<p>is</p>
-
-<pre>
-<DIV>
- <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
- <P><P::first-line>Second paragraph</P::first-line></P>
-</DIV>
-</pre>
-
-<p>The <code>::first-line</code> pseudo-element is similar to an
- inline-level element, but with certain restrictions. In CSS, the
- following properties apply to a <code>::first-line</code>
- pseudo-element: font properties, color property, background
- properties, 'word-spacing', 'letter-spacing', 'text-decoration',
- 'vertical-align', 'text-transform', 'line-height'. UAs may apply other
- properties as well.</p>
-
-
-<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
-
-<p>The <code>::first-letter</code> pseudo-element represents the first
- letter of the first line of a block, if it is not preceded by any
- other content (such as images or inline tables) on its line. The
- ::first-letter pseudo-element may be used for "initial caps" and "drop
- caps", which are common typographical effects. This type of initial
- letter is similar to an inline-level element if its 'float' property
- is 'none'; otherwise, it is similar to a floated element.</p>
-
-<p>In CSS, these are the properties that apply to <code>::first-letter</code>
- pseudo-elements: font properties, 'text-decoration', 'text-transform',
- 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
- 'float', 'vertical-align' (only if 'float' is 'none'), margin
- properties, padding properties, border properties, color property,
- background properties. UAs may apply other properties as well. To
- allow UAs to render a typographically correct drop cap or initial cap,
- the UA may choose a line-height, width and height based on the shape
- of the letter, unlike for normal elements.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>This example shows a possible rendering of an initial cap. Note
- that the 'line-height' that is inherited by the
- <code>::first-letter</code>
- pseudo-element is 1.1, but the UA in this example has computed the
- height of the first letter differently, so that it doesn't cause any
- unnecessary space between the first two lines. Also note that the
- fictional start tag of the first letter is inside the <span>span</span>,
- and thus
- the font weight of the first letter is normal, not bold as the <span>span</span>:
-<pre>
-p { line-height: 1.1 }
-p::first-letter { font-size: 3em; font-weight: normal }
-span { font-weight: bold }
-...
-<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
-Erbarremt over my en mijn benaeuwde vesten<br>
-En arme burgery, en op mijn volcx gebed<br>
-En dagelix geschrey de bange stad ontzet.
-</pre>
- <div class="figure">
- <p><img src="initial-cap.png"
- alt="Image illustrating the ::first-letter pseudo-element">
- </div>
-</div>
-
-<div class="example">
- <p>The following CSS will make a drop cap initial letter span about two
- lines:</p>
-
-<pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<HTML>
- <HEAD>
- <TITLE>Drop cap initial letter</TITLE>
- <STYLE type="text/css">
- P { font-size: 12pt; line-height: 1.2 }
- P::first-letter { font-size: 200%; font-weight: bold; float: left }
- SPAN { text-transform: uppercase }
- </STYLE>
- </HEAD>
- <BODY>
- <P><SPAN>The first</SPAN> few words of an article
- in The Economist.</P>
- </BODY>
-</HTML>
-</pre>
-
- <p>This example might be formatted as follows:</p>
-
- <div class="figure">
- <P><img src="first-letter.gif"
- alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements">
- </p>
- </div>
-
- <p>The <span class="index-inst" title="fictional tag
-sequence">fictional tag sequence</span> is:</p>
-
-<pre>
-<P>
-<SPAN>
-<P::first-letter>
-T
-</P::first-letter>he first
-</SPAN>
-few words of an article in the Economist.
-</P>
-</pre>
-
- <p>Note that the <code>::first-letter</code> pseudo-element tags abut
- the content (i.e., the initial character), while the ::first-line
- pseudo-element start tag is inserted right after the start tag of the
- block element.</p></div>
-
-<p>In order to achieve traditional drop caps formatting, user agents
- may approximate font sizes, for example to align baselines. Also, the
- glyph outline may be taken into account when formatting.</p>
-
-<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
- "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
- punctuation classes), that precedes or follows the first letter should
- be included. <a href="#refsUNICODE">[UNICODE]</a></p>
-
-<div class="figure">
- <P><img src="first-letter2.gif" alt="Quotes that precede the
-first letter should be included."></p>
-</div>
-
-<p>The <code>::first-letter</code> also applies if the first letter is
- in fact a digit, e.g., the "6" in "67 million dollars is a lot of
- money."</p>
-
-<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
- block, list-item, table-cell, table-caption, and inline-block
- elements. <span class="note">A future version of this specification
-may allow this pesudo-element to apply to more element
-types.</span></p>
-
-<p>The <code>::first-letter</code> pseudo-element can be used with all
- such elements that contain text, or that have a descendant in the same
- flow that contains text. A UA should act as if the fictional start tag
- of the ::first-letter pseudo-element is just before the first text of
- the element, even if that first text is in a descendant.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The fictional tag sequence for this HTMLfragment:
-<pre><div>
-<p>The first text.</pre>
- <p>is:
-<pre><div>
-<p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>
-</div>
-
-<p>The first letter of a table-cell or inline-block cannot be the
- first letter of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first letter of the <code>div</code> is
- not the
- letter "H". In fact, the <code>div</code> doesn't have a first letter.
-
-<p>The first letter must occur on the <a
- href="#first-formatted-line">first formatted line.</a> For example, in
- this fragment: <code><p><br>First...</code> the first line
- doesn't contain any letters and <code>::first-letter</code> doesn't
- match anything (assuming the default style for <code>br</code> in HTML
- 4). In particular, it does not match the "F" of "First."
-
-<p>In CSS, if an element is a list item ('display: list-item'), the
- <code>::first-letter</code> applies to the first letter in the
- principal box after the marker. UAs may ignore
- <code>::first-letter</code> on list items with 'list-style-position:
- inside'. If an element has <code>::before</code> or
- <code>::after</code> content, the <code>::first-letter</code> applies
- to the first letter of the element <em>including</em> that content.
-
-<div class="example">
- <p>Example:</p>
-
- <p>After the rule 'p::before {content: "Note: "}', the selector
- 'p::first-letter' matches the "N" of "Note".</p>
-</div>
-
-<p>Some languages may have specific rules about how to treat certain
- letter combinations. In Dutch, for example, if the letter combination
- "ij" appears at the beginning of a word, both letters should be
- considered within the <code>::first-letter</code> pseudo-element.
-
-<p>If the letters that would form the ::first-letter are not in the
- same element, such as "'T" in <code><p>'<em>T...</code>, the UA
- may create a ::first-letter pseudo-element from one of the elements,
- both elements, or simply not create a pseudo-element.</p>
-
-<p>Similarly, if the first letter(s) of the block are not at the start
- of the line (for example due to bidirectional reordering), then the UA
- need not create the pseudo-element(s).
-
-<div class="example">
- <p>Example:</p>
-
- <p><a name="overlapping-example">The following example</a> illustrates
- how overlapping pseudo-elements may interact. The first letter of
- each P element will be green with a font size of '24pt'. The rest of
- the first formatted line will be 'blue' while the rest of the
- paragraph will be 'red'.</p>
-
-<pre>p { color: red; font-size: 12pt }
-p::first-letter { color: green; font-size: 200% }
-p::first-line { color: blue }
-
-<P>Some text that ends up on two lines</P></pre>
-
- <p>Assuming that a line break will occur before the word "ends", the
-<span class="index-inst" title="fictional tag sequence">fictional tag
-sequence</span> for this fragment might be:</p>
-
-<pre><P>
-<P::first-line>
-<P::first-letter>
-S
-</P::first-letter>ome text that
-</P::first-line>
-ends up on two lines
-</P></pre>
-
- <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
- element. Properties set on <code>::first-line</code> are inherited by
- <code>::first-letter</code>, but are overridden if the same property is
- set on
- <code>::first-letter</code>.</p>
-</div>
-
-
-<h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection
- pseudo-element</a></h4>
-
-<p>The <code>::selection</code> pseudo-element applies to the portion
- of a document that has been highlighted by the user. This also
- applies, for example, to selected text within an editable text
- field. This pseudo-element should not be confused with the <code><a
- href="#checked">:checked</a></code> pseudo-class (which used to be
- named <code>:selected</code>)
-
-<p>Although the <code>::selection</code> pseudo-element is dynamic in
- nature, and is altered by user action, it is reasonable to expect that
- when a UA re-renders to a static medium (such as a printed page, see
- <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a
- dynamic medium (like screen), the UA may wish to transfer the current
- <code>::selection</code> state to that other medium, and have all the
- appropriate formatting and rendering take effect as well. This is not
- required — UAs may omit the <code>::selection</code>
- pseudo-element for static media.
-
-<p>These are the CSS properties that apply to <code>::selection</code>
- pseudo-elements: color, background, cursor (optional), outline
- (optional). The computed value of the 'background-image' property on
- <code>::selection</code> may be ignored.
-
-
-<h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>
-
-<p>The <code>::before</code> and <code>::after</code> pseudo-elements
- can be used to describe generated content before or after an element's
- content. They are explained in CSS 2.1 <a
- href="#refsCSS21">[CSS21]</a>.</p>
-
-<p>When the <code>::first-letter</code> and <code>::first-line</code>
- pseudo-elements are combined with <code>::before</code> and
- <code>::after</code>, they apply to the first letter or line of the
- element including the inserted text.</p>
-
-<h2><a name=combinators>8. Combinators</a></h2>
-
-<h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>
-
-<p>At times, authors may want selectors to describe an element that is
- the descendant of another element in the document tree (e.g., "an
- <code>EM</code> element that is contained within an <code>H1</code>
- element"). Descendant combinators express such a relationship. A
- descendant combinator is <a href="#whitespace">white space</a> that
- separates two sequences of simple selectors. A selector of the form
- "<code>A B</code>" represents an element <code>B</code> that is an
- arbitrary descendant of some ancestor element <code>A</code>.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>For example, consider the following selector:</p>
- <pre>h1 em</pre>
- <p>It represents an <code>em</code> element being the descendant of
- an <code>h1</code> element. It is a correct and valid, but partial,
- description of the following fragment:</p>
- <pre><h1>This <span class="myclass">headline
-is <em>very</em> important</span></h1></pre>
- <p>The following selector:</p>
- <pre>div * p</pre>
- <p>represents a <code>p</code> element that is a grandchild or later
- descendant of a <code>div</code> element. Note the whitespace on
- either side of the "*" is not part of the universal selector; the
- whitespace is a combinator indicating that the DIV must be the
- ancestor of some element, and that that element must be an ancestor
- of the P.</p>
-
- <p>The following selector, which combines descendant combinators and
- <a href="#attribute-selectors">attribute selectors</a>, represents an
- element that (1) has the <code>href</code> attribute set and (2) is
- inside a <code>p</code> that is itself inside a <code>div</code>:</p>
- <pre>div p *[href]</pre>
-</div>
-
-<h3><a name=child-combinators>8.2. Child combinators</a></h3>
-
-<p>A <dfn>child combinator</dfn> describes a childhood relationship
- between two elements. A child combinator is made of the
- "greater-than sign" (<code>></code>) character and
- separates two sequences of simple selectors.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- child of <code>body</code>:</p>
- <pre>body > p</pre>
- <p>The following example combines descendant combinators and child
- combinators.</p>
- <pre>div ol>li p</pre>
- <!-- LEAVE THOSE SPACES OUT! see below -->
- <p>It represents a <code>p</code> element that is a descendant of an
- <code>li</code> element; the <code>li</code> element must be the
- child of an <code>ol</code> element; the <code>ol</code> element must
- be a descendant of a <code>div</code>. Notice that the optional white
- space around the ">" combinator has been left out.</p>
-</div>
-
-<p>For information on selecting the first child of an element, please
- see the section on the <code><a
- href="#structural-pseudos">:first-child</a></code> pseudo-class
- above.</p>
-
-<h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>
-
-<p>There are two different sibling combinators: the adjacent sibling
- combinator and the general sibling combinator. In both cases,
- non-element nodes (e.g. text between elements) are ignored when
- considering adjacency of elements.</p>
-
-<h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>
-</h4>
-
-<p>The adjacent sibling combinator is made of the "plus
- sign" (U+002B, <code>+</code>) character that separates two
- sequences of simple selectors. The elements represented by the two
- sequences share the same parent in the document tree and the element
- represented by the first sequence immediately precedes the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element
- immediately following a <code>math</code> element:</p>
- <pre>math + p</pre>
- <p>The following selector is conceptually similar to the one in the
- previous example, except that it adds an attribute selector — it
- adds a constraint to the <code>h1</code> element, that it must have
- <code>class="opener"</code>:</p>
- <pre>h1.opener + h2</pre>
-</div>
-
-
-<h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a>
-</h4>
-
-<p>The general sibling combinator is made of the "tilde"
- (U+007E, <code>~</code>) character that separates two sequences of
- simple selectors. The elements represented by the two sequences share
- the same parent in the document tree and the element represented by
- the first sequence precedes (not necessarily immediately) the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>h1 ~ pre</pre>
- <p>represents a <code>pre</code> element following an <code>h1</code>. It
- is a correct and valid, but partial, description of:</p>
- <pre><h1>Definition of the function a</h1>
-<p>Function a(x) has to be applied to all figures in the table.</p>
-<pre>function a(x) = 12x/13.5</pre></pre>
-</div>
-
-<h2><a name=specificity>9. Calculating a selector's specificity</a></h2>
-
-<p>A selector's specificity is calculated as follows:</p>
-
-<ul>
- <li>count the number of ID selectors in the selector (= a)</li>
- <li>count the number of class selectors, attributes selectors, and
- pseudo-classes in the selector (= b)
- </li>
- <li>count the number of element names in the selector (= c)</li>
- <li>ignore pseudo-elements</li>
-</ul>
-
-<p>Selectors inside <a href="#negation">the negation pseudo-class</a>
- are counted like any other, but the negation itself does not count as
- a pseudo-class.</p>
-
-<p>Concatenating the three numbers a-b-c (in a number system with a
- large base) gives the specificity.</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>* /* a=0 b=0 c=0 -> specificity = 0 */
-LI /* a=0 b=0 c=1 -> specificity = 1 */
-UL LI /* a=0 b=0 c=2 -> specificity = 2 */
-UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
-H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
-UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
-LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
-#x34y /* a=1 b=0 c=0 -> specificity = 100 */
-#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
-</pre>
-</div>
-
-<p class="note"><strong>Note:</strong> the specificity of the styles
- specified in an HTML <code>style</code> attribute is described in CSS
- 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>
-
-<h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>
-
-<h3><a name=grammar>10.1. Grammar</a></h3>
-
-<p>The grammar below defines the syntax of Selectors. It is globally
- LL(1) and can be locally LL(2) (but note that most UA's should not use
- it directly, since it doesn't express the parsing conventions). The
- format of the productions is optimized for human consumption and some
- shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)
- are used:</p>
-
-<ul>
- <li><b>*</b>: 0 or more
- <li><b>+</b>: 1 or more
- <li><b>?</b>: 0 or 1
- <li><b>|</b>: separates alternatives
- <li><b>[ ]</b>: grouping</li>
-</ul>
-
-<p>The productions are:</p>
-
-<pre>selectors_group
- : selector [ COMMA S* selector ]*
- ;
-
-selector
- : simple_selector_sequence [ combinator simple_selector_sequence ]*
- ;
-
-combinator
- /* combinators can be surrounded by white space */
- : PLUS S* | GREATER S* | TILDE S* | S+
- ;
-
-simple_selector_sequence
- : [ type_selector | universal ]
- [ HASH | class | attrib | pseudo | negation ]*
- | [ HASH | class | attrib | pseudo | negation ]+
- ;
-
-type_selector
- : [ namespace_prefix ]? element_name
- ;
-
-namespace_prefix
- : [ IDENT | '*' ]? '|'
- ;
-
-element_name
- : IDENT
- ;
-
-universal
- : [ namespace_prefix ]? '*'
- ;
-
-class
- : '.' IDENT
- ;
-
-attrib
- : '[' S* [ namespace_prefix ]? IDENT S*
- [ [ PREFIXMATCH |
- SUFFIXMATCH |
- SUBSTRINGMATCH |
- '=' |
- INCLUDES |
- DASHMATCH ] S* [ IDENT | STRING ] S*
- ]? ']'
- ;
-
-pseudo
- /* '::' starts a pseudo-element, ':' a pseudo-class */
- /* Exceptions: :first-line, :first-letter, :before and :after. */
- /* Note that pseudo-elements are restricted to one per selector and */
- /* occur only in the last simple_selector_sequence. */
- : ':' ':'? [ IDENT | functional_pseudo ]
- ;
-
-functional_pseudo
- : FUNCTION S* expression ')'
- ;
-
-expression
- /* In CSS3, the expressions are identifiers, strings, */
- /* or of the form "an+b" */
- : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
- ;
-
-negation
- : NOT S* negation_arg S* ')'
- ;
-
-negation_arg
- : type_selector | universal | HASH | class | attrib | pseudo
- ;</pre>
-
-
-<h3><a name=lex>10.2. Lexical scanner</a></h3>
-
-<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see
- <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is
- case-insensitive.</p>
-
-<p>The two occurrences of "\377" represent the highest character
- number that current versions of Flex can deal with (decimal 255). They
- should be read as "\4177777" (decimal 1114111), which is the highest
- possible code point in Unicode/ISO-10646. <a
- href="#refsUNICODE">[UNICODE]</a></p>
-
-<pre>%option case-insensitive
-
-ident [-]?{nmstart}{nmchar}*
-name {nmchar}+
-nmstart [_a-z]|{nonascii}|{escape}
-nonascii [^\0-\177]
-unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
-escape {unicode}|\\[^\n\r\f0-9a-f]
-nmchar [_a-z0-9-]|{nonascii}|{escape}
-num [0-9]+|[0-9]*\.[0-9]+
-string {string1}|{string2}
-string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
-string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
-invalid {invalid1}|{invalid2}
-invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
-invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
-nl \n|\r\n|\r|\f
-w [ \t\r\n\f]*
-
-%%
-
-[ \t\r\n\f]+ return S;
-
-"~=" return INCLUDES;
-"|=" return DASHMATCH;
-"^=" return PREFIXMATCH;
-"$=" return SUFFIXMATCH;
-"*=" return SUBSTRINGMATCH;
-{ident} return IDENT;
-{string} return STRING;
-{ident}"(" return FUNCTION;
-{num} return NUMBER;
-"#"{name} return HASH;
-{w}"+" return PLUS;
-{w}">" return GREATER;
-{w}"," return COMMA;
-{w}"~" return TILDE;
-":not(" return NOT;
-@{ident} return ATKEYWORD;
-{invalid} return INVALID;
-{num}% return PERCENTAGE;
-{num}{ident} return DIMENSION;
-"<!--" return CDO;
-"-->" return CDC;
-
-"url("{w}{string}{w}")" return URI;
-"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI;
-U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;
-
-\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
-
-. return *yytext;</pre>
-
-
-<h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>
-
-<p>An important issue is the interaction of CSS selectors with XML
- documents in web clients that were produced prior to this
- document. Unfortunately, due to the fact that namespaces must be
- matched based on the URI which identifies the namespace, not the
- namespace prefix, some mechanism is required to identify namespaces in
- CSS by their URI as well. Without such a mechanism, it is impossible
- to construct a CSS style sheet which will properly match selectors in
- all cases against a random set of XML documents. However, given
- complete knowledge of the XML document to which a style sheet is to be
- applied, and a limited use of namespaces within the XML document, it
- is possible to construct a style sheet in which selectors would match
- elements and attributes correctly.</p>
-
-<p>It should be noted that a down-level CSS client will (if it
- properly conforms to CSS forward compatible parsing rules) ignore all
- <code>@namespace</code> at-rules, as well as all style rules that make
- use of namespace qualified element type or attribute selectors. The
- syntax of delimiting namespace prefixes in CSS was deliberately chosen
- so that down-level CSS clients would ignore the style rules rather
- than possibly match them incorrectly.</p>
-
-<p>The use of default namespaces in CSS makes it possible to write
- element type selectors that will function in both namespace aware CSS
- clients as well as down-level clients. It should be noted that
- down-level clients may incorrectly match selectors against XML
- elements in other namespaces.</p>
-
-<p>The following are scenarios and examples in which it is possible to
- construct style sheets which would function properly in web clients
- that do not implement this proposal.</p>
-
-<ol>
- <li>
-
- <p>The XML document does not use namespaces.</p>
-
- <ul>
-
- <li>In this case, it is obviously not necessary to declare or use
- namespaces in the style sheet. Standard CSS element type and
- attribute selectors will function adequately in a down-level
- client.
- </li>
-
- <li>In a CSS namespace aware client, the default behavior of
- element selectors matching without regard to namespace will
- function properly against all elements, since no namespaces are
- present. However, the use of specific element type selectors
- that
- match only elements that have no namespace ("<code>|name</code>")
- will guarantee that selectors will match only XML elements that
- do
- not have a declared namespace.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document defines a single, default namespace used
- throughout the document. No namespace prefixes are used in element
- names.</p>
-
- <ul>
-
- <li>In this case, a down-level client will function as if
- namespaces were not used in the XML document at all. Standard
- CSS
- element type and attribute selectors will match against all
- elements.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document does <b>not</b> use a default namespace, all
- namespace prefixes used are known to the style sheet author, and
- there is a direct mapping between namespace prefixes and namespace
- URIs. (A given prefix may only be mapped to one namespace URI
- throughout the XML document; there may be multiple prefixes mapped
- to the same URI).</p>
-
- <ul>
-
- <li>In this case, the down-level client will view and match
- element type and attribute selectors based on their fully
- qualified name, not the local part as outlined in the <a
- href="#typenmsp">Type selectors and Namespaces</a>
- section. CSS
- selectors may be declared using an escaped colon
- "<code>\:</code>"
- to describe the fully qualified names, e.g.
- "<code>html\:h1</code>" will match
- <code><html:h1></code>. Selectors using the qualified name
- will only match XML elements that use the same prefix. Other
- namespace prefixes used in the XML that are mapped to the same
- URI
- will not match as expected unless additional CSS style rules are
- declared for them.
- </li>
-
- <li>Note that selectors declared in this fashion will
- <em>only</em> match in down-level clients. A CSS namespace aware
- client will match element type and attribute selectors based on
- the name's local part. Selectors declared with the fully
- qualified name will not match (unless there is no namespace
- prefix
- in the fully qualified name).
- </li>
-
- </ul>
-
- </li>
-
-</ol>
-
-<p>In other scenarios: when the namespace prefixes used in the XML are
- not known in advance by the style sheet author; or a combination of
- elements with no namespace are used in conjunction with elements using
- a default namespace; or the same namespace prefix is mapped to
- <em>different</em> namespace URIs within the same document, or in
- different documents; it is impossible to construct a CSS style sheet
- that will function properly against all elements in those documents,
- unless, the style sheet is written using a namespace URI syntax (as
- outlined in this document or similar) and the document is processed by
- a CSS and XML namespace aware client.</p>
-
-<h2><a name=profiling>12. Profiles</a></h2>
-
-<p>Each specification using Selectors must define the subset of W3C
- Selectors it allows and excludes, and describe the local meaning of
- all the components of that subset.</p>
-
-<p>Non normative examples:
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 1</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>class selectors<br>ID selectors<br>:link,
- :visited and :active pseudo-classes<br>descendant combinator
- <br>::first-line and ::first-letter pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>universal selector<br>attribute selectors<br>:hover and
- :focus
- pseudo-classes<br>:target pseudo-class<br>:lang()
- pseudo-class<br>all UI
- element states pseudo-classes<br>all structural
- pseudo-classes<br>negation pseudo-class<br>all
- UI element fragments pseudo-elements<br>::before and ::after
- pseudo-elements<br>child combinators<br>sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>only one class selector allowed per sequence of simple
- selectors
- </td>
- </tr>
- </tbody>
- </table>
- <br><br>
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 2</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>universal selector<br>attribute presence and
- values selectors<br>class selectors<br>ID selectors<br>:link,
- :visited,
- :active, :hover, :focus, :lang() and :first-child pseudo-classes
- <br>descendant combinator<br>child combinator<br>adjacent
- sibling
- combinator<br>::first-line and ::first-letter
- pseudo-elements<br>::before
- and ::after pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>content selectors<br>substring matching attribute
- selectors<br>:target pseudo-classes<br>all UI element
- states pseudo-classes<br>all structural pseudo-classes other
- than :first-child<br>negation pseudo-class<br>all UI element
- fragments pseudo-elements<br>general sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>more than one class selector per sequence of simple selectors
- (CSS1
- constraint) allowed
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>In CSS, selectors express pattern matching rules that determine which
- style
- rules apply to elements in the document tree.
-
- <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
- with attribute <code>name</code> set inside a section 1 header
- <code>h1</code>:
- <pre>h1 a[name]</pre>
-
- <p>All CSS declarations attached to such a selector are applied to elements
- matching it.</div>
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>STTS 3</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>
-
- <p>type selectors<br>universal selectors<br>attribute
- selectors<br>class
- selectors<br>ID selectors<br>all structural
- pseudo-classes<br>
- all combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>non-accepted pseudo-classes<br>pseudo-elements<br></td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>some selectors and combinators are not allowed in fragment
- descriptions on the right side of STTS declarations.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>Selectors can be used in STTS 3 in two different
- manners:
- <ol>
- <li>a selection mechanism equivalent to CSS selection mechanism:
- declarations
- attached to a given selector are applied to elements matching that
- selector,
- <li>fragment descriptions that appear on the right side of declarations.
- </li>
- </ol>
-</div>
-
-<h2><a name=Conformance></a>13. Conformance and requirements</h2>
-
-<p>This section defines conformance with the present specification only.
-
-<p>The inability of a user agent to implement part of this specification due to
- the limitations of a particular device (e.g., non interactive user agents
- will
- probably not implement dynamic pseudo-classes because they make no sense
- without
- interactivity) does not imply non-conformance.
-
-<p>All specifications reusing Selectors must contain a <a
- href="#profiling">Profile</a> listing the
- subset of Selectors it accepts or excludes, and describing the constraints
- it adds to the current specification.
-
-<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a
- token
- which is not allowed at the current parsing point.
-
-<p>User agents must observe the rules for handling parsing errors:
-<ul>
- <li>a simple selector containing an undeclared namespace prefix is invalid
- </li>
- <li>a selector containing an invalid simple selector, an invalid combinator
- or an invalid token is invalid.
- </li>
- <li>a group of selectors containing an invalid selector is invalid.</li>
-</ul>
-
-<p>Specifications reusing Selectors must define how to handle parsing
- errors. (In the case of CSS, the entire rule in which the selector is
- used is dropped.)</p>
-
-<!-- Apparently all these references are out of date:
-<p>Implementations of this specification must behave as
-"recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>
-when parsing selectors and attempting matches. (In particular,
-implementations must assume the data is normalized and must not
-normalize it.) Normative rules for matching strings are defined in
-<a href="#refsCWWW">[CWWW]</a> and <a
-href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this
-specification.</p>-->
-
-<h2><a name=Tests></a>14. Tests</h2>
-
-<p>This specification has <a
- href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
- suite</a> allowing user agents to verify their basic conformance to
- the specification. This test suite does not pretend to be exhaustive
- and does not cover all possible combined cases of Selectors.</p>
-
-<h2><a name=ACKS></a>15. Acknowledgements</h2>
-
-<p>The CSS working group would like to thank everyone who has sent
- comments on this specification over the years.</p>
-
-<p>The working group would like to extend special thanks to Donna
- McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed
- the final editorial review.</p>
-
-<h2><a name=references>16. References</a></h2>
-
-<dl class="refs">
-
- <dt>[CSS1]
- <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading
- Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised
- 11 Jan 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>)
-
- <dt>[CSS21]
- <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon
- Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision
- 1</cite>", W3C Working Draft, 13 June 2005
- <dd>(<code><a
- href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>)
-
- <dt>[CWWW]
- <dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau,
- Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model
- for the World Wide Web</cite>", W3C Recommendation, 15 February 2005
- <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>)
-
- <dt>[FLEX]
- <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner
- Generator</cite>", Version 2.3.7, ISBN 1882114213
-
- <dt>[HTML4]
- <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs,
- editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24
- December 1999
- <dd>
- (<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>)
-
- <dt>[MATH]
- <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical
- Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7
- July 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>)
-
- <dt>[RFC3066]
- <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the
- Identification of Languages</cite>", Request for Comments 3066, January
- 2001
- <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)
-
- <dt>[STTS]
- <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation
- Sheets 3</cite>", Electricité de France, submission to the W3C,
- 11 November 1998
- <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>)
-
- <dt>[SVG]
- <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean
- Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1
- Specification</cite>", W3C Recommendation, 14 January 2003
- <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>)
-
- <dt>[UNICODE]</dt>
- <dd><a name="refsUNICODE"></a> <cite><a
- href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode
- Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA,
- Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a
- href="http://www.unicode.org/versions/Unicode4.0.1/">Unicode
- 4.0.1</a> and <a
- href="http://www.unicode.org/versions/Unicode4.1.0/">Unicode
- 4.1.0</a>.
- <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)
- </dd>
-
- <dt>[XML10]
- <dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,
- Eve Maler, François Yergeau, editors; "<cite>Extensible Markup
- Language (XML) 1.0 (Third Edition)</cite>", W3C Recommendation, 4
- February 2004
- <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>)
-
- <dt>[XMLNAMES]
- <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman,
- editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14
- January 1999
- <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>)
-
- <dt>[YACC]
- <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another
- compiler compiler</cite>", Technical Report, Murray Hill, 1975
-
-</dl>
-</div>
-</body>
-</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/js/DOMAssistantComplete-2.7.js b/samples/src/main/java/gwtquery/samples/public/js/DOMAssistantComplete-2.7.js new file mode 100644 index 00000000..ddca30ed --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/js/DOMAssistantComplete-2.7.js @@ -0,0 +1,1529 @@ +// Developed by Robert Nyman/DOMAssistant team, code/licensing: http://domassistant.googlecode.com/, documentation: http://www.domassistant.com/documentation, version 2.8 +var DOMAssistant = function () { + var HTMLArray = function () { + // Constructor + }, + w = window, _$ = w.$, _$$ = w.$$, + isIE = /*@cc_on!@*/false, + isIE5 = isIE && parseFloat(navigator.appVersion) < 6, + sort, tagCache = {}, lastCache = {}, useCache = true, + slice = Array.prototype.slice, + camel = { + "accesskey": "accessKey", + "class": "className", + "colspan": "colSpan", + "for": "htmlFor", + "maxlength": "maxLength", + "readonly": "readOnly", + "rowspan": "rowSpan", + "tabindex": "tabIndex", + "valign": "vAlign", + "cellspacing": "cellSpacing", + "cellpadding": "cellPadding" + }, + regex = { + rules: /\s*,\s*/g, + selector: /^(\w+|\*)?(#[\w\u00C0-\uFFFF\-=$]+)?((\.[\w\u00C0-\uFFFF\-]+)*)?((\[\w+\s*([~^$*|])?(=\s*([-\w\u00C0-\uFFFF\s.]+|"[^"]*"|'[^']*'))?\]+)*)?((:\w[-\w]*(\((odd|even|\-?\d*n?([-+]\d+)?|[:#]?[-\w\u00C0-\uFFFF.]+|"[^"]*"|'[^']*'|((\w*\.[-\w\u00C0-\uFFFF]+)*)?|(\[#?\w+([~^$*|])?=?[-\w\u00C0-\uFFFF\s.'"]+\]+)|(:\w[-\w]*\(.+\)))\))?)*)?([+>~])?/, + selectorSplit: /(?:\[.*\]|\(.*\)|[^\s+>~[(])+|[+>~]/g, + id: /^#([-\w\u00C0-\uFFFF=$]+)$/, + tag: /^\w+/, + relation: /^[+>~]$/, + pseudo: /^:(\w[-\w]*)(\((.+)\))?$/, + pseudos: /:(\w[-\w]*)(\((([^(]+)|([^(]+\([^(]+)\))\))?/g, + attribs: /\[(\w+)\s*([~^$*|])?(=)?\s*([^\[\]]*|"[^"]*"|'[^']*')?\](?=$|\[|:|\s)/g, + classes: /\.([-\w\u00C0-\uFFFF]+)/g, + quoted: /^["'](.*)["']$/, + nth: /^((odd|even)|([1-9]\d*)|((([1-9]\d*)?)n([-+]\d+)?)|(-(([1-9]\d*)?)n\+(\d+)))$/, + special: /(:check|:enabl|\bselect)ed\b/ + }, + navigate = function (node, direction, checkTagName) { + var oldName = node.tagName; + while ((node = node[direction + "Sibling"]) && (node.nodeType !== 1 || (checkTagName? node.tagName !== oldName : node.tagName === "!"))) {} + return node; + }, + def = function (obj) { + return typeof obj !== "undefined"; + }, + sortDocumentOrder = function (elmArray) { + return (sortDocumentOrder = elmArray[0].compareDocumentPosition? function (elmArray) { return elmArray.sort( function (a, b) { return 3 - (a.compareDocumentPosition(b) & 6); } ); } : + isIE? function (elmArray) { return elmArray.sort( function (a, b) { return a.sourceIndex - b.sourceIndex; } ); } : + function (elmArray) { return elmArray.sort( function (a, b) { + var range1 = document.createRange(), range2 = document.createRange(); + range1.setStart(a, 0); + range1.setEnd(a, 0); + range2.setStart(b, 0); + range2.setEnd(b, 0); + return range1.compareBoundaryPoints(Range.START_TO_END, range2); + } ); })(elmArray); + }; + var pushAll = function (set1, set2) { + set1.push.apply(set1, slice.apply(set2)); + return set1; + }; + if (isIE) { + pushAll = function (set1, set2) { + if (set2.slice) { + return set1.concat(set2); + } + var i=0, item; + while ((item = set2[i++])) { + set1[set1.length] = item; + } + return set1; + }; + } + return { + isIE : isIE, + camel : camel, + def : def, + allMethods : [], + publicMethods : [ + "prev", + "next", + "hasChild", + "cssSelect", + "elmsByClass", + "elmsByAttribute", + "elmsByTag" + ], + + harmonize : function () { + w.$ = _$; + w.$$ = _$$; + return this; + }, + + initCore : function () { + this.applyMethod.call(w, "$", this.$); + this.applyMethod.call(w, "$$", this.$$); + w.DOMAssistant = this; + if (isIE) { + HTMLArray = Array; + } + HTMLArray.prototype = []; + (function (H) { + H.each = function (fn, context) { + for (var i=0, il=this.length; i<il; i++) { + if (fn.call(context || this[i], this[i], i, this) === false) { + break; + } + } + return this; + }; + H.first = function () { + return def(this[0])? DOMAssistant.addMethodsToElm(this[0]) : null; + }; + H.end = function () { + return this.previousSet; + }; + H.indexOf = H.indexOf || function (elm) { + for (var i=0, il=this.length; i<il; i++) { + if (i in this && this[i] === elm) { + return i; + } + } + return -1; + }; + H.map = function (fn, context) { + var res = []; + for (var i=0, il=this.length; i<il; i++) { + if (i in this) { + res[i] = fn.call(context || this[i], this[i], i, this); + } + } + return res; + }; + H.filter = function (fn, context) { + var res = new HTMLArray(); + res.previousSet = this; + for (var i=0, il=this.length; i<il; i++) { + if (i in this && fn.call(context || this[i], this[i], i, this)) { + res.push(this[i]); + } + } + return res; + }; + H.every = function (fn, context) { + for (var i=0, il=this.length; i<il; i++) { + if (i in this && !fn.call(context || this[i], this[i], i, this)) { + return false; + } + } + return true; + }; + H.some = function (fn, context) { + for (var i=0, il=this.length; i<il; i++) { + if (i in this && fn.call(context || this[i], this[i], i, this)) { + return true; + } + } + return false; + }; + })(HTMLArray.prototype); + this.attach(this); + }, + + addMethods : function (name, method) { + if (!def(this.allMethods[name])) { + this.allMethods[name] = method; + this.addHTMLArrayPrototype(name, method); + } + }, + + addMethodsToElm : function (elm) { + for (var method in this.allMethods) { + if (def(this.allMethods[method])) { + this.applyMethod.call(elm, method, this.allMethods[method]); + } + } + return elm; + }, + + applyMethod : function (method, func) { + if (typeof this[method] !== "function") { + this[method] = func; + } + }, + + attach : function (plugin) { + var publicMethods = plugin.publicMethods; + if (!def(publicMethods)) { + for (var method in plugin) { + if (method !== "init" && def(plugin[method])) { + this.addMethods(method, plugin[method]); + } + } + } + else if (publicMethods.constructor === Array) { + for (var i=0, current; (current=publicMethods[i]); i++) { + this.addMethods(current, plugin[current]); + } + } + if (typeof plugin.init === "function") { + plugin.init(); + } + }, + + addHTMLArrayPrototype : function (name, method) { + HTMLArray.prototype[name] = function () { + var elmsToReturn = new HTMLArray(); + elmsToReturn.previousSet = this; + for (var i=0, il=this.length; i<il; i++) { + elmsToReturn.push(method.apply(DOMAssistant.$$(this[i]), arguments)); + } + return elmsToReturn; + }; + }, + + cleanUp : function (elm) { + var children = elm.all || elm.getElementsByTagName("*"); + for (var i=0, child; (child=children[i++]);) { + if (child.hasData && child.hasData()) { + if (child.removeEvent) { child.removeEvent(); } + child.unstore(); + } + } + elm.innerHTML = ""; + }, + + setCache : function (cache) { + useCache = cache; + }, + + $ : function () { + var obj = arguments[0]; + if (arguments.length === 1 && (typeof obj === "object" || (typeof obj === "function" && !!obj.nodeName))) { + return DOMAssistant.$$(obj); + } + var elm = !!obj? new HTMLArray() : null; + for (var i=0, arg, idMatch; (arg=arguments[i]); i++) { + if (typeof arg === "string") { + arg = arg.replace(/^[^#\(]*(#)/, "$1"); + if (regex.id.test(arg)) { + if ((idMatch = DOMAssistant.$$(arg.substr(1), false))) { + elm.push(idMatch); + } + } + else { + var doc = (document.all || document.getElementsByTagName("*")).length; + elm = (!document.querySelectorAll && useCache && lastCache.rule && lastCache.rule === arg && lastCache.doc === doc)? lastCache.elms : pushAll(elm, DOMAssistant.cssSelection.call(document, arg)); + lastCache = { rule: arg, elms: elm, doc: doc }; + } + } + } + return elm; + }, + + $$ : function (id, addMethods) { + var elm = (typeof id === "object" || typeof id === "function" && !!id.nodeName)? id : document.getElementById(id), + applyMethods = def(addMethods)? addMethods : true, + getId = function(el) { var eid = el.id; return typeof eid !== "object"? eid : el.attributes.id.nodeValue; }; + if (typeof id === "string" && elm && getId(elm) !== id) { + elm = null; + for (var i=0, item; (item=document.all[i]); i++) { + if (getId(item) === id) { + elm = item; + break; + } + } + } + if (elm && applyMethods && !elm.next) { + DOMAssistant.addMethodsToElm(elm); + } + return elm; + }, + + prev : function () { + return DOMAssistant.$$(navigate(this, "previous")); + }, + + next : function () { + return DOMAssistant.$$(navigate(this, "next")); + }, + + hasChild: function (elm) { + return this === document || this !== elm && (this.contains? this.contains(elm) : !!(this.compareDocumentPosition(elm) & 16)); + }, + + getSequence : function (expression) { + var start, add = 2, max = -1, modVal = -1, + pseudoVal = regex.nth.exec(expression.replace(/^0n\+/, "").replace(/^2n$/, "even").replace(/^2n+1$/, "odd")); + if (!pseudoVal) { + return null; + } + if (pseudoVal[2]) { // odd or even + start = (pseudoVal[2] === "odd")? 1 : 2; + modVal = (start === 1)? 1 : 0; + } + else if (pseudoVal[3]) { // single digit + start = max = parseInt(pseudoVal[3], 10); + add = 0; + } + else if (pseudoVal[4]) { // an+b + add = pseudoVal[6]? parseInt(pseudoVal[6], 10) : 1; + start = pseudoVal[7]? parseInt(pseudoVal[7], 10) : 0; + while (start < 1) { + start += add; + } + modVal = (start >= add)? (start - add) % add : start; + } + else if (pseudoVal[8]) { // -an+b + add = pseudoVal[10]? parseInt(pseudoVal[10], 10) : 1; + start = max = parseInt(pseudoVal[11], 10); + while (start > add) { + start -= add; + } + modVal = (max >= add)? (max - add) % add : max; + } + return { start: start, add: add, max: max, modVal: modVal }; + }, + + cssByDOM : function (cssRule) { + var prevParents, currentRule, cssSelectors, childOrSiblingRef, nextTag, nextRegExp, current, previous, prevParent, notElm, addElm, iteratorNext, childElm, sequence, anyTag, + elm = new HTMLArray(), index = elm.indexOf, prevElm = [], matchingElms = [], cssRules = cssRule.replace(regex.rules, ",").split(","), splitRule = {}; + function clearAdded (elm) { + elm = elm || prevElm; + for (var n=elm.length; n--;) { + elm[n].added = null; + elm[n].removeAttribute("added"); + } + } + function clearChildElms () { + for (var n=prevParents.length; n--;) { + prevParents[n].childElms = null; + } + } + function subtractArray (arr1, arr2) { + for (var i=0, src1; (src1=arr1[i]); i++) { + var found = false; + for (var j=0, src2; (src2=arr2[j]); j++) { + if (src2 === src1) { + found = true; + arr2.splice(j, 1); + break; + } + } + if (found) { + arr1.splice(i--, 1); + } + } + return arr1; + } + function getAttr (elm, attr) { + return (isIE || regex.special.test(attr))? elm[camel[attr.toLowerCase()] || attr] : elm.getAttribute(attr, 2); + } + function attrToRegExp (attrVal, substrOperator) { + attrVal = attrVal? attrVal.replace(regex.quoted, "$1").replace(/(\.|\[|\])/g, "\\$1") : null; + return { + "^": "^" + attrVal, + "$": attrVal + "$", + "*": attrVal, + "|": "^" + attrVal + "(\\-\\w+)*$", + "~": "\\b" + attrVal + "\\b" + }[substrOperator] || (attrVal !== null? "^" + attrVal + "$" : attrVal); + } + function notComment(el) { + return (el || this).tagName !== "!"; + } + function getTags (tag, context) { + return isIE5? (tag === "*"? context.all : context.all.tags(tag)) : context.getElementsByTagName(tag); + } + function getElementsByTagName (tag, parent) { + tag = tag || "*"; + parent = parent || document; + return (parent === document || parent.lastModified)? tagCache[tag] || (tagCache[tag] = getTags(tag, document)) : getTags(tag, parent); + } + function getElementsByPseudo (previousMatch, pseudoClass, pseudoValue) { + prevParents = []; + var pseudo = pseudoClass.split("-"), matchingElms = [], idx = 0, checkNodeName = /\-of\-type$/.test(pseudoClass), recur, + match = { + first: function(el) { return !navigate(el, "previous", checkNodeName); }, + last: function(el) { return !navigate(el, "next", checkNodeName); }, + empty: function(el) { return !el.firstChild; }, + enabled: function(el) { return !el.disabled && el.type !== "hidden"; }, + disabled: function(el) { return el.disabled; }, + checked: function(el) { return el.checked; }, + contains: function(el) { return (el.innerText || el.textContent || "").indexOf(pseudoValue.replace(regex.quoted, "$1")) > -1; }, + other: function(el) { return getAttr(el, pseudoClass) === pseudoValue; } + }; + function basicMatch(key) { + while ((previous=previousMatch[idx++])) { + if (notComment(previous) && match[key](previous)) { + matchingElms[matchingElms.length] = previous; + } + } + return matchingElms; + } + var word = pseudo[0] || null; + if (word && match[word]) { + return basicMatch(word); + } + switch (word) { + case "only": + var kParent, kTag; + while ((previous=previousMatch[idx++])) { + prevParent = previous.parentNode; + var q = previous.nodeName; + if (prevParent !== kParent || q !== kTag) { + if (match.first(previous) && match.last(previous)) { + matchingElms[matchingElms.length] = previous; + } + kParent = prevParent; + kTag = q; + } + } + break; + case "nth": + if (pseudoValue === "n") { + matchingElms = previousMatch; + } + else { + var direction = (pseudo[1] === "last")? ["lastChild", "previousSibling"] : ["firstChild", "nextSibling"]; + sequence = DOMAssistant.getSequence(pseudoValue); + if (sequence) { + while ((previous=previousMatch[idx++])) { + prevParent = previous.parentNode; + prevParent.childElms = prevParent.childElms || {}; + var p = previous.nodeName; + if (!prevParent.childElms[p]) { + var childCount = 0; + iteratorNext = sequence.start; + childElm = prevParent[direction[0]]; + while (childElm && (sequence.max < 0 || iteratorNext <= sequence.max)) { + var c = childElm.nodeName; + if ((checkNodeName && c === p) || (!checkNodeName && childElm.nodeType === 1 && c !== "!")) { + if (++childCount === iteratorNext) { + if (c === p) { matchingElms[matchingElms.length] = childElm; } + iteratorNext += sequence.add; + } + } + childElm = childElm[direction[1]]; + } + if (anyTag) { sort++; } + prevParent.childElms[p] = true; + prevParents[prevParents.length] = prevParent; + } + } + clearChildElms(); + } + } + break; + case "target": + var hash = document.location.hash.slice(1); + if (hash) { + while ((previous=previousMatch[idx++])) { + if (getAttr(previous, "name") === hash || getAttr(previous, "id") === hash) { + matchingElms[matchingElms.length] = previous; + break; + } + } + } + break; + case "not": + if ((recur = regex.pseudo.exec(pseudoValue))) { + matchingElms = subtractArray(previousMatch, getElementsByPseudo(previousMatch, recur[1]? recur[1].toLowerCase() : null, recur[3] || null)); + } + else { + for (var re in regex) { + if (regex[re].lastIndex) { + regex[re].lastIndex = 0; + } + } + pseudoValue = pseudoValue.replace(regex.id, "[id=$1]"); + var notTag = regex.tag.exec(pseudoValue); + var notClass = regex.classes.exec(pseudoValue); + var notAttr = regex.attribs.exec(pseudoValue); + var notRegExp = new RegExp(notAttr? attrToRegExp(notAttr[4], notAttr[2]) : "(^|\\s)" + (notTag? notTag[0] : notClass? notClass[1] : "") + "(\\s|$)", "i"); + while ((notElm=previousMatch[idx++])) { + addElm = null; + if (notTag && !notRegExp.test(notElm.nodeName) || notClass && !notRegExp.test(notElm.className)) { + addElm = notElm; + } + else if (notAttr) { + var att = getAttr(notElm, notAttr[1]); + if (!def(att) || att === false || typeof att === "string" && !notRegExp.test(att)) { + addElm = notElm; + } + } + if (addElm && !addElm.added) { + addElm.added = true; + matchingElms[matchingElms.length] = addElm; + } + } + } + break; + default: return basicMatch("other"); + } + return matchingElms; + } + function pushUnique(set1, set2) { + var i=0, s=set1, item; + while ((item = set2[i++])) { + if (!s.length || s.indexOf(item) < 0) { + set1.push(item); + } + } + return set1; + } + sort = -1; + for (var a=0, tagBin=[]; (currentRule=cssRules[a]); a++) { + if (!(cssSelectors = currentRule.match(regex.selectorSplit)) || a && index.call(cssRules.slice(0, a), currentRule) > -1) { continue; } + prevElm = [this]; + for (var i=0, rule; (rule=cssSelectors[i]); i++) { + matchingElms = []; + if ((childOrSiblingRef = regex.relation.exec(rule))) { + var idElm = null, nextWord = cssSelectors[i+1]; + if ((nextTag = regex.tag.exec(nextWord))) { + nextTag = nextTag[0]; + nextRegExp = new RegExp("(^|\\s)" + nextTag + "(\\s|$)", "i"); + } + else if (regex.id.test(nextWord)) { + idElm = DOMAssistant.$(nextWord) || null; + } + for (var j=0, prevRef; (prevRef=prevElm[j]); j++) { + switch (childOrSiblingRef[0]) { + case ">": + var children = idElm || getElementsByTagName(nextTag, prevRef); + for (var k=0, child; (child=children[k]); k++) { + if (child.parentNode === prevRef) { + matchingElms[matchingElms.length] = child; + } + } + break; + case "+": + if ((prevRef = navigate(prevRef, "next"))) { + if ((idElm && idElm[0] === prevRef) || (!idElm && (!nextTag || nextRegExp.test(prevRef.nodeName)))) { + matchingElms[matchingElms.length] = prevRef; + } + } + break; + case "~": + while ((prevRef = prevRef.nextSibling) && !prevRef.added) { + if ((idElm && idElm[0] === prevRef) || (!idElm && (!nextTag || nextRegExp.test(prevRef.nodeName)))) { + prevRef.added = true; + matchingElms[matchingElms.length] = prevRef; + } + } + break; + } + } + prevElm = matchingElms; + clearAdded(); + rule = cssSelectors[++i]; + if (/^\w+$/.test(rule) || regex.id.test(rule)) { + continue; + } + prevElm.skipTag = true; + } + var cssSelector = regex.selector.exec(rule); + splitRule = { + tag : cssSelector[1]? cssSelector[1] : "*", + id : cssSelector[2], + allClasses : cssSelector[3], + allAttr : cssSelector[5], + allPseudos : cssSelector[10] + }; + anyTag = (splitRule.tag === "*"); + if (splitRule.id) { + var u = 0, DOMElm = document.getElementById(splitRule.id.slice(1)); + if (DOMElm) { + while (prevElm[u] && !DOMAssistant.hasChild.call(prevElm[u], DOMElm)) { u++; } + matchingElms = (u < prevElm.length && (anyTag || splitRule.tag === DOMElm.tagName.toLowerCase()))? [DOMElm] : []; + } + prevElm = matchingElms; + } + else if (splitRule.tag && !prevElm.skipTag) { + if (i===0 && !matchingElms.length && prevElm.length === 1) { + prevElm = matchingElms = pushAll([], getElementsByTagName(splitRule.tag, prevElm[0])); + } + else { + for (var l=0, ll=prevElm.length, tagCollectionMatches, tagMatch; l<ll; l++) { + tagCollectionMatches = getElementsByTagName(splitRule.tag, prevElm[l]); + for (var m=0; (tagMatch=tagCollectionMatches[m]); m++) { + if (!tagMatch.added) { + tagMatch.added = true; + matchingElms[matchingElms.length] = tagMatch; + } + } + } + prevElm = matchingElms; + clearAdded(); + } + } + if (!matchingElms.length) { + break; + } + prevElm.skipTag = false; + if (splitRule.allClasses) { + var n = 0, matchingClassElms = [], allClasses = splitRule.allClasses.split(".").slice(1); + while ((current = prevElm[n++])) { + var matchCls = true, elmClass = current.className; + if (elmClass && elmClass.length) { + elmClass = elmClass.split(" "); + for (var o=allClasses.length; o--;) { + if (elmClass.indexOf(allClasses[o]) < 0) { + matchCls = false; + break; + } + } + if (matchCls) { + matchingClassElms[matchingClassElms.length] = current; + } + } + } + prevElm = matchingElms = matchingClassElms; + } + if (splitRule.allAttr) { + var matchAttr, r = 0, regExpAttributes = [], matchingAttributeElms = [], allAttr = splitRule.allAttr.match(regex.attribs); + for (var specialStrip = /^\[(selected|readonly)(\s*=.+)?\]$/, q=0, ql=allAttr.length, attributeMatch, attrVal; q<ql; q++) { + regex.attribs.lastIndex = 0; + attributeMatch = regex.attribs.exec(allAttr[q].replace(specialStrip, "[$1]")); + attrVal = attrToRegExp(attributeMatch[4], attributeMatch[2] || null); + regExpAttributes[q] = [(attrVal? new RegExp(attrVal) : null), attributeMatch[1]]; + } + while ((current = matchingElms[r++])) { + for (var s=0, sl=regExpAttributes.length; s<sl; s++) { + var attributeRegExp = regExpAttributes[s][0], currentAttr = getAttr(current, regExpAttributes[s][1]); + matchAttr = true; + if (!attributeRegExp && currentAttr === true) { continue; } + if ((!attributeRegExp && (!currentAttr || typeof currentAttr !== "string" || !currentAttr.length)) || (!!attributeRegExp && !attributeRegExp.test(currentAttr))) { + matchAttr = false; + break; + } + } + if (matchAttr) { + matchingAttributeElms[matchingAttributeElms.length] = current; + } + } + prevElm = matchingElms = matchingAttributeElms; + } + if (splitRule.allPseudos) { + var allPseudos = splitRule.allPseudos.match(regex.pseudos); + for (var t=0, tl=allPseudos.length; t<tl; t++) { + regex.pseudos.lastIndex = 0; + var pseudo = regex.pseudos.exec(allPseudos[t]); + var pseudoClass = pseudo[1]? pseudo[1].toLowerCase() : null; + var pseudoValue = pseudo[3] || null; + matchingElms = getElementsByPseudo(matchingElms, pseudoClass, pseudoValue); + clearAdded(matchingElms); + } + prevElm = matchingElms; + } + } + elm = ((tagBin.length && (anyTag || index.call(tagBin, splitRule.tag) >= 0 || index.call(tagBin, "*") >= 0))? pushUnique : pushAll)(elm, prevElm); + tagBin.push(splitRule.tag); + if (isIE && anyTag) { elm = elm.filter(notComment); } + } + return ((elm.length > 1 && cssRules.length > 1) || sort > 0)? sortDocumentOrder(elm) : elm; + }, + + cssByXpath : function (cssRule) { + var ns = { xhtml: "http://www.w3.org/1999/xhtml" }, + prefix = (document.documentElement.namespaceURI === ns.xhtml)? "xhtml:" : "", + nsResolver = function lookupNamespaceURI (prefix) { + return ns[prefix] || null; + }; + DOMAssistant.cssByXpath = function (cssRule) { + var currentRule, cssSelectors, xPathExpression, cssSelector, splitRule, sequence, + elm = new HTMLArray(), cssRules = cssRule.replace(regex.rules, ",").split(","); + function attrToXPath (wrap) { + var pre = wrap? "[" : "", post = wrap? "]" : ""; + return function (match, p1, p2, p3, p4) { + p4 = (p4 || "").replace(regex.quoted, "$1"); + if (p1 === p4 && p1 === "readonly") { p3 = null; } + return pre + ({ + "^": "starts-with(@" + p1 + ", \"" + p4 + "\")", + "$": "substring(@" + p1 + ", (string-length(@" + p1 + ") - " + (p4.length - 1) + "), " + p4.length + ") = \"" + p4 + "\"", + "*": "contains(concat(\" \", @" + p1 + ", \" \"), \"" + p4 + "\")", + "|": "@" + p1 + "=\"" + p4 + "\" or starts-with(@" + p1 + ", \"" + p4 + "-\")", + "~": "contains(concat(\" \", @" + p1 + ", \" \"), \" " + p4 + " \")" + }[p2] || ("@" + p1 + (p3? "=\"" + p4 + "\"" : ""))) + post; + }; + } + function pseudoToXPath (tag, pseudoClass, pseudoValue) { + tag = /\-child$/.test(pseudoClass)? "*" : tag; + var pseudo = pseudoClass.split("-"), position = ((pseudo[1] === "last")? "(count(following-sibling::" : "(count(preceding-sibling::") + tag + ") + 1)", recur, hash; + switch (pseudo[0]) { + case "nth": return (pseudoValue !== "n" && (sequence = DOMAssistant.getSequence(pseudoValue)))? ((sequence.start === sequence.max)? position + " = " + sequence.start : position + " mod " + sequence.add + " = " + sequence.modVal + ((sequence.start > 1)? " and " + position + " >= " + sequence.start : "") + ((sequence.max > 0)? " and " + position + " <= " + sequence.max: "")) : ""; + case "not": return "not(" + ((recur = regex.pseudo.exec(pseudoValue))? pseudoToXPath(tag, recur[1]? recur[1].toLowerCase() : null, recur[3] || null) : pseudoValue.replace(regex.id, "[id=$1]").replace(regex.tag, "self::$0").replace(regex.classes, "contains(concat(\" \", @class, \" \"), \" $1 \")").replace(regex.attribs, attrToXPath())) + ")"; + case "first": return "not(preceding-sibling::" + tag + ")"; + case "last": return "not(following-sibling::" + tag + ")"; + case "only": return "not(preceding-sibling::" + tag + " or following-sibling::" + tag + ")"; + case "empty": return "not(child::*) and not(text())"; + case "contains": return "contains(., \"" + pseudoValue.replace(regex.quoted, "$1") + "\")"; + case "enabled": return "not(@disabled) and not(@type=\"hidden\")"; + case "disabled": return "@disabled"; + case "target": return "@name=\"" + (hash = document.location.hash.slice(1)) + "\" or @id=\"" + hash + "\""; + default: return "@" + pseudoClass + "=\"" + pseudoValue + "\""; + } + } + for (var i=0; (currentRule=cssRules[i]); i++) { + if (!(cssSelectors = currentRule.match(regex.selectorSplit)) || i && elm.indexOf.call(cssRules.slice(0, i), currentRule) > -1) { continue; } + xPathExpression = xPathExpression? xPathExpression + " | ." : "."; + for (var j=0, jl=cssSelectors.length; j<jl; j++) { + cssSelector = regex.selector.exec(cssSelectors[j]); + splitRule = { + tag: prefix + (cssSelector[1]? cssSelector[1] : "*"), + id: cssSelector[2], + allClasses: cssSelector[3], + allAttr: cssSelector[5], + allPseudos: cssSelector[10], + tagRelation: cssSelector[20] + }; + xPathExpression += + (splitRule.tagRelation? ({ ">": "/", "+": "/following-sibling::*[1]/self::", "~": "/following-sibling::" }[splitRule.tagRelation] || "") : ((j > 0 && regex.relation.test(cssSelectors[j-1]))? splitRule.tag : ("//" + splitRule.tag))) + + (splitRule.id || "").replace(regex.id, "[@id = \"$1\"]") + + (splitRule.allClasses || "").replace(regex.classes, "[contains(concat(\" \", @class, \" \"), \" $1 \")]") + + (splitRule.allAttr || "").replace(regex.attribs, attrToXPath(true)); + if (splitRule.allPseudos) { + var allPseudos = splitRule.allPseudos.match(regex.pseudos); + for (var k=0, kl=allPseudos.length; k<kl; k++) { + regex.pseudos.lastIndex = 0; + var pseudo = regex.pseudos.exec(allPseudos[k]), + pseudoClass = pseudo[1]? pseudo[1].toLowerCase() : null, + pseudoValue = pseudo[3] || null, + xpath = pseudoToXPath(splitRule.tag, pseudoClass, pseudoValue); + if (xpath.length) { + xPathExpression += "[" + xpath + "]"; + } + } + } + } + } + try { + var xPathNodes = document.evaluate(xPathExpression, this, nsResolver, 7, null), node, p=0; + while ((node = xPathNodes.snapshotItem(p++))) { elm.push(node); } + } catch (e) {} + return elm; + }; + return DOMAssistant.cssByXpath.call(this, cssRule); + }, + + cssSelection : function (cssRule) { + if (!cssRule) { return null; } + var special = regex.special.test(cssRule); + try { + if (document.querySelectorAll && !special) { + return pushAll(new HTMLArray(), this.querySelectorAll(cssRule)); + } + } catch (e) {} + return ((document.evaluate && !special && !/-of-type/.test(cssRule))? DOMAssistant.cssByXpath : DOMAssistant.cssByDOM).call(this, cssRule); + }, + + cssSelect : function (cssRule) { + return DOMAssistant.cssSelection.call(this, cssRule); + }, + + elmsByClass : function (className, tag) { + var cssRule = (tag || "") + "." + className; + return DOMAssistant.cssSelection.call(this, cssRule); + }, + + elmsByAttribute : function (attr, attrVal, tag, substrMatchSelector) { + var cssRule = (tag || "") + "[" + attr + ((attrVal && attrVal !== "*")? ((substrMatchSelector || "") + "=" + attrVal + "]") : "]"); + return DOMAssistant.cssSelection.call(this, cssRule); + }, + + elmsByTag : function (tag) { + return DOMAssistant.cssSelection.call(this, tag); + } + }; +}(); +DOMAssistant.initCore(); +DOMAssistant.Storage = function () { + var uniqueId = 1, data = [], expando = "_da" + +new Date(); + return { + hasData : function () { + var uid = this[expando]; + return !!uid && !!data[uid]; + }, + retrieve : function (key) { + if (!DOMAssistant.def(key)) { + return this[expando] || (this[expando] = uniqueId++); + } + if (!this[expando] || !data[this[expando]]) { return; } + return data[this[expando]][key]; + }, + + store : function (key, val) { + var uid = this[expando] || (this[expando] = uniqueId++); + data[uid] = data[uid] || {}; + if (typeof key === "object") { + for (var i in key) { + if (typeof i === "string") { + data[uid][i] = key[i]; + } + } + } + else { + data[uid][key] = val; + } + return this; + }, + + unstore : function (key) { + var uid = this[expando] || (this[expando] = uniqueId++); + if (data[uid]) { + if (DOMAssistant.def(key)) { + delete data[uid][key]; + } + else { + data[uid] = null; + } + } + return this; + } + }; +}(); +DOMAssistant.attach(DOMAssistant.Storage); +DOMAssistant.AJAX = function () { + var globalXMLHttp = null, + readyState = 0, + status = -1, + statusText = "", + requestPool = [], + createAjaxObj = function (url, method, callback, addToContent) { + var params = null; + if (/POST/i.test(method)) { + url = url.split("?"); + params = url[1]; + url = url[0]; + } + return { + url : url, + method : method, + callback : callback, + params : params, + headers : {}, + responseType : "text", + addToContent : addToContent || false + }; + }; + return { + publicMethods : [ + "ajax", + "get", + "post", + "load" + ], + + initRequest : function () { + var XMLHttp = null; + if (!!window.XMLHttpRequest && !DOMAssistant.isIE) { + XMLHttp = new XMLHttpRequest(); + DOMAssistant.AJAX.initRequest = function () { + return requestPool.length? requestPool.pop() : new XMLHttpRequest(); + }; + } + else if (!!window.ActiveXObject) { + var XMLHttpMS = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; + for (var i=0; i<XMLHttpMS.length; i++) { + try { + XMLHttp = new window.ActiveXObject(XMLHttpMS[i]); + DOMAssistant.AJAX.initRequest = function () { + return requestPool.length? requestPool.pop() : new window.ActiveXObject(XMLHttpMS[i]); + }; + break; + } + catch (e) { + XMLHttp = null; + } + } + } + return XMLHttp; + }, + + ajax : function (ajaxObj) { + if (!ajaxObj.noParse && ajaxObj.url && /\?/.test(ajaxObj.url) && ajaxObj.method && /POST/i.test(ajaxObj.method)) { + var url = ajaxObj.url.split("?"); + ajaxObj.url = url[0]; + ajaxObj.params = url[1] + ((url[1].length > 0 && ajaxObj.params)? ("&" + ajaxObj.params) : ""); + } + return DOMAssistant.AJAX.makeCall.call(this, ajaxObj); + }, + + get : function (url, callback, addToContent) { + return DOMAssistant.AJAX.makeCall.call(this, createAjaxObj(url, "GET", callback, addToContent)); + }, + + post : function (url, callback) { + return DOMAssistant.AJAX.makeCall.call(this, createAjaxObj(url, "POST", callback)); + }, + + load : function (url, addToContent) { + this.get(url, DOMAssistant.AJAX.replaceWithAJAXContent, addToContent); + }, + + makeCall : function (ajaxObj) { + var XMLHttp = DOMAssistant.AJAX.initRequest(); + if (XMLHttp) { + globalXMLHttp = XMLHttp; + (function (elm) { + var url = ajaxObj.url, + method = ajaxObj.method || "GET", + callback = ajaxObj.callback, + params = ajaxObj.params, + headers = ajaxObj.headers, + responseType = ajaxObj.responseType || "text", + addToContent = ajaxObj.addToContent, + timeout = ajaxObj.timeout || null, + ex = ajaxObj.exception, + timeoutId = null, + done = false; + XMLHttp.open(method, url, true); + XMLHttp.setRequestHeader("AJAX", "true"); + XMLHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + if (method === "POST") { + XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + XMLHttp.setRequestHeader("Content-length", params? params.length : 0); + if (XMLHttp.overrideMimeType) { + XMLHttp.setRequestHeader("Connection", "close"); + } + } + if (responseType === "json") { + XMLHttp.setRequestHeader("Accept", "application/json, text/javascript, */*"); + } + for (var i in headers) { + if (typeof i === "string") { + XMLHttp.setRequestHeader(i, headers[i]); + } + } + if (typeof callback === "function") { + XMLHttp.onreadystatechange = function () { + try { + if (XMLHttp.readyState === 4 && !done) { + window.clearTimeout(timeoutId); + done = true; + status = XMLHttp.status; + statusText = XMLHttp.statusText; + readyState = 4; + if ((status || location.protocol !== "file:") && (status < 200 || status >= 300)) { + throw new Error(statusText); + } + var response = /xml/i.test(responseType)? XMLHttp.responseXML : XMLHttp.responseText; + if (/json/i.test(responseType) && !!response) { + response = (typeof JSON === "object" && typeof JSON.parse === "function")? JSON.parse(response) : eval("(" + response + ")"); + } + globalXMLHttp = null; + XMLHttp.onreadystatechange = function () {}; + requestPool.push(XMLHttp); + callback.call(elm, response, addToContent); + } + } + catch (e) { + globalXMLHttp = XMLHttp = null; + if (typeof ex === "function") { + ex.call(elm, e); + ex = null; + } + } + }; + } + XMLHttp.send(params); + if (timeout) { + timeoutId = window.setTimeout( function () { + if (!done) { + XMLHttp.abort(); + done = true; + if (typeof ex === "function") { + readyState = 0; + status = 408; + statusText = "Request timeout"; + globalXMLHttp = XMLHttp = null; + ex.call(elm, new Error(statusText)); + ex = null; + } + } + }, timeout); + } + })(this); + } + return this; + }, + + replaceWithAJAXContent : function (content, add) { + if (add) { + this.innerHTML += content; + } + else { + DOMAssistant.cleanUp(this); + this.innerHTML = content; + } + }, + + getReadyState : function () { + return (globalXMLHttp && DOMAssistant.def(globalXMLHttp.readyState))? globalXMLHttp.readyState : readyState; + }, + + getStatus : function () { + return status; + }, + + getStatusText : function () { + return statusText; + } + }; +}(); +DOMAssistant.attach(DOMAssistant.AJAX); +DOMAssistant.CSS = function () { + var def = DOMAssistant.def, + direct = { display: true }; + return { + addClass : function (className) { + if (!this.hasClass(className)) { + var currentClass = this.className; + this.className = currentClass + (currentClass.length? " " : "") + className; + } + return this; + }, + + removeClass : function (className) { + return this.replaceClass(className); + }, + + replaceClass : function (className, newClass) { + var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i"); + this.className = this.className.replace(classToRemove, function (match, p1, p2) { + return newClass? (p1 + newClass + p2) : " "; + }).replace(/^\s+|\s+$/g, ""); + return this; + }, + + hasClass : function (className) { + return (" " + this.className + " ").indexOf(" " + className + " ") > -1; + }, + + setStyle : function (style, value) { + var css = this.style; + if ("filters" in this && (typeof style === "string"? /opacity/i.test(style) : def(style.opacity))) { + css.zoom = 1; + css.filter = (css.filter || "").replace(/alpha\([^)]*\)/, "") + "alpha(opacity=" + (def(style.opacity)? style.opacity : value) * 100 + ")"; + } + if (def(css.cssText)) { + var styleToSet = css.cssText; + if (typeof style === "object") { + for (var i in style) { + if (typeof i === "string") { + if (direct[i]) { css[i] = style[i]; } + styleToSet += ";" + i + ":" + style[i]; + } + } + } + else { + if (direct[style]) { css[style] = value; } + styleToSet += ";" + style + ":" + value; + } + css.cssText = styleToSet; + } + return this; + }, + + getStyle : function (cssRule) { + var val = "", f; + cssRule = cssRule.toLowerCase(); + if (document.defaultView && document.defaultView.getComputedStyle) { + val = document.defaultView.getComputedStyle(this, "").getPropertyValue(cssRule); + } + else if (this.currentStyle) { + if ("filters" in this && cssRule === "opacity") { + val = (f = this.style.filter || this.currentStyle.filter) && f.indexOf("opacity=") >= 0? parseFloat(f.match(/opacity=([^)]*)/)[1]) / 100 : 1; + } + else { + cssRule = cssRule.replace(/^float$/, "styleFloat").replace(/\-(\w)/g, function (match, p1) { + return p1.toUpperCase(); + }); + val = this.currentStyle[cssRule]; + } + if (val === "auto" && /^(width|height)$/.test(cssRule) && this.currentStyle.display !== "none") { + val = this["offset" + cssRule.charAt(0).toUpperCase() + cssRule.substr(1)] + "px"; + } + } + return val; + } + }; +}(); +DOMAssistant.attach(DOMAssistant.CSS); +DOMAssistant.Content = function () { + var D$ = DOMAssistant.$$; + return { + init : function () { + DOMAssistant.setCache(false); + }, + + create : function (name, attr, append, content) { + var elm = D$(document.createElement(name)); + if (attr) { + elm = elm.setAttributes(attr); + } + if (DOMAssistant.def(content)) { + elm.addContent(content); + } + if (append) { + this.appendChild(elm); + } + return elm; + }, + + setAttributes : function (attr) { + if (DOMAssistant.isIE) { + var setAttr = function (elm, att, val) { + var attLower = att.toLowerCase(); + switch (attLower) { + case "name": + case "type": + case "multiple": + return D$(document.createElement(elm.outerHTML.replace(new RegExp(attLower + "(=[a-zA-Z]+)?"), " ").replace(">", " " + attLower + "=" + val + ">"))); + case "style": + elm.style.cssText = val; + return elm; + default: + elm[DOMAssistant.camel[attLower] || att] = val; + return elm; + } + }; + DOMAssistant.Content.setAttributes = function (attr) { + var elem = this; + var parent = this.parentNode; + for (var i in attr) { + if (typeof attr[i] === "string" || typeof attr[i] === "number") { + var newElem = setAttr(elem, i, attr[i]); + if (parent && /(name|type)/i.test(i)) { + if (elem.innerHTML) { + newElem.innerHTML = elem.innerHTML; + } + parent.replaceChild(newElem, elem); + } + elem = newElem; + } + } + return elem; + }; + } + else { + DOMAssistant.Content.setAttributes = function (attr) { + for (var i in attr) { + if (/class/i.test(i)) { + this.className = attr[i]; + } + else { + this.setAttribute(i, attr[i]); + } + } + return this; + }; + } + return DOMAssistant.Content.setAttributes.call(this, attr); + }, + + addContent : function (content) { + var type = typeof content; + if (type === "string" || type === "number") { + if (!this.firstChild) { + this.innerHTML = content; + } + else { + var tmp = document.createElement("div"); + tmp.innerHTML = content; + for (var i=tmp.childNodes.length-1, last=null; i>=0; i--) { + last = this.insertBefore(tmp.childNodes[i], last); + } + } + } + else if (type === "object" || (type === "function" && !!content.nodeName)) { + this.appendChild(content); + } + return this; + }, + + replaceContent : function (content) { + DOMAssistant.cleanUp(this); + return this.addContent(content); + }, + + replace : function (content, returnNew) { + var type = typeof content; + if (type === "string" || type === "number") { + var parent = this.parentNode; + var tmp = DOMAssistant.Content.create.call(parent, "div", null, false, content); + for (var i=tmp.childNodes.length; i--;) { + parent.insertBefore(tmp.childNodes[i], this.nextSibling); + } + content = this.nextSibling; + parent.removeChild(this); + } + else if (type === "object" || (type === "function" && !!content.nodeName)) { + this.parentNode.replaceChild(content, this); + } + return returnNew? content : this; + }, + + remove : function () { + DOMAssistant.cleanUp(this); + if (this.hasData()) { + if (this.removeEvent) { this.removeEvent(); } + this.unstore(); + } + this.parentNode.removeChild(this); + return null; + } + }; +}(); +DOMAssistant.attach(DOMAssistant.Content); +DOMAssistant.Events = function () { + var handler, + key = "_events", + w3cMode = !!document.addEventListener, + useCapture = { focus: true, blur: true }, + translate = DOMAssistant.isIE? { focus: "activate", blur: "deactivate", mouseenter: "mouseover", mouseleave: "mouseout" } : { mouseenter: "mouseover", mouseleave: "mouseout" }, + regex = { + special: /^submit|reset|change|select$/i, + mouseenterleave: /^mouse(enter|leave)$/i, + dom: /^DOM/, + on: /^on/i + }, + special = function (e) { + return DOMAssistant.isIE && regex.special.test(e); + }, + fix = function (e) { + return translate[e] || e; + }, + createEvent = function (e, type, target) { + e = e || window.event || {}; + if (e.event) { return e; } + var event = { + event: e, + type: type || e.type, + bubbles: e.bubbles || true, + cancelable: e.cancelable || false, + target: target || e.target || e.srcElement, + clientX: e.clientX || 0, + clientY: e.clientY || 0, + altKey: e.altKey || false, + ctrlKey: e.ctrlKey || false, + shiftKey: e.shiftKey || false, + button: e.button || null, + timeStamp: +new Date(), + preventDefault: function() { + if (e.preventDefault) { e.preventDefault(); } + this.returnValue = e.returnValue = false; + }, + stopPropagation: function() { + if (e.stopPropagation) { e.stopPropagation(); } + this.cancelBubble = e.cancelBubble = true; + } + }; + if (event.target && 3 === event.target.nodeType) { // Safari textnode bug + event.target = event.target.parentNode; + } + event.currentTarget = event.target; + event.relatedTarget = e.relatedTarget || (e.fromElement === event.target? e.toElement : e.fromElement) || null; + var de = document.documentElement, b = document.body; + event.pageX = DOMAssistant.def(e.pageX)? e.pageX : (event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0)); + event.pageY = DOMAssistant.def(e.pageY)? e.pageY : (event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0)); + if ("number" === typeof e.which) { + event.keyCode = e.keyCode; + event.charCode = event.which = e.which; + } + else if (e.keyCode) { + event.keyCode = event.charCode = e.keyCode; + } + return event; + }; + + return { + publicMethods : [ + "triggerEvent", + "addEvent", + "removeEvent", + "relayEvent", + "unrelayEvent", + "preventDefault", + "cancelBubble" + ], + + init : function () { + DOMAssistant.preventDefault = this.preventDefault; + DOMAssistant.cancelBubble = this.cancelBubble; + handler = this.handleEvent; + }, + + triggerEvent : function (evt, target, e) { + var fevt = fix(evt), + events = this.retrieve(key), + event = e || createEvent(e, fevt, target || this); + event.currentTarget = this; + if (events && events[fevt]) { + for (var i=0, iL=events[fevt].length; i<iL; i++) { + if (events[fevt][i].call(this, event) === false) { event.stopPropagation(); } + } + } + else if (typeof this["on" + fevt] === "function") { + this["on" + fevt].call(this, event); + } + var p = DOMAssistant.$$(this.parentNode); + if (!event.cancelBubble && p && p.nodeType === 1) { + p.triggerEvent(fevt, target, event); + } + return this; + }, + + addEvent : function (evt, func, relay, proxy, selector) { + var existingEvent, + fevt = fix(evt), + uid = fevt + this.retrieve(), + onevt = "on" + fevt; + if (!(func.attachedElements && func.attachedElements[uid])) { + var events = this.retrieve(key) || {}; + if (!events[fevt]) { + events[fevt] = []; + existingEvent = this[onevt]; + this[onevt] = null; + } + if (typeof this.window === "object") { this.window[onevt] = handler; } + else if (!events[fevt].length) { + if (w3cMode) { this.addEventListener(fevt, handler, useCapture[fevt]); } + else { this[onevt] = handler; } + } + if (existingEvent) { + events[fevt].push(existingEvent); + } + if (fevt !== evt) { func.evt = evt; } + func.relay = relay; + func.proxy = proxy; + func.selector = selector; + func.attachedElements = func.attachedElements || {}; + func.attachedElements[uid] = true; + events[fevt].push(func); + this.store(key, events); + } + return this; + }, + + handleEvent : function (evt) { + var currentEvt = (evt && regex.dom.test(evt.type) && w3cMode)? evt : createEvent(evt), + type = fix(currentEvt.type), + targ = currentEvt.target, + relatedTarg = currentEvt.relatedTarget, + eventColl = this.retrieve(key)[type].slice(0), eventCollLength, eventReturn, oevt; + if ((eventCollLength = eventColl.length)) { + for (var i=0; i<eventCollLength; i++) { + if (typeof eventColl[i] === "function") { + if ((oevt = eventColl[i].evt) && oevt !== type) { + currentEvt.type = oevt; + if (relatedTarg && regex.mouseenterleave.test(oevt)) { + if (eventColl[i].relay) { + var elms = eventColl[i].elms || (eventColl[i].elms = this.cssSelect(eventColl[i].selector)); + if (elms.indexOf(targ) < 0 || !DOMAssistant.hasChild.call(relatedTarg, targ)) { continue; } + } + else if (this === relatedTarg || this.hasChild(relatedTarg)) { continue; } + } + } + eventReturn = eventColl[i].call(this, currentEvt); + } + } + if (eventReturn === false) { currentEvt.stopPropagation(); } + return eventReturn; + } + }, + + removeEvent : function (evt, func, relay, proxy) { + var uid = (evt = fix(evt)) + this.retrieve(), + events = this.retrieve(key), + onevt = "on" + evt; + if (events && !evt) { + for (var ev in events) { + if (events[ev].length) { this.removeEvent(ev); } + } + var attr = this.attributes; + for (var att, j=attr.length; j--;) { + att = attr[j].nodeName.toLowerCase(); + if (regex.on.test(att) && typeof this[att] === "function") { + this[att] = null; + } + } + } + else if (events && events[evt]) { + var eventColl = events[evt]; + for (var fn, i=eventColl.length; i--;) { + fn = func || eventColl[i]; + if (eventColl[i] === fn && relay === fn.relay && proxy === fn.proxy) { + eventColl.splice(i, 1); + if (!!proxy && fn.selector) { + this.cssSelect(fn.selector).removeEvent(proxy); + } + if (fn.attachedElements) { + fn.attachedElements[uid] = null; + } + } + } + if (!events[evt].length) { + if (w3cMode) { this.removeEventListener(evt, handler, useCapture[evt]); } + else { this[onevt] = null; } + } + } + else if (this[onevt] && !func && !relay) { + this[onevt] = null; + } + return this; + }, + + relayEvent: function (evt, selector, fn, proxy) { + if (special(evt)) { + this.relayEvent("focus", selector, function() { + DOMAssistant.$$(this).removeEvent(evt).addEvent(evt, function(e) { + return fn.call(this, createEvent(e)); + }); + }, evt).relayEvent("blur", selector, function() { + DOMAssistant.$$(this).removeEvent(evt); + }, evt); + return this; + } + return this.addEvent(evt, function(e) { + e = createEvent(e); + var target = e.target, args = arguments, i = 0, elm, elms = this.cssSelect(selector); + while ((elm = elms[i++])) { + if ((elm === target || DOMAssistant.hasChild.call(elm, target)) && !elm.disabled) { + e.currentTarget = elm; + var retVal = fn.apply(elm, args); + if (!retVal) { e.preventDefault(); } + return retVal; + } + } + }, true, proxy, selector); + }, + + unrelayEvent: function (evt) { + if (special(evt)) { + return this.removeEvent("focus", null, true, evt).removeEvent("blur", null, true, evt); + } + return this.removeEvent(evt, null, true); + }, + + preventDefault : function (evt) { + if (evt.preventDefault) { evt.preventDefault(); } + evt.returnValue = false; + }, + + cancelBubble : function (evt) { + if (evt.stopPropagation) { evt.stopPropagation(); } + evt.cancelBubble = true; + } + }; +}(); +DOMAssistant.attach(DOMAssistant.Events); +DOMAssistant.DOMLoad = function () { + var DOMLoaded = false, + DOMLoadTimer = null, + functionsToCall = [], + addedStrings = {}, + errorHandling = null, + execFunctions = function () { + for (var i=0, il=functionsToCall.length; i<il; i++) { + try { + functionsToCall[i](); + } + catch (e) { + if (errorHandling && typeof errorHandling === "function") { + errorHandling(e); + } + } + } + functionsToCall = []; + }, + DOMHasLoaded = function () { + if (DOMLoaded) { + return; + } + DOMLoaded = true; + execFunctions(); + }; + /* Internet Explorer */ + /*@cc_on + @if (@_win32 || @_win64) + document.write("<script id=\"ieScriptLoad\" defer src=\"//:\"><\/script>"); + document.getElementById("ieScriptLoad").onreadystatechange = function() { + if (this.readyState === "complete") { + DOMHasLoaded(); + } + }; + @end @*/ + /* Mozilla, Chrome, Opera */ + if (document.addEventListener) { + document.addEventListener("DOMContentLoaded", DOMHasLoaded, false); + } + /* Safari, iCab, Konqueror */ + if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) { + DOMLoadTimer = setInterval(function () { + if (/loaded|complete/i.test(document.readyState)) { + DOMHasLoaded(); + clearInterval(DOMLoadTimer); + } + }, 10); + } + /* Other web browsers */ + window.onload = DOMHasLoaded; + + return { + DOMReady : function () { + for (var i=0, il=arguments.length, funcRef; i<il; i++) { + funcRef = arguments[i]; + if (!funcRef.DOMReady && !addedStrings[funcRef]) { + if (typeof funcRef === "string") { + addedStrings[funcRef] = true; + funcRef = new Function(funcRef); + } + funcRef.DOMReady = true; + functionsToCall.push(funcRef); + } + } + if (DOMLoaded) { + execFunctions(); + } + }, + + setErrorHandling : function (funcRef) { + errorHandling = funcRef; + } + }; +}(); +DOMAssistant.DOMReady = DOMAssistant.DOMLoad.DOMReady;
\ No newline at end of file diff --git a/samples/src/main/java/gwtquery/samples/public/dojo.js b/samples/src/main/java/gwtquery/samples/public/js/dojo.js index 7a17a80a..7a17a80a 100644 --- a/samples/src/main/java/gwtquery/samples/public/dojo.js +++ b/samples/src/main/java/gwtquery/samples/public/js/dojo.js diff --git a/samples/src/main/java/gwtquery/samples/public/ext-all.js b/samples/src/main/java/gwtquery/samples/public/js/ext-all.js index 96c6792d..96c6792d 100644 --- a/samples/src/main/java/gwtquery/samples/public/ext-all.js +++ b/samples/src/main/java/gwtquery/samples/public/js/ext-all.js diff --git a/samples/src/main/java/gwtquery/samples/public/ext-base.js b/samples/src/main/java/gwtquery/samples/public/js/ext-base.js index eec4c8ef..eec4c8ef 100644 --- a/samples/src/main/java/gwtquery/samples/public/ext-base.js +++ b/samples/src/main/java/gwtquery/samples/public/js/ext-base.js diff --git a/samples/src/main/java/gwtquery/samples/public/ext-core.js b/samples/src/main/java/gwtquery/samples/public/js/ext-core.js index 2b6eaa65..2b6eaa65 100644 --- a/samples/src/main/java/gwtquery/samples/public/ext-core.js +++ b/samples/src/main/java/gwtquery/samples/public/js/ext-core.js diff --git a/samples/src/main/java/gwtquery/samples/public/jquery-1.2.3.js b/samples/src/main/java/gwtquery/samples/public/js/jquery-1.2.3.js index 998511e2..998511e2 100644 --- a/samples/src/main/java/gwtquery/samples/public/jquery-1.2.3.js +++ b/samples/src/main/java/gwtquery/samples/public/js/jquery-1.2.3.js diff --git a/samples/src/main/java/gwtquery/samples/public/jquery-1.3.1.js b/samples/src/main/java/gwtquery/samples/public/js/jquery-1.3.1.js index 94e9c175..94e9c175 100644 --- a/samples/src/main/java/gwtquery/samples/public/jquery-1.3.1.js +++ b/samples/src/main/java/gwtquery/samples/public/js/jquery-1.3.1.js diff --git a/samples/src/main/java/gwtquery/samples/public/prototype-1.6.0.3.js b/samples/src/main/java/gwtquery/samples/public/js/prototype-1.6.0.3.js index 6bcf91a7..6bcf91a7 100644 --- a/samples/src/main/java/gwtquery/samples/public/prototype-1.6.0.3.js +++ b/samples/src/main/java/gwtquery/samples/public/js/prototype-1.6.0.3.js diff --git a/samples/src/main/java/gwtquery/samples/public/js/selector.js b/samples/src/main/java/gwtquery/samples/public/js/selector.js new file mode 100644 index 00000000..288fa9c7 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/js/selector.js @@ -0,0 +1,414 @@ +/* + Selector.js, an JavaScript implementation of a CSS3 Query Selector + Copyright (C) 2009 Henrik Lindqvist <henrik.lindqvist@llamalab.com> + + This library is free software: you can redistribute it and/or modify + it under the terms of the GNU Lesser General Public License as published + by the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This library is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Lesser General Public License for more details. + + You should have received a copy of the GNU Lesser General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ +/** + * A JavaScript implementation of a CSS3 Query Selector. + * <p>For more information, please visit + * <a href="http://www.w3.org/TR/css3-selectors/" target="_blank">http://www.w3.org/TR/css3-selectors/</a>.</p> + * @class Selector + * @version 0.6 + * @author Henrik Lindqvist <<a href="mailto:henrik.lindqvist@llamalab.com">henrik.lindqvist@llamalab.com</a>> + */ + +new function () { +/** + * Pre-compiles an Selector query. + * <p>When creating a <code>new</code> instance of the <code>Selector</code>, the query are + * pre-compiled for later execution with a call to {@link exec}.</p> + * <p>The constructor can also be called as a function, without the <code>new</code> keyword. Then + * the query is executed against the optional context element, otherwise current document.</p> + * <h4>Example:</h4> + * <pre> + * // Constructor syntax: + * new Selector('div > p').exec(document).forEach(function (e) { + * e.style.color = 'red'; + * }); + * // Or, shorthand syntax: + * Selector('div > p', document).forEach(function (e) { + * e.style.color = 'red'; + * }); + * </pre> + * @constructor Selector + * @param {string} pattern - selector pattern. + * @param {optional Object} context - document or context element. + */ +function Selector (p, c) { + if (!(this instanceof Selector)) return new Selector(p).exec(c); + if (!qsa) this.exec = cache[p] || (cache[p] = new compile(p)); + this.pattern = p; +} +Selector.prototype = { + constructor : Selector, +/** + * Execute a selector query. + * <h4>Example:</h4> + * <pre> + * new Selector('div > p').exec(document).forEach(function (e) { + * e.style.color = 'red'; + * }); + * </pre> + * @function {Array} exec + * @param {optional Object} context - document or context element, otherwise current document. + * @returns Non-live <code>Array</code> with matching elements. + */ + exec : function (c) { + var pe = this.patchElement, pa = this.patchArray, p = this.pattern, r = pe + ? map.call((c||d).querySelectorAll(p), pe, this) + : Array.prototype.slice.call((c||d).querySelectorAll(p)); + return pa ? pa.call(this, r) : r; + }, +/** + * Returns a string representing the query source pattern. + * @function {string} toString + * @returns source pattern. + */ + toString : function () { + return this.pattern; + }, +/** + * Returns a string representing the source code of the Selector. + * @function {string} toSource + * @returns source code. + */ + toSource : function () { + return 'new Selector("'+this.pattern+'")'; + } +/** + * Hook for patching result Element’s. + * <p>When using the {@link Selector} within you own framework you can add this function to + * extend the resulting <code>Element</code>’s before they are returned by {@link exec}. + * <p>This function is not defined by default, since calling it unneccesarily affects performance.</p> + * @function {Element} patchElement + * @param {Element} e - the result element. + * @returns the patched <code>Element</code>. + * @see patchArray + */ + //patchElement : function (e) { return e; }, +/** + * Hook for patching result Array. + * <p>When using the {@link Selector} within you own framework you can add this function to + * extend the resulting <code>Array</code> before it’sthey are returned by {@link exec}. + * <p>This function is not defined by default, since calling it unneccesarily affects performance.</p> + * @function {Array} patchArray + * @param {Array} a - the result array. + * @returns the patched <code>Array</code>. + * @see patchElement + */ + //patchArray : function (a) { return a; } +}; +window.Selector = Selector; +// ------------------------------------------ Private ------------------------------------------- // +function $ (s) { + var a = arguments; + return s.replace(/\$(\d)/g, function (m, i) { return a[i] }); +} +with (navigator.userAgent) { + var ie = indexOf('MSIE') != -1 && indexOf('Opera') == -1, + mz = indexOf('Gecko') != -1 && indexOf('KHTML') == -1, + wk = indexOf('AppleWebKit') != -1; +} +var d = document, + de = d.documentElement, + qsa = !!d.querySelectorAll, + bcn = !!d.getElementsByClassName, + cnl = !!de.children, + cnlt = cnl && de.children.tags && !wk, + ec = !!de.contains, + cdp = !!de.compareDocumentPosition, + si = typeof de.sourceIndex == 'number', + cache = {}, + cmp = { + '=': 'if($1($2=="$3")){$5}', + '^=': 'if($1((x=$2)&&!x.indexOf("$3"))){$5}', + '*=': 'if($1((x=$2)&&x.indexOf("$3")!=-1)){$5}', + '$=': 'if($1((x=$2)&&x.indexOf("$3",x.length-$4)!=-1)){$5}', + '~=': 'if($1((x=$2)&&(y=x.indexOf("$3"))!=-1&&(x.charCodeAt(y-1)||32)==32&&(x.charCodeAt(y+$4)||32)==32)){$5}', + '|=': 'if($1((x=$2)&&(x=="$3"||!x.indexOf("$3-")))){$5}' + }, + /* + cmp = { + '=': 'if($1($2=="$3")){$5}', + '^=': 'if($1((x=$2)&&!x.indexOf("$3"))){$5}', + '*=': 'if($1((x=$2)&&x.indexOf("$3")!=-1)){$5}', + '$=': 'if($1/$3$/.test($2)){$5}', + '~=': 'if($1/(^|\\s)$3(\\s|$)/.test($2)){$5}', + '|=': 'if($1/^$3(-|$)/.test($2)){$5}' + }, + */ + map = Array.prototype.map || function (fn, tp) { + var i = this.length, r = new Array(i); + while (--i >= 0) r[i] = fn.call(tp, this[i], i, this); + return r; + }; +with (d.implementation) { + var me = d.addEventListener + && (hasFeature('MutationEvents','2.0') + || hasFeature('Events','2.0') && hasFeature('Core','2.0')); +} +Selector.guid = 0; +Selector.nthIndex = function (LLi, c, r, tp, tv) { + var p = c.parentNode, ci = 'LLi#'+tv, pl = 'LLi$'+tv; + if (!p) return Number.NaN; + if (!c[ci] || c.LLi != LLi) { + for (var n = p.firstChild, i = 0; n; n = n.nextSibling) { + if (n[tp] == tv) { + n[ci] = ++i; + n.LLi = LLi; + } + } + p[pl] = i; + } + return r ? 1 + p[pl] - c[ci] : c[ci]; +}; +/* +//TODO: srt to slow in wk +Selector.srcIndex = function (h, n) { + var i = 0, x; + do { + if (x = n.previousSibling) { + n = x; + if (n.getElementsByTagName) { + if (x = h[n.LLn]) return x + i + 1; + i += n.getElementsByTagName('*').length + 1; + } + } + else if (n = n.parentNode) i++; + } while (n); + return i; +} +Selector.srcIndex = function (h, n) { + var i = -1, x; + do { + if (n.nodeType === 1) { + i++; + if (x = h[n.LLn]) return x + i; + } + if (x = n.previousSibling) do { n = x; } while (x = x.lastChild); + else n = n.parentNode; + } while (n); + return i; +} +*/ +if (me) { + function fn (e) { + with (e.target) { + if (nodeType !== 2) + ownerDocument.LLi = ++Selector.guid; + } + } + d.addEventListener('DOMNodeInserted', fn, false); + d.addEventListener('DOMNodeRemoved', fn, false); +} +if (ie) { + var am = { + acceptcharset: 'acceptCharset', + accesskey: 'accessKey', + cellpadding: 'cellPadding', + cellspacing: 'cellSpacing', + checked: 'defaultChecked', + selected: 'defaultSelected', + 'class': 'className', + colspan: 'colSpan', + 'for': 'htmlFor', + frameborder: 'frameBorder', + hspace: 'hSpace', + longdesc: 'longDesc', + marginwidth: 'marginWidth', + marginheight: 'marginHeight', + noresize: 'noResize', + noshade: 'noShade', + maxlength: 'maxLength', + readonly: 'readOnly', + rowspan: 'rowSpan', + tabindex: 'tabIndex', + usemap: 'useMap', + valign: 'vAlign', + vspace: 'vSpace' + }, ab = { + compact: 1, + nowrap: 1, + ismap: 1, + declare: 1, + noshade: 1, + checked: 1, + disabled: 1, + readonly: 1, + multiple: 1, + selected: 1, + noresize: 1, + defer: 1 + }; +} +function compile (qp) { + this.dup = this.srt = this.idx = this.i = this.nqp = 0; + with (this) { + var js = ''; + do { + i = nqp = 0; + js += $('n=c;$1q:do{$2}while(false);', srt?'s=0;':'', type(qp, $( + srt?'for(x=r.length;s<x;z=s+((x-s)/2)|0,($1)?s=z+1:x=z);if(s<r.length)r.splice(s++,0,$2);else r[s++]=$2;':'r[s++]=$2;', + cdp?'r[z].compareDocumentPosition(n)&4':'h[r[z].LLn]<h[n.LLn]', + 'pe?pe.call(this,n):n' + ), 0, '*')); + } while (qp = nqp); + js = $( + 'var r=[],s=0,n,x,y,z,d=c?c.ownerDocument||c.document||c:c=document,pe=this.patchElement,pa=this.patchArray$1$2;$3return pa?pa.call(this,r):r;', + dup>0?',h={}':'', + idx?me?',LLi=d.LLi||(d.LLi=++Selector.guid)':',LLi=++Selector.guid':'', + js + ); + //console.log(js); + return new Function('c', js); + } +} +compile.prototype = { + type: function (qp, js, n, s, c) { + with (this) { + var m = /^\s*([\w-]+|\*)?(.*)/.exec(qp), t = m[1] || '*'; + if (!n && c==' ' && !dup) dup = 1; + js = pred(m[2], js, n, t, c); + switch (c) { + case '>': + return cnlt && t!='*' + ? $('for(var n$1=n.children.tags("$2"),i$1=0;n=n$1[i$1++];){$3}', ++i, t, js) + : $(cnl ? 'for(var n$1=n.children,i$1=0;n=n$1[i$1++];)$2{$3}' + : 'for(n=n.firstChild;n;n=n.nextSibling)$2{$3}', + ++i, t!='*'?'if(n.nodeName==="'+t.toUpperCase()+'")':!cnl||ie?'if(n.nodeType===1)':'', js); + case '+': + return $('while(n=n.nextSibling)if(n.node$1){$2break}else if(n.nodeType===1)break;', + t=='*'?'Type===1':'Name==="'+t.toUpperCase()+'"', js); + case '~': + return $('while(n=n.nextSibling)if(n.node$1){$3}else if(n.node$2)break;', + t=='*'?'Type===1':'Name==="'+t.toUpperCase()+'"', + s=='*'?'Type===1':'Name==="'+s.toUpperCase()+'"', js); + default: + return (typeof js == 'object') ? String(js) // handled by pred + : n ? t=='*' ? js : $('if(n.nodeName!="$1"){$2}', t.toUpperCase(), js) + : $('for(var n$1=n.getElementsByTagName("$2"),i$1=0;n=n$1[i$1++];)$3{$4}', + ++i, t, ie&&t=='*'?'if(n.nodeType===1)':'', js); + } + } + }, + pred: function (qp, js, n, t, c) { + with (this) { + var m = /^([#\.])([\w-]+)(.*)/.exec(qp) + || /^(\[)\s*([\w-]+)\s*(?:([~|^$*]?=)\s*(?:(['"])(.*?)\4|([\w-]+)))?\s*\](.*)/.exec(qp) + || /^:(first|last|only)-(?:(child)|of-type)(.*)/.exec(qp) + || /^:(nth)-(?:(last)-)?(?:(child)|of-type)\(\s*(?:(odd|even)|(-|\d*)n([+-]\d+)?|([1-9]\d*))\s*\)(.*)/.exec(qp) + || /^:(active|checked|(?:dis|en)abled|empty|focus|link|root|target)(.*)/.exec(qp) + || /^:(lang)\(\s*(['"])?(.*?)\2\s*\)(.*)/.exec(qp) + || (!n && /^:(not)\(\s*(.*)\s*\)(.*)/.exec(qp)), x = 0; + if (!m) { + if (m = /^\s*([+>~,\s])\s*(\S.*)/.exec(qp)) { + if (m[1] != ',') return type(m[2], js, n, t, m[1]); + nqp = m[2]; + dup = 2; + //srt = 1; + } + else if (/\S/.test(qp)) throw new Error('Illegal query near: '+qp); + return dup<1?js:$('if(!h[x=n.LLn||(n.LLn=++Selector.guid)]){h[x]=$1;$2}', + !srt||cdp?'true':si?'n.sourceIndex':'Selector.srcIndex(h,n)', js); + } + if (!n && m[1]=='#' && dup!=2) dup = -1; + js = pred(m[m.length-1], js, n, t, 1); + switch (m[1]) { + case '#': + return uniq(js, n, t, c, ie, 'n.id', '"'+m[2]+'"', 'd.getElementById("'+m[2]+'")'); + case '.': + return bcn && !n && (!c || c==' ') && (t=='*' || !mz) + ? Object($('for(var n$1=n.getElementsByClassName("$2"),i$1=0;n=n$1[i$1++];)$3{$4}', + ++i, m[2], t=='*'?'':'if(n.nodeName==="'+t.toUpperCase()+'")', js)) + : $(cmp['~='], n?'!':'', 'n.className', x=m[2], x.length, js); + case '[': + return (x = m[3]) + ? $(cmp[x], + n?'!':'', + ie ? (x = m[2].toLowerCase()) == 'style' ? 'style.cssText.toLowerCase()' + : ab[x] ? 'n.'+x+'&&"'+x+'"' + : 'n.getAttribute("'+(am[x]||x)+'",2)' + : 'n.getAttribute("'+m[2]+'")', + x=m[5]||m[6], x.length, + js + ) + : $(ie?'if($1((x=n.getAttributeNode("$2"))&&x.specified)){$3}':'if($1n.hasAttribute("$2")){$3}', + n?'!':'', m[2], js); + case 'active': + case 'focus': + return uniq(js, n, t, c, 0, 'n', 'd.activeElement'); + case 'checked': + return $('if($1(n.checked||n.selected)){$2}', n?'!':'', js); + case 'disabled': + x = 1; + case 'enabled': + return $( + 'if(n.disabled===$1$2){$3}', + !!(x ^ n), + ie?'&&((x=n.nodeName)==="BUTTON"||x==="INPUT"||x==="OPTION"||x==="OPTGROUP"||x==="SELECT"||x==="TEXTAREA"':'', + js + ); + case 'empty': + return $('for(x=n.firstChild;x&&x.nodeType>3;x=x.nextSibling);if($1x){$2}', n?'':'!', js); + case 'first': + return flo(js, n, m[2], 'previous'); + case 'lang': + return $(cmp['|='], n?'!':'', 'n.lang', x=m[3], x.length, js); + case 'last': + return flo(js, n, m[2], 'next'); + case 'link': + return $('if($1(n.nodeName==="A"&&n.href)){$2}', n?'!':'', js); + case 'nth': + var a = m[4] ? 2 : m[5]=='-' ? -1 : m[7] ? 0 : m[5] ? m[5]-0 : 1, + b = m[4]=='odd' ? 1 : (m[6]||m[7])-0 || 0; + if (a==1) return js; + if (a==0 && b==1) return flo(js, n, m[3], m[2]?'next':'previous'); + if (a==b) b = 0; + if (b<0) b = a+b; + idx = 1; + return $('if($1(Selector.nthIndex(LLi,n,$2,"node$3",$4)$5)){$6}', + n?'!':'', !!m[2], m[3]?'Type':'Name', m[3]?'1':'n.nodeName', + a<0 ? '<='+b : a ? '%'+a+'==='+b : '==='+b, js); + case 'not': + return type(m[2], js, 1, '*'); + case 'only': + return flo(js, n, m[2]); + case 'root': + return uniq(js, n, t, c, 0, 'n', 'd.documentElement'); + case 'target': + x = '(d.defaultView||d.parentWindow||window).location.hash.substr(1)'; + return uniq(js, n, t, c, ie, 'n.id', x, 'd.getElementById('+x+')'); + } + } + }, + uniq: function (js, n, t, c, d, p, v, w) { + return (n || (c && c!=' ') || d) + ? $(n?'if($1!==$2){$3}':'if($1===$2){$3break q}', p, v, js) + : Object($( + ec ? 'if((x=$1)===n||!n.contains||n.contains(x))$2' + : cdp ? 'if((x=$1)===n||!n.compareDocumentPosition||n.compareDocumentPosition(x)&16)$2' + : 'for(x=y=$1;y;y=y.parentNode)if(y===n)$2', + w||v, + t=='*'?'{n=x;'+js+'break q}':'{if((n=x).nodeName==="'+t.toUpperCase()+'"){'+js+'}break q}' + )); + }, + flo: function (js, n, t, s) { + return $(s?'for($2x=n.$1Sibling;x&&x.node$3;x=x.$1Sibling);if($4x){$5}' + :'for($2(x=n.parentNode)&&(x=x.firstChild);x&&(x.node$3||x===n);x=x.nextSibling);if($4x){$5}', + s, t?'':'y=n.nodeName,', t?'Type!==1':'Name!==y', n?'':'!', js); + } +}; + +} diff --git a/samples/src/main/java/gwtquery/samples/public/js/sizzle.js b/samples/src/main/java/gwtquery/samples/public/js/sizzle.js new file mode 100644 index 00000000..c52b77d1 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/js/sizzle.js @@ -0,0 +1,1068 @@ +/*! + * Sizzle CSS Selector Engine - v1.0 + * Copyright 2009, The Dojo Foundation + * Released under the MIT, BSD, and GPL Licenses. + * More information: http://sizzlejs.com/ + */ +(function(){ + +var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, + done = 0, + toString = Object.prototype.toString, + hasDuplicate = false, + baseHasDuplicate = true; + +// Here we check if the JavaScript engine is using some sort of +// optimization where it does not always call our comparision +// function. If that is the case, discard the hasDuplicate value. +// Thus far that includes Google Chrome. +[0, 0].sort(function(){ + baseHasDuplicate = false; + return 0; +}); + +var Sizzle = function(selector, context, results, seed) { + results = results || []; + context = context || document; + + var origContext = context; + + if ( context.nodeType !== 1 && context.nodeType !== 9 ) { + return []; + } + + if ( !selector || typeof selector !== "string" ) { + return results; + } + + var parts = [], m, set, checkSet, extra, prune = true, contextXML = Sizzle.isXML(context), + soFar = selector, ret, cur, pop, i; + + // Reset the position of the chunker regexp (start from head) + do { + chunker.exec(""); + m = chunker.exec(soFar); + + if ( m ) { + soFar = m[3]; + + parts.push( m[1] ); + + if ( m[2] ) { + extra = m[3]; + break; + } + } + } while ( m ); + + if ( parts.length > 1 && origPOS.exec( selector ) ) { + if ( parts.length === 2 && Expr.relative[ parts[0] ] ) { + set = posProcess( parts[0] + parts[1], context ); + } else { + set = Expr.relative[ parts[0] ] ? + [ context ] : + Sizzle( parts.shift(), context ); + + while ( parts.length ) { + selector = parts.shift(); + + if ( Expr.relative[ selector ] ) { + selector += parts.shift(); + } + + set = posProcess( selector, set ); + } + } + } else { + // Take a shortcut and set the context if the root selector is an ID + // (but not if it'll be faster if the inner selector is an ID) + if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML && + Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) { + ret = Sizzle.find( parts.shift(), context, contextXML ); + context = ret.expr ? Sizzle.filter( ret.expr, ret.set )[0] : ret.set[0]; + } + + if ( context ) { + ret = seed ? + { expr: parts.pop(), set: makeArray(seed) } : + Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML ); + set = ret.expr ? Sizzle.filter( ret.expr, ret.set ) : ret.set; + + if ( parts.length > 0 ) { + checkSet = makeArray(set); + } else { + prune = false; + } + + while ( parts.length ) { + cur = parts.pop(); + pop = cur; + + if ( !Expr.relative[ cur ] ) { + cur = ""; + } else { + pop = parts.pop(); + } + + if ( pop == null ) { + pop = context; + } + + Expr.relative[ cur ]( checkSet, pop, contextXML ); + } + } else { + checkSet = parts = []; + } + } + + if ( !checkSet ) { + checkSet = set; + } + + if ( !checkSet ) { + Sizzle.error( cur || selector ); + } + + if ( toString.call(checkSet) === "[object Array]" ) { + if ( !prune ) { + results.push.apply( results, checkSet ); + } else if ( context && context.nodeType === 1 ) { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) { + results.push( set[i] ); + } + } + } else { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && checkSet[i].nodeType === 1 ) { + results.push( set[i] ); + } + } + } + } else { + makeArray( checkSet, results ); + } + + if ( extra ) { + Sizzle( extra, origContext, results, seed ); + Sizzle.uniqueSort( results ); + } + + return results; +}; + +Sizzle.uniqueSort = function(results){ + if ( sortOrder ) { + hasDuplicate = baseHasDuplicate; + results.sort(sortOrder); + + if ( hasDuplicate ) { + for ( var i = 1; i < results.length; i++ ) { + if ( results[i] === results[i-1] ) { + results.splice(i--, 1); + } + } + } + } + + return results; +}; + +Sizzle.matches = function(expr, set){ + return Sizzle(expr, null, null, set); +}; + +Sizzle.find = function(expr, context, isXML){ + var set; + + if ( !expr ) { + return []; + } + + for ( var i = 0, l = Expr.order.length; i < l; i++ ) { + var type = Expr.order[i], match; + + if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { + var left = match[1]; + match.splice(1,1); + + if ( left.substr( left.length - 1 ) !== "\\" ) { + match[1] = (match[1] || "").replace(/\\/g, ""); + set = Expr.find[ type ]( match, context, isXML ); + if ( set != null ) { + expr = expr.replace( Expr.match[ type ], "" ); + break; + } + } + } + } + + if ( !set ) { + set = context.getElementsByTagName("*"); + } + + return {set: set, expr: expr}; +}; + +Sizzle.filter = function(expr, set, inplace, not){ + var old = expr, result = [], curLoop = set, match, anyFound, + isXMLFilter = set && set[0] && Sizzle.isXML(set[0]); + + while ( expr && set.length ) { + for ( var type in Expr.filter ) { + if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { + var filter = Expr.filter[ type ], found, item, left = match[1]; + anyFound = false; + + match.splice(1,1); + + if ( left.substr( left.length - 1 ) === "\\" ) { + continue; + } + + if ( curLoop === result ) { + result = []; + } + + if ( Expr.preFilter[ type ] ) { + match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter ); + + if ( !match ) { + anyFound = found = true; + } else if ( match === true ) { + continue; + } + } + + if ( match ) { + for ( var i = 0; (item = curLoop[i]) != null; i++ ) { + if ( item ) { + found = filter( item, match, i, curLoop ); + var pass = not ^ !!found; + + if ( inplace && found != null ) { + if ( pass ) { + anyFound = true; + } else { + curLoop[i] = false; + } + } else if ( pass ) { + result.push( item ); + anyFound = true; + } + } + } + } + + if ( found !== undefined ) { + if ( !inplace ) { + curLoop = result; + } + + expr = expr.replace( Expr.match[ type ], "" ); + + if ( !anyFound ) { + return []; + } + + break; + } + } + } + + // Improper expression + if ( expr === old ) { + if ( anyFound == null ) { + Sizzle.error( expr ); + } else { + break; + } + } + + old = expr; + } + + return curLoop; +}; + +Sizzle.error = function( msg ) { + throw "Syntax error, unrecognized expression: " + msg; +}; + +var Expr = Sizzle.selectors = { + order: [ "ID", "NAME", "TAG" ], + match: { + ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, + ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/, + TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, + CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+\-]*)\))?/, + POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, + PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ + }, + leftMatch: {}, + attrMap: { + "class": "className", + "for": "htmlFor" + }, + attrHandle: { + href: function(elem){ + return elem.getAttribute("href"); + } + }, + relative: { + "+": function(checkSet, part){ + var isPartStr = typeof part === "string", + isTag = isPartStr && !/\W/.test(part), + isPartStrNotTag = isPartStr && !isTag; + + if ( isTag ) { + part = part.toLowerCase(); + } + + for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) { + if ( (elem = checkSet[i]) ) { + while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {} + + checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ? + elem || false : + elem === part; + } + } + + if ( isPartStrNotTag ) { + Sizzle.filter( part, checkSet, true ); + } + }, + ">": function(checkSet, part){ + var isPartStr = typeof part === "string", + elem, i = 0, l = checkSet.length; + + if ( isPartStr && !/\W/.test(part) ) { + part = part.toLowerCase(); + + for ( ; i < l; i++ ) { + elem = checkSet[i]; + if ( elem ) { + var parent = elem.parentNode; + checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false; + } + } + } else { + for ( ; i < l; i++ ) { + elem = checkSet[i]; + if ( elem ) { + checkSet[i] = isPartStr ? + elem.parentNode : + elem.parentNode === part; + } + } + + if ( isPartStr ) { + Sizzle.filter( part, checkSet, true ); + } + } + }, + "": function(checkSet, part, isXML){ + var doneName = done++, checkFn = dirCheck, nodeCheck; + + if ( typeof part === "string" && !/\W/.test(part) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn("parentNode", part, doneName, checkSet, nodeCheck, isXML); + }, + "~": function(checkSet, part, isXML){ + var doneName = done++, checkFn = dirCheck, nodeCheck; + + if ( typeof part === "string" && !/\W/.test(part) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn("previousSibling", part, doneName, checkSet, nodeCheck, isXML); + } + }, + find: { + ID: function(match, context, isXML){ + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + return m ? [m] : []; + } + }, + NAME: function(match, context){ + if ( typeof context.getElementsByName !== "undefined" ) { + var ret = [], results = context.getElementsByName(match[1]); + + for ( var i = 0, l = results.length; i < l; i++ ) { + if ( results[i].getAttribute("name") === match[1] ) { + ret.push( results[i] ); + } + } + + return ret.length === 0 ? null : ret; + } + }, + TAG: function(match, context){ + return context.getElementsByTagName(match[1]); + } + }, + preFilter: { + CLASS: function(match, curLoop, inplace, result, not, isXML){ + match = " " + match[1].replace(/\\/g, "") + " "; + + if ( isXML ) { + return match; + } + + for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) { + if ( elem ) { + if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n]/g, " ").indexOf(match) >= 0) ) { + if ( !inplace ) { + result.push( elem ); + } + } else if ( inplace ) { + curLoop[i] = false; + } + } + } + + return false; + }, + ID: function(match){ + return match[1].replace(/\\/g, ""); + }, + TAG: function(match, curLoop){ + return match[1].toLowerCase(); + }, + CHILD: function(match){ + if ( match[1] === "nth" ) { + // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6' + var test = /(-?)(\d*)n((?:\+|-)?\d*)/.exec( + match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" || + !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]); + + // calculate the numbers (first)n+(last) including if they are negative + match[2] = (test[1] + (test[2] || 1)) - 0; + match[3] = test[3] - 0; + } + + // TODO: Move to normal caching system + match[0] = done++; + + return match; + }, + ATTR: function(match, curLoop, inplace, result, not, isXML){ + var name = match[1].replace(/\\/g, ""); + + if ( !isXML && Expr.attrMap[name] ) { + match[1] = Expr.attrMap[name]; + } + + if ( match[2] === "~=" ) { + match[4] = " " + match[4] + " "; + } + + return match; + }, + PSEUDO: function(match, curLoop, inplace, result, not){ + if ( match[1] === "not" ) { + // If we're dealing with a complex expression, or a simple one + if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) { + match[3] = Sizzle(match[3], null, null, curLoop); + } else { + var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not); + if ( !inplace ) { + result.push.apply( result, ret ); + } + return false; + } + } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) { + return true; + } + + return match; + }, + POS: function(match){ + match.unshift( true ); + return match; + } + }, + filters: { + enabled: function(elem){ + return elem.disabled === false && elem.type !== "hidden"; + }, + disabled: function(elem){ + return elem.disabled === true; + }, + checked: function(elem){ + return elem.checked === true; + }, + selected: function(elem){ + // Accessing this property makes selected-by-default + // options in Safari work properly + elem.parentNode.selectedIndex; + return elem.selected === true; + }, + parent: function(elem){ + return !!elem.firstChild; + }, + empty: function(elem){ + return !elem.firstChild; + }, + has: function(elem, i, match){ + return !!Sizzle( match[3], elem ).length; + }, + header: function(elem){ + return (/h\d/i).test( elem.nodeName ); + }, + text: function(elem){ + return "text" === elem.type; + }, + radio: function(elem){ + return "radio" === elem.type; + }, + checkbox: function(elem){ + return "checkbox" === elem.type; + }, + file: function(elem){ + return "file" === elem.type; + }, + password: function(elem){ + return "password" === elem.type; + }, + submit: function(elem){ + return "submit" === elem.type; + }, + image: function(elem){ + return "image" === elem.type; + }, + reset: function(elem){ + return "reset" === elem.type; + }, + button: function(elem){ + return "button" === elem.type || elem.nodeName.toLowerCase() === "button"; + }, + input: function(elem){ + return (/input|select|textarea|button/i).test(elem.nodeName); + } + }, + setFilters: { + first: function(elem, i){ + return i === 0; + }, + last: function(elem, i, match, array){ + return i === array.length - 1; + }, + even: function(elem, i){ + return i % 2 === 0; + }, + odd: function(elem, i){ + return i % 2 === 1; + }, + lt: function(elem, i, match){ + return i < match[3] - 0; + }, + gt: function(elem, i, match){ + return i > match[3] - 0; + }, + nth: function(elem, i, match){ + return match[3] - 0 === i; + }, + eq: function(elem, i, match){ + return match[3] - 0 === i; + } + }, + filter: { + PSEUDO: function(elem, match, i, array){ + var name = match[1], filter = Expr.filters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + } else if ( name === "contains" ) { + return (elem.textContent || elem.innerText || Sizzle.getText([ elem ]) || "").indexOf(match[3]) >= 0; + } else if ( name === "not" ) { + var not = match[3]; + + for ( var j = 0, l = not.length; j < l; j++ ) { + if ( not[j] === elem ) { + return false; + } + } + + return true; + } else { + Sizzle.error( "Syntax error, unrecognized expression: " + name ); + } + }, + CHILD: function(elem, match){ + var type = match[1], node = elem; + switch (type) { + case 'only': + case 'first': + while ( (node = node.previousSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + if ( type === "first" ) { + return true; + } + node = elem; + case 'last': + while ( (node = node.nextSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + return true; + case 'nth': + var first = match[2], last = match[3]; + + if ( first === 1 && last === 0 ) { + return true; + } + + var doneName = match[0], + parent = elem.parentNode; + + if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) { + var count = 0; + for ( node = parent.firstChild; node; node = node.nextSibling ) { + if ( node.nodeType === 1 ) { + node.nodeIndex = ++count; + } + } + parent.sizcache = doneName; + } + + var diff = elem.nodeIndex - last; + if ( first === 0 ) { + return diff === 0; + } else { + return ( diff % first === 0 && diff / first >= 0 ); + } + } + }, + ID: function(elem, match){ + return elem.nodeType === 1 && elem.getAttribute("id") === match; + }, + TAG: function(elem, match){ + return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match; + }, + CLASS: function(elem, match){ + return (" " + (elem.className || elem.getAttribute("class")) + " ") + .indexOf( match ) > -1; + }, + ATTR: function(elem, match){ + var name = match[1], + result = Expr.attrHandle[ name ] ? + Expr.attrHandle[ name ]( elem ) : + elem[ name ] != null ? + elem[ name ] : + elem.getAttribute( name ), + value = result + "", + type = match[2], + check = match[4]; + + return result == null ? + type === "!=" : + type === "=" ? + value === check : + type === "*=" ? + value.indexOf(check) >= 0 : + type === "~=" ? + (" " + value + " ").indexOf(check) >= 0 : + !check ? + value && result !== false : + type === "!=" ? + value !== check : + type === "^=" ? + value.indexOf(check) === 0 : + type === "$=" ? + value.substr(value.length - check.length) === check : + type === "|=" ? + value === check || value.substr(0, check.length + 1) === check + "-" : + false; + }, + POS: function(elem, match, i, array){ + var name = match[2], filter = Expr.setFilters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + } + } + } +}; + +var origPOS = Expr.match.POS, + fescape = function(all, num){ + return "\\" + (num - 0 + 1); + }; + +for ( var type in Expr.match ) { + Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ); + Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) ); +} + +var makeArray = function(array, results) { + array = Array.prototype.slice.call( array, 0 ); + + if ( results ) { + results.push.apply( results, array ); + return results; + } + + return array; +}; + +// Perform a simple check to determine if the browser is capable of +// converting a NodeList to an array using builtin methods. +// Also verifies that the returned array holds DOM nodes +// (which is not the case in the Blackberry browser) +try { + Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; + +// Provide a fallback method if it does not work +} catch(e){ + makeArray = function(array, results) { + var ret = results || [], i = 0; + + if ( toString.call(array) === "[object Array]" ) { + Array.prototype.push.apply( ret, array ); + } else { + if ( typeof array.length === "number" ) { + for ( var l = array.length; i < l; i++ ) { + ret.push( array[i] ); + } + } else { + for ( ; array[i]; i++ ) { + ret.push( array[i] ); + } + } + } + + return ret; + }; +} + +var sortOrder; + +if ( document.documentElement.compareDocumentPosition ) { + sortOrder = function( a, b ) { + if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) { + if ( a == b ) { + hasDuplicate = true; + } + return a.compareDocumentPosition ? -1 : 1; + } + + var ret = a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1; + if ( ret === 0 ) { + hasDuplicate = true; + } + return ret; + }; +} else if ( "sourceIndex" in document.documentElement ) { + sortOrder = function( a, b ) { + if ( !a.sourceIndex || !b.sourceIndex ) { + if ( a == b ) { + hasDuplicate = true; + } + return a.sourceIndex ? -1 : 1; + } + + var ret = a.sourceIndex - b.sourceIndex; + if ( ret === 0 ) { + hasDuplicate = true; + } + return ret; + }; +} else if ( document.createRange ) { + sortOrder = function( a, b ) { + if ( !a.ownerDocument || !b.ownerDocument ) { + if ( a == b ) { + hasDuplicate = true; + } + return a.ownerDocument ? -1 : 1; + } + + var aRange = a.ownerDocument.createRange(), bRange = b.ownerDocument.createRange(); + aRange.setStart(a, 0); + aRange.setEnd(a, 0); + bRange.setStart(b, 0); + bRange.setEnd(b, 0); + var ret = aRange.compareBoundaryPoints(Range.START_TO_END, bRange); + if ( ret === 0 ) { + hasDuplicate = true; + } + return ret; + }; +} + +// Utility function for retreiving the text value of an array of DOM nodes +Sizzle.getText = function( elems ) { + var ret = "", elem; + + for ( var i = 0; elems[i]; i++ ) { + elem = elems[i]; + + // Get the text from text nodes and CDATA nodes + if ( elem.nodeType === 3 || elem.nodeType === 4 ) { + ret += elem.nodeValue; + + // Traverse everything else, except comment nodes + } else if ( elem.nodeType !== 8 ) { + ret += Sizzle.getText( elem.childNodes ); + } + } + + return ret; +}; + +// Check to see if the browser returns elements by name when +// querying by getElementById (and provide a workaround) +(function(){ + // We're going to inject a fake input element with a specified name + var form = document.createElement("div"), + id = "script" + (new Date()).getTime(); + form.innerHTML = "<a name='" + id + "'/>"; + + // Inject it into the root element, check its status, and remove it quickly + var root = document.documentElement; + root.insertBefore( form, root.firstChild ); + + // The workaround has to do additional checks after a getElementById + // Which slows things down for other browsers (hence the branching) + if ( document.getElementById( id ) ) { + Expr.find.ID = function(match, context, isXML){ + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + return m ? m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? [m] : undefined : []; + } + }; + + Expr.filter.ID = function(elem, match){ + var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id"); + return elem.nodeType === 1 && node && node.nodeValue === match; + }; + } + + root.removeChild( form ); + root = form = null; // release memory in IE +})(); + +(function(){ + // Check to see if the browser returns only elements + // when doing getElementsByTagName("*") + + // Create a fake element + var div = document.createElement("div"); + div.appendChild( document.createComment("") ); + + // Make sure no comments are found + if ( div.getElementsByTagName("*").length > 0 ) { + Expr.find.TAG = function(match, context){ + var results = context.getElementsByTagName(match[1]); + + // Filter out possible comments + if ( match[1] === "*" ) { + var tmp = []; + + for ( var i = 0; results[i]; i++ ) { + if ( results[i].nodeType === 1 ) { + tmp.push( results[i] ); + } + } + + results = tmp; + } + + return results; + }; + } + + // Check to see if an attribute returns normalized href attributes + div.innerHTML = "<a href='#'></a>"; + if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" && + div.firstChild.getAttribute("href") !== "#" ) { + Expr.attrHandle.href = function(elem){ + return elem.getAttribute("href", 2); + }; + } + + div = null; // release memory in IE +})(); + +if ( document.querySelectorAll ) { + (function(){ + var oldSizzle = Sizzle, div = document.createElement("div"); + div.innerHTML = "<p class='TEST'></p>"; + + // Safari can't handle uppercase or unicode characters when + // in quirks mode. + if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { + return; + } + + Sizzle = function(query, context, extra, seed){ + context = context || document; + + // Only use querySelectorAll on non-XML documents + // (ID selectors don't work in non-HTML documents) + if ( !seed && context.nodeType === 9 && !Sizzle.isXML(context) ) { + try { + return makeArray( context.querySelectorAll(query), extra ); + } catch(e){} + } + + return oldSizzle(query, context, extra, seed); + }; + + for ( var prop in oldSizzle ) { + Sizzle[ prop ] = oldSizzle[ prop ]; + } + + div = null; // release memory in IE + })(); +} + +(function(){ + var div = document.createElement("div"); + + div.innerHTML = "<div class='test e'></div><div class='test'></div>"; + + // Opera can't find a second classname (in 9.6) + // Also, make sure that getElementsByClassName actually exists + if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) { + return; + } + + // Safari caches class attributes, doesn't catch changes (in 3.2) + div.lastChild.className = "e"; + + if ( div.getElementsByClassName("e").length === 1 ) { + return; + } + + Expr.order.splice(1, 0, "CLASS"); + Expr.find.CLASS = function(match, context, isXML) { + if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { + return context.getElementsByClassName(match[1]); + } + }; + + div = null; // release memory in IE +})(); + +function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + if ( elem ) { + elem = elem[dir]; + var match = false; + + while ( elem ) { + if ( elem.sizcache === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 && !isXML ){ + elem.sizcache = doneName; + elem.sizset = i; + } + + if ( elem.nodeName.toLowerCase() === cur ) { + match = elem; + break; + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } +} + +function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + if ( elem ) { + elem = elem[dir]; + var match = false; + + while ( elem ) { + if ( elem.sizcache === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 ) { + if ( !isXML ) { + elem.sizcache = doneName; + elem.sizset = i; + } + if ( typeof cur !== "string" ) { + if ( elem === cur ) { + match = true; + break; + } + + } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) { + match = elem; + break; + } + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } +} + +Sizzle.contains = document.compareDocumentPosition ? function(a, b){ + return !!(a.compareDocumentPosition(b) & 16); +} : function(a, b){ + return a !== b && (a.contains ? a.contains(b) : true); +}; + +Sizzle.isXML = function(elem){ + // documentElement is verified for cases where it doesn't yet exist + // (such as loading iframes in IE - #4833) + var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement; + return documentElement ? documentElement.nodeName !== "HTML" : false; +}; + +var posProcess = function(selector, context){ + var tmpSet = [], later = "", match, + root = context.nodeType ? [context] : context; + + // Position selectors must be done after the filter + // And so must :not(positional) so we move all PSEUDOs to the end + while ( (match = Expr.match.PSEUDO.exec( selector )) ) { + later += match[0]; + selector = selector.replace( Expr.match.PSEUDO, "" ); + } + + selector = Expr.relative[selector] ? selector + "*" : selector; + + for ( var i = 0, l = root.length; i < l; i++ ) { + Sizzle( selector, root[i], tmpSet ); + } + + return Sizzle.filter( later, tmpSet ); +}; + +// EXPOSE + +window.Sizzle = Sizzle; + +})(); diff --git a/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif b/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif Binary files differdeleted file mode 100644 index 0d4f8b50..00000000 --- a/samples/src/main/java/gwtquery/samples/public/prototype_logo.gif +++ /dev/null diff --git a/samples/src/main/java/gwtquery/samples/public/prototypebench.html b/samples/src/main/java/gwtquery/samples/public/prototypebench.html deleted file mode 100644 index 13fcb9cb..00000000 --- a/samples/src/main/java/gwtquery/samples/public/prototypebench.html +++ /dev/null @@ -1,3172 +0,0 @@ -<html>
-<head>
- <title>JQuery</title>
- <script type="text/javascript" src="prototype-1.6.0.3.js"></script>
- <script type="text/javascript">
- window.parent.prototypebenchmark = function(sel) {
- return $$(sel).length;
- }
- </script>
-</head>
-<body>
-<div style="display: none">
-<div style="display: none" class="head">
- <p><a href="http://www.w3.org/"><img height=48 alt=W3C
- src="http://www.w3.org/Icons/w3c_home"
- width=72></a>
-
- <h1 id="title">Selectors</h1>
-
- <h2>W3C Working Draft 15 December 2005</h2>
-
- <dl>
-
- <dt>This version:
-
- <dd><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">
- http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>
-
- <dt>Latest version:
-
- <dd><a href="http://www.w3.org/TR/css3-selectors">
- http://www.w3.org/TR/css3-selectors</a>
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">
- http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
-
- <dt><a name=editors-list></a>Editors:
-
- <dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited
- Expert)
- </dd>
-
- <dd class="vcard"><a lang="tr" class="url fn"
- href="http://www.tantek.com/">Tantek Çelik</a>
- (Invited Expert)
-
- <dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian
- Hickson</a> (<span
- class="company"><a
- href="http://www.google.com/">Google</a></span>)
-
- <dd class="vcard"><span class="fn">Peter Linss</span> (former
- editor, <span class="company"><a
- href="http://www.netscape.com/">Netscape/AOL</a></span>)
-
- <dd class="vcard"><span class="fn">John Williams</span> (former editor, <span
- class="company"><a
- href="http://www.quark.com/">Quark, Inc.</a></span>)
-
- </dl>
-
- <p class="copyright"><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">
- Copyright</a> © 2005 <a href="http://www.w3.org/"><abbr
- title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
- (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
- Institute of Technology">MIT</abbr></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research
- Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
- W3C
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.
-
- <hr title="Separator for header">
-
-</div>
-
-<h2><a name=abstract></a>Abstract</h2>
-
-<p><em>Selectors</em> are patterns that match against elements in a
- tree. Selectors have been optimized for use with HTML and XML, and
- are designed to be usable in performance-critical code.</p>
-
-<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading
- Style Sheets) is a language for describing the rendering of <acronym
- title="Hypertext Markup Language">HTML</acronym> and <acronym
- title="Extensible Markup Language">XML</acronym> documents on
- screen, on paper, in speech, etc. CSS uses Selectors for binding
- style properties to elements in the document. This document
- describes extensions to the selectors defined in CSS level 2. These
- extended selectors will be used by CSS level 3.
-
-<p>Selectors define the following function:</p>
-
-<pre>expression ∗ element → boolean</pre>
-
-<p>That is, given an element and a selector, this specification
- defines whether that element matches the selector.</p>
-
-<p>These expressions can also be used, for instance, to select a set
- of elements, or a single element from a set of elements, by
- evaluating the expression across all the elements in a
- subtree. <acronym title="Simple Tree Transformation
- Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a
- language for transforming XML trees, uses this mechanism. <a
- href="#refsSTTS">[STTS]</a></p>
-
-<h2><a name=status></a>Status of this document</h2>
-
-<p><em>This section describes the status of this document at the
- time of its publication. Other documents may supersede this
- document. A list of current W3C publications and the latest revision
- of this technical report can be found in the <a
- href="http://www.w3.org/TR/">W3C technical reports index at
- http://www.w3.org/TR/.</a></em></p>
-
-<p>This document describes the selectors that already exist in <a
- href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a
- href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and
- also proposes new selectors for <abbr title="CSS level
- 3">CSS3</abbr> and other languages that may need them.</p>
-
-<p>The CSS Working Group doesn't expect that all implementations of
- CSS3 will have to implement all selectors. Instead, there will
- probably be a small number of variants of CSS3, called profiles. For
- example, it may be that only a profile for interactive user agents
- will include all of the selectors.</p>
-
-<p>This specification is a last call working draft for the the <a
- href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
- (<a href="/Style/">Style Activity</a>). This
- document is a revision of the <a
- href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate
- Recommendation dated 2001 November 13</a>, and has incorporated
- implementation feedback received in the past few years. It is
- expected that this last call will proceed straight to Proposed
- Recommendation stage since it is believed that interoperability will
- be demonstrable.</p>
-
-<p>All persons are encouraged to review and implement this
- specification and return comments to the (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
- public mailing list <a
- href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>
- (see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C
- Members can also send comments directly to the CSS Working
- Group.
- The deadline for comments is 14 January 2006.</p>
-
-<p>This is still a draft document and may be updated, replaced, or
- obsoleted by other documents at any time. It is inappropriate to
- cite a W3C Working Draft as other than "work in progress".
-
-<p>This document may be available in <a
- href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.
- The English version of this specification is the only normative
- version.
-
-<div class="subtoc">
-
- <h2><a name=contents>Table of contents</a></h2>
-
- <ul class="toc">
- <li class="tocline2"><a href="#context">1. Introduction</a>
- <ul>
- <li><a href="#dependencies">1.1. Dependencies</a></li>
- <li><a href="#terminology">1.2. Terminology</a></li>
- <li><a href="#changesFromCSS2">1.3. Changes from CSS2</a></li>
- </ul>
- <li class="tocline2"><a href="#selectors">2. Selectors</a>
- <li class="tocline2"><a href="#casesens">3. Case sensitivity</a>
- <li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>
- <li class="tocline2"><a href="#grouping">5. Groups of selectors</a>
- <li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#type-selectors">6.1. Type
- selectors</a>
- <ul class="toc">
- <li class="tocline4"><a href="#typenmsp">6.1.1. Type
- selectors and namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#universal-selector">6.2.
- Universal selector</a>
- <ul>
- <li><a href="#univnmsp">6.2.1. Universal selector and
- namespaces</a></li>
- </ul>
- <li class="tocline3"><a href="#attribute-selectors">6.3.
- Attribute selectors</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#attribute-representation">6.3.1.
- Representation of attributes and attributes
- values</a>
- <li><a href="#attribute-substrings">6.3.2. Substring
- matching attribute selectors</a>
- <li class="tocline4"><a href="#attrnmsp">6.3.3.
- Attribute selectors and namespaces</a>
- <li class="tocline4"><a href="#def-values">6.3.4.
- Default attribute values in DTDs</a></li>
- </ul>
- <li class="tocline3"><a href="#class-html">6.4. Class
- selectors</a>
- <li class="tocline3"><a href="#id-selectors">6.5. ID
- selectors</a>
- <li class="tocline3"><a href="#pseudo-classes">6.6.
- Pseudo-classes</a>
- <ul class="toc">
- <li class="tocline4"><a href="#dynamic-pseudos">6.6.1.
- Dynamic pseudo-classes</a>
- <li class="tocline4"><a href="#target-pseudo">6.6.2. The
- :target pseudo-class</a>
- <li class="tocline4"><a href="#lang-pseudo">6.6.3. The
- :lang() pseudo-class</a>
- <li class="tocline4"><a href="#UIstates">6.6.4. UI
- element states pseudo-classes</a>
- <li class="tocline4"><a href="#structural-pseudos">6.6.5.
- Structural pseudo-classes</a>
- <ul>
- <li><a href="#root-pseudo">:root
- pseudo-class</a>
- <li><a href="#nth-child-pseudo">:nth-child()
- pseudo-class</a>
- <li><a href="#nth-last-child-pseudo">:nth-last-child()</a>
- <li><a href="#nth-of-type-pseudo">:nth-of-type()
- pseudo-class</a>
- <li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a>
- <li><a href="#first-child-pseudo">:first-child
- pseudo-class</a>
- <li><a href="#last-child-pseudo">:last-child
- pseudo-class</a>
- <li><a href="#first-of-type-pseudo">:first-of-type
- pseudo-class</a>
- <li><a href="#last-of-type-pseudo">:last-of-type
- pseudo-class</a>
- <li><a href="#only-child-pseudo">:only-child
- pseudo-class</a>
- <li><a href="#only-of-type-pseudo">:only-of-type
- pseudo-class</a>
- <li><a href="#empty-pseudo">:empty
- pseudo-class</a></li>
- </ul>
- <li class="tocline4"><a href="#negation">6.6.7. The
- negation pseudo-class</a></li>
- </ul>
- </li>
- </ul>
- <li><a href="#pseudo-elements">7. Pseudo-elements</a>
- <ul>
- <li><a href="#first-line">7.1. The ::first-line
- pseudo-element</a>
- <li><a href="#first-letter">7.2. The ::first-letter
- pseudo-element</a>
- <li><a href="#UIfragments">7.3. The ::selection
- pseudo-element</a>
- <li><a href="#gen-content">7.4. The ::before and ::after
- pseudo-elements</a></li>
- </ul>
- <li class="tocline2"><a href="#combinators">8. Combinators</a>
- <ul class="toc">
- <li class="tocline3"><a href="#descendant-combinators">8.1.
- Descendant combinators</a>
- <li class="tocline3"><a href="#child-combinators">8.2. Child
- combinators</a>
- <li class="tocline3"><a href="#sibling-combinators">8.3. Sibling
- combinators</a>
- <ul class="toc">
- <li class="tocline4"><a
- href="#adjacent-sibling-combinators">8.3.1.
- Adjacent sibling combinator</a>
- <li class="tocline4"><a
- href="#general-sibling-combinators">8.3.2.
- General sibling combinator</a></li>
- </ul>
- </li>
- </ul>
- <li class="tocline2"><a href="#specificity">9. Calculating a selector's
- specificity</a>
- <li class="tocline2"><a href="#w3cselgrammar">10. The grammar of
- Selectors</a>
- <ul class="toc">
- <li class="tocline3"><a href="#grammar">10.1. Grammar</a>
- <li class="tocline3"><a href="#lex">10.2. Lexical scanner</a>
- </li>
- </ul>
- <li class="tocline2"><a href="#downlevel">11. Namespaces and down-level
- clients</a>
- <li class="tocline2"><a href="#profiling">12. Profiles</a>
- <li><a href="#Conformance">13. Conformance and requirements</a>
- <li><a href="#Tests">14. Tests</a>
- <li><a href="#ACKS">15. Acknowledgements</a>
- <li class="tocline2"><a href="#references">16. References</a>
- </ul>
-
-</div>
-
-<h2><a name=context>1. Introduction</a></h2>
-
-<h3><a name=dependencies></a>1.1. Dependencies</h3>
-
-<p>Some features of this specification are specific to CSS, or have
- particular limitations or rules specific to CSS. In this
- specification, these have been described in terms of CSS2.1. <a
- href="#refsCSS21">[CSS21]</a></p>
-
-<h3><a name=terminology></a>1.2. Terminology</h3>
-
-<p>All of the text of this specification is normative except
- examples, notes, and sections explicitly marked as
- non-normative.</p>
-
-<h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>
-
-<p><em>This section is non-normative.</em></p>
-
-<p>The main differences between the selectors in CSS2 and those in
- Selectors are:
-
-<ul>
-
- <li>the list of basic definitions (selector, group of selectors,
- simple selector, etc.) has been changed; in particular, what was
- referred to in CSS2 as a simple selector is now called a sequence
- of simple selectors, and the term "simple selector" is now used for
- the components of this sequence
- </li>
-
- <li>an optional namespace component is now allowed in type element
- selectors, the universal selector and attribute selectors
- </li>
-
- <li>a <a href="#general-sibling-combinators">new combinator</a> has been
- introduced
- </li>
-
- <li>new simple selectors including substring matching attribute
- selectors, and new pseudo-classes
- </li>
-
- <li>new pseudo-elements, and introduction of the "::" convention
- for pseudo-elements
- </li>
-
- <li>the grammar has been rewritten</li>
-
- <li>profiles to be added to specifications integrating Selectors
- and defining the set of selectors which is actually supported by
- each specification
- </li>
-
- <li>Selectors are now a CSS3 Module and an independent
- specification; other specifications can now refer to this document
- independently of CSS
- </li>
-
- <li>the specification now has its own test suite</li>
-
-</ul>
-
-<h2><a name=selectors></a>2. Selectors</h2>
-
-<p><em>This section is non-normative, as it merely summarizes the
- following sections.</em></p>
-
-<p>A Selector represents a structure. This structure can be used as a
- condition (e.g. in a CSS rule) that determines which elements a
- selector matches in the document tree, or as a flat description of the
- HTML or XML fragment corresponding to that structure.</p>
-
-<p>Selectors may range from simple element names to rich contextual
- representations.</p>
-
-<p>The following table summarizes the Selector syntax:</p>
-
-<table class="selectorsReview">
-<thead>
-<tr>
- <th class="pattern">Pattern</th>
- <th class="meaning">Meaning</th>
- <th class="described">Described in section</th>
- <th class="origin">First defined in CSS level</th>
-</tr>
-<tbody>
-<tr>
- <td class="pattern">*</td>
- <td class="meaning">any element</td>
- <td class="described"><a
- href="#universal-selector">Universal
- selector</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E</td>
- <td class="meaning">an element of type E</td>
- <td class="described"><a
- href="#type-selectors">Type selector</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E[foo]</td>
- <td class="meaning">an E element with a "foo" attribute</td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is exactly
- equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo~="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value is a list of
- space-separated values, one of which is exactly equal to "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E[foo^="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value begins exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo$="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value ends exactly
- with the string "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[foo*="bar"]</td>
- <td class="meaning">an E element whose "foo" attribute value contains the
- substring "bar"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E[hreflang|="en"]</td>
- <td class="meaning">an E element whose "hreflang" attribute has a
- hyphen-separated
- list of values beginning (from the left) with "en"
- </td>
- <td class="described"><a
- href="#attribute-selectors">Attribute
- selectors</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:root</td>
- <td class="meaning">an E element, root of the document</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-child(n)</td>
- <td class="meaning">an E element, the n-th child of its parent, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:nth-last-of-type(n)</td>
- <td class="meaning">an E element, the n-th sibling of its type, counting
- from the last one
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-child</td>
- <td class="meaning">an E element, first child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:last-child</td>
- <td class="meaning">an E element, last child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:first-of-type</td>
- <td class="meaning">an E element, first sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:last-of-type</td>
- <td class="meaning">an E element, last sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-child</td>
- <td class="meaning">an E element, only child of its parent</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:only-of-type</td>
- <td class="meaning">an E element, only sibling of its type</td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:empty</td>
- <td class="meaning">an E element that has no children (including text
- nodes)
- </td>
- <td class="described"><a
- href="#structural-pseudos">Structural
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:link<br>E:visited</td>
- <td class="meaning">an E element being the source anchor of a hyperlink of
- which the target is not yet visited (:link) or already visited
- (:visited)
- </td>
- <td class="described"><a
- href="#link">The link
- pseudo-classes</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:active<br>E:hover<br>E:focus</td>
- <td class="meaning">an E element during certain user actions</td>
- <td class="described"><a
- href="#useraction-pseudos">The user
- action pseudo-classes</a></td>
- <td class="origin">1 and 2</td>
-</tr>
-<tr>
- <td class="pattern">E:target</td>
- <td class="meaning">an E element being the target of the referring URI</td>
- <td class="described"><a
- href="#target-pseudo">The target
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:lang(fr)</td>
- <td class="meaning">an element of type E in language "fr" (the document
- language specifies how language is determined)
- </td>
- <td class="described"><a
- href="#lang-pseudo">The :lang()
- pseudo-class</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E:enabled<br>E:disabled</td>
- <td class="meaning">a user interface element E which is enabled or
- disabled
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E:checked<!--<br>E:indeterminate--></td>
- <td class="meaning">a user interface element E which is checked<!-- or in an
- indeterminate state--> (for instance a radio-button or checkbox)
- </td>
- <td class="described"><a
- href="#UIstates">The UI element states
- pseudo-classes</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::first-line</td>
- <td class="meaning">the first formatted line of an E element</td>
- <td class="described"><a
- href="#first-line">The ::first-line
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::first-letter</td>
- <td class="meaning">the first formatted letter of an E element</td>
- <td class="described"><a
- href="#first-letter">The ::first-letter
- pseudo-element</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E::selection</td>
- <td class="meaning">the portion of an E element that is currently
- selected/highlighted by the user
- </td>
- <td class="described"><a
- href="#UIfragments">The UI element
- fragments pseudo-elements</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E::before</td>
- <td class="meaning">generated content before an E element</td>
- <td class="described"><a
- href="#gen-content">The ::before
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E::after</td>
- <td class="meaning">generated content after an E element</td>
- <td class="described"><a
- href="#gen-content">The ::after
- pseudo-element</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E.warning</td>
- <td class="meaning">an E element whose class is
- "warning" (the document language specifies how class is determined).
- </td>
- <td class="described"><a
- href="#class-html">Class
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E#myid</td>
- <td class="meaning">an E element with ID equal to "myid".</td>
- <td class="described"><a
- href="#id-selectors">ID
- selectors</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E:not(s)</td>
- <td class="meaning">an E element that does not match simple selector s</td>
- <td class="described"><a
- href="#negation">Negation
- pseudo-class</a></td>
- <td class="origin">3</td>
-</tr>
-<tr>
- <td class="pattern">E F</td>
- <td class="meaning">an F element descendant of an E element</td>
- <td class="described"><a
- href="#descendant-combinators">Descendant
- combinator</a></td>
- <td class="origin">1</td>
-</tr>
-<tr>
- <td class="pattern">E > F</td>
- <td class="meaning">an F element child of an E element</td>
- <td class="described"><a
- href="#child-combinators">Child
- combinator</a></td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E + F</td>
- <td class="meaning">an F element immediately preceded by an E element</td>
- <td class="described"><a
- href="#adjacent-sibling-combinators">Adjacent sibling combinator</a>
- </td>
- <td class="origin">2</td>
-</tr>
-<tr>
- <td class="pattern">E ~ F</td>
- <td class="meaning">an F element preceded by an E element</td>
- <td class="described"><a
- href="#general-sibling-combinators">General sibling combinator</a>
- </td>
- <td class="origin">3</td>
-</tr>
-</tbody>
-</table>
-
-<p>The meaning of each selector is derived from the table above by
- prepending "matches" to the contents of each cell in the "Meaning"
- column.</p>
-
-<h2><a name=casesens>3. Case sensitivity</a></h2>
-
-<p>The case sensitivity of document language element names, attribute
- names, and attribute values in selectors depends on the document
- language. For example, in HTML, element names are case-insensitive,
- but in XML, they are case-sensitive.</p>
-
-<h2><a name=selector-syntax>4. Selector syntax</a></h2>
-
-<p>A <dfn><a name=selector>selector</a></dfn> is a chain of one
- or more <a href="#sequence">sequences of simple selectors</a>
- separated by <a href="#combinators">combinators</a>.</p>
-
-<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>
- is a chain of <a href="#simple-selectors-dfn">simple selectors</a>
- that are not separated by a <a href="#combinators">combinator</a>. It
- always begins with a <a href="#type-selectors">type selector</a> or a
- <a href="#universal-selector">universal selector</a>. No other type
- selector or universal selector is allowed in the sequence.</p>
-
-<p>A <dfn><a name=simple-selectors-dfn></a><a
- href="#simple-selectors">simple selector</a></dfn> is either a <a
- href="#type-selectors">type selector</a>, <a
- href="#universal-selector">universal selector</a>, <a
- href="#attribute-selectors">attribute selector</a>, <a
- href="#class-html">class selector</a>, <a
- href="#id-selectors">ID selector</a>, <a
- href="#content-selectors">content selector</a>, or <a
- href="#pseudo-classes">pseudo-class</a>. One <a
- href="#pseudo-elements">pseudo-element</a> may be appended to the last
- sequence of simple selectors.</p>
-
-<p><dfn>Combinators</dfn> are: white space, "greater-than
- sign" (U+003E, <code>></code>), "plus sign" (U+002B,
- <code>+</code>) and "tilde" (U+007E, <code>~</code>). White
- space may appear between a combinator and the simple selectors around
- it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"
- (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form
- feed" (U+000C) can occur in white space. Other space-like characters,
- such as "em-space" (U+2003) and "ideographic space" (U+3000), are
- never part of white space.</p>
-
-<p>The elements of a document tree that are represented by a selector
- are the <dfn><a name=subject></a>subjects of the selector</dfn>. A
- selector consisting of a single sequence of simple selectors
- represents any element satisfying its requirements. Prepending another
- sequence of simple selectors and a combinator to a sequence imposes
- additional matching constraints, so the subjects of a selector are
- always a subset of the elements represented by the last sequence of
- simple selectors.</p>
-
-<p>An empty selector, containing no sequence of simple selectors and
- no pseudo-element, is an <a href="#Conformance">invalid
- selector</a>.</p>
-
-<h2><a name=grouping>5. Groups of selectors</a></h2>
-
-<p>When several selectors share the same declarations, they may be
- grouped into a comma-separated list. (A comma is U+002C.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>In this example, we condense three rules with identical
- declarations into one. Thus,</p>
-<pre>h1 { font-family: sans-serif }
-h2 { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
- <p>is equivalent to:</p>
- <pre>h1, h2, h3 { font-family: sans-serif }</pre>
-</div>
-
-<p><strong>Warning</strong>: the equivalence is true in this example
- because all the selectors are valid selectors. If just one of these
- selectors were invalid, the entire group of selectors would be
- invalid. This would invalidate the rule for all three heading
- elements, whereas in the former case only one of the three individual
- heading rules would be invalidated.</p>
-
-
-<h2><a name=simple-selectors>6. Simple selectors</a></h2>
-
-<h3><a name=type-selectors>6.1. Type selector</a></h3>
-
-<p>A <dfn>type selector</dfn> is the name of a document language
- element type. A type selector represents an instance of the element
- type in the document tree.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents an <code>h1</code> element in the
- document tree:</p>
- <pre>h1</pre>
-</div>
-
-
-<h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>
-
-<p>Type selectors allow an optional namespace (<a
- href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix
- that has been previously declared may be prepended to the element name
- separated by the namespace separator "vertical bar"
- (U+007C, <code>|</code>).</p>
-
-<p>The namespace component may be left empty to indicate that the
- selector is only to represent elements with no declared namespace.</p>
-
-<p>An asterisk may be used for the namespace prefix, indicating that
- the selector represents elements in any namespace (including elements
- with no namespace).</p>
-
-<p>Element type selectors that have no namespace component (no
- namespace separator), represent elements without regard to the
- element's namespace (equivalent to "<code>*|</code>") unless a default
- namespace has been declared. If a default namespace has been declared,
- the selector will represent only elements in the default
- namespace.</p>
-
-<p>A type selector containing a namespace prefix that has not been
- previously declared is an <a href="#Conformance">invalid</a> selector.
- The mechanism for declaring a namespace prefix is left up to the
- language implementing Selectors. In CSS, such a mechanism is defined
- in the General Syntax module.</p>
-
-<p>In a namespace-aware client, element type selectors will only match
- against the <a
- href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local
- part</a>
- of the element's <a
- href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
- name</a>. See <a href="#downlevel">below</a> for notes about matching
- behaviors in down-level clients.</p>
-
-<p>In summary:</p>
-
-<dl>
- <dt><code>ns|E</code></dt>
- <dd>elements with name E in namespace ns</dd>
- <dt><code>*|E</code></dt>
- <dd>elements with name E in any namespace, including those without any
- declared namespace
- </dd>
- <dt><code>|E</code></dt>
- <dd>elements with name E without any declared namespace</dd>
- <dt><code>E</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|E.
- Otherwise it is equivalent to ns|E where ns is the default namespace.
- </dd>
-</dl>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <pre>@namespace foo url(http://www.example.com);
- foo|h1 { color: blue }
- foo|* { color: yellow }
- |h1 { color: red }
- *|h1 { color: green }
- h1 { color: green }</pre>
-
- <p>The first rule will match only <code>h1</code> elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The second rule will match all elements in the
- "http://www.example.com" namespace.</p>
-
- <p>The third rule will match only <code>h1</code> elements without
- any declared namespace.</p>
-
- <p>The fourth rule will match <code>h1</code> elements in any
- namespace (including those without any declared namespace).</p>
-
- <p>The last rule is equivalent to the fourth rule because no default
- namespace has been defined.</p>
-
-</div>
-
-<h3><a name=universal-selector>6.2. Universal selector</a></h3>
-
-<p>The <dfn>universal selector</dfn>, written "asterisk"
- (<code>*</code>), represents the qualified name of any element
- type. It represents any single element in the document tree in any
- namespace (including those without any declared namespace) if no
- default namespace has been specified. If a default namespace has been
- specified, see <a href="#univnmsp">Universal selector and
- Namespaces</a> below.</p>
-
-<p>If the universal selector is not the only component of a sequence
- of simple selectors, the <code>*</code> may be omitted.</p>
-
-<div class="example">
- <p>Examples:</p>
- <ul>
- <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
- equivalent,
- </li>
- <li><code>*.warning</code> and <code>.warning</code> are equivalent,
- </li>
- <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>
- </ul>
-</div>
-
-<p class="note"><strong>Note:</strong> it is recommended that the
- <code>*</code>, representing the universal selector, not be
- omitted.</p>
-
-<h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>
-
-<p>The universal selector allows an optional namespace component. It
- is used as follows:</p>
-
-<dl>
- <dt><code>ns|*</code></dt>
- <dd>all elements in namespace ns</dd>
- <dt><code>*|*</code></dt>
- <dd>all elements</dd>
- <dt><code>|*</code></dt>
- <dd>all elements without any declared namespace</dd>
- <dt><code>*</code></dt>
- <dd>if no default namespace has been specified, this is equivalent to *|*.
- Otherwise it is equivalent to ns|* where ns is the default namespace.
- </dd>
-</dl>
-
-<p>A universal selector containing a namespace prefix that has not
- been previously declared is an <a href="#Conformance">invalid</a>
- selector. The mechanism for declaring a namespace prefix is left up
- to the language implementing Selectors. In CSS, such a mechanism is
- defined in the General Syntax module.</p>
-
-
-<h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>
-
-<p>Selectors allow the representation of an element's attributes. When
- a selector is used as an expression to match against an element,
- attribute selectors must be considered to match an element if that
- element has an attribute that matches the attribute represented by the
- attribute selector.</p>
-
-<h4><a name=attribute-representation>6.3.1. Attribute presence and values
- selectors</a></h4>
-
-<p>CSS2 introduced four attribute selectors:</p>
-
-<dl>
- <dt><code>[att]</code>
- <dd>Represents an element with the <code>att</code> attribute, whatever the
- value of
- the attribute.
- </dd>
- <dt><code>[att=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- exactly
- "val".
- </dd>
- <dt><code>[att~=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value is
- a <a
- href="#whitespace">whitespace</a>-separated list of words, one
- of
- which is exactly "val". If "val" contains whitespace, it will never
- represent anything (since the words are <em>separated</em> by
- spaces).
- </dd>
- <dt><code>[att|=val]</code>
- <dd>Represents an element with the <code>att</code> attribute, its value
- either
- being exactly "val" or beginning with "val" immediately followed by
- "-" (U+002D). This is primarily intended to allow language subcode
- matches (e.g., the <code>hreflang</code> attribute on the
- <code>link</code> element in HTML) as described in RFC 3066 (<a
- href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or
- <code>xml:lang</code>) language subcode matching, please see <a
- href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names and values in selectors depends on
- the document language.</p>
-
-<div class="example">
-
- <p>Examples:</p>
-
- <p>The following attribute selector represents an <code>h1</code>
- element that carries the <code>title</code> attribute, whatever its
- value:</p>
-
- <pre>h1[title]</pre>
-
- <p>In the following example, the selector represents a
- <code>span</code> element whose <code>class</code> attribute has
- exactly the value "example":</p>
-
- <pre>span[class="example"]</pre>
-
- <p>Multiple attribute selectors can be used to represent several
- attributes of an element, or several conditions on the same
- attribute. Here, the selector represents a <code>span</code> element
- whose <code>hello</code> attribute has exactly the value "Cleveland"
- and whose <code>goodbye</code> attribute has exactly the value
- "Columbus":</p>
-
- <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
-
- <p>The following selectors illustrate the differences between "="
- and "~=". The first selector will represent, for example, the value
- "copyright copyleft copyeditor" on a <code>rel</code> attribute. The
- second selector will only represent an <code>a</code> element with
- an <code>href</code> attribute having the exact value
- "http://www.w3.org/".</p>
-
- <pre>a[rel~="copyright"]
-a[href="http://www.w3.org/"]</pre>
-
- <p>The following selector represents a <code>link</code> element
- whose <code>hreflang</code> attribute is exactly "fr".</p>
-
- <pre>link[hreflang=fr]</pre>
-
- <p>The following selector represents a <code>link</code> element for
- which the values of the <code>hreflang</code> attribute begins with
- "en", including "en", "en-US", and "en-cockney":</p>
-
- <pre>link[hreflang|="en"]</pre>
-
- <p>Similarly, the following selectors represents a
- <code>DIALOGUE</code> element whenever it has one of two different
- values for an attribute <code>character</code>:</p>
-
- <pre>DIALOGUE[character=romeo]
-DIALOGUE[character=juliet]</pre>
-
-</div>
-
-<h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute
- selectors</h4>
-
-<p>Three additional attribute selectors are provided for matching
- substrings in the value of an attribute:</p>
-
-<dl>
- <dt><code>[att^=val]</code></dt>
- <dd>Represents an element with the <code>att</code> attribute whose value
- begins
- with the prefix "val".
- </dd>
- <dt><code>[att$=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- ends with
- the suffix "val".
- </dd>
- <dt><code>[att*=val]</code>
- <dd>Represents an element with the <code>att</code> attribute whose value
- contains
- at least one instance of the substring "val".
- </dd>
-</dl>
-
-<p>Attribute values must be identifiers or strings. The
- case-sensitivity of attribute names in selectors depends on the
- document language.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents an HTML <code>object</code>,
- referencing an
- image:</p>
- <pre>object[type^="image/"]</pre>
- <p>The following selector represents an HTML anchor <code>a</code> with an
- <code>href</code> attribute whose value ends with ".html".</p>
- <pre>a[href$=".html"]</pre>
- <p>The following selector represents an HTML paragraph with a
- <code>title</code>
- attribute whose value contains the substring "hello"</p>
- <pre>p[title*="hello"]</pre>
-</div>
-
-<h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>
-
-<p>Attribute selectors allow an optional namespace component to the
- attribute name. A namespace prefix that has been previously declared
- may be prepended to the attribute name separated by the namespace
- separator "vertical bar" (<code>|</code>). In keeping with
- the Namespaces in the XML recommendation, default namespaces do not
- apply to attributes, therefore attribute selectors without a namespace
- component apply only to attributes that have no declared namespace
- (equivalent to "<code>|attr</code>"). An asterisk may be used for the
- namespace prefix indicating that the selector is to match all
- attribute names without regard to the attribute's namespace.
-
-<p>An attribute selector with an attribute name containing a namespace
- prefix that has not been previously declared is an <a
- href="#Conformance">invalid</a> selector. The mechanism for
- declaring
- a namespace prefix is left up to the language implementing Selectors.
- In CSS, such a mechanism is defined in the General Syntax module.
-
-<div class="example">
- <p>CSS examples:</p>
- <pre>@namespace foo "http://www.example.com";
-[foo|att=val] { color: blue }
-[*|att] { color: yellow }
-[|att] { color: green }
-[att] { color: green }</pre>
-
- <p>The first rule will match only elements with the attribute
- <code>att</code> in the "http://www.example.com" namespace with the
- value "val".</p>
-
- <p>The second rule will match only elements with the attribute
- <code>att</code> regardless of the namespace of the attribute
- (including no declared namespace).</p>
-
- <p>The last two rules are equivalent and will match only elements
- with the attribute <code>att</code> where the attribute is not
- declared to be in a namespace.</p>
-
-</div>
-
-<h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>
-
-<p>Attribute selectors represent explicitly set attribute values in
- the document tree. Default attribute values may be defined in a DTD or
- elsewhere, but cannot always be selected by attribute
- selectors. Selectors should be designed so that they work even if the
- default values are not included in the document tree.</p>
-
-<p>More precisely, a UA is <em>not</em> required to read an "external
- subset" of the DTD but <em>is</em> required to look for default
- attribute values in the document's "internal subset." (See <a
- href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>
-
-<p>A UA that recognizes an XML namespace <a
- href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its
- knowledge of that namespace to treat default attribute values as if
- they were present in the document. (For example, an XHTML UA is not
- required to use its built-in knowledge of the XHTML DTD.)</p>
-
-<p class="note"><strong>Note:</strong> Typically, implementations
- choose to ignore external subsets.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>Consider an element EXAMPLE with an attribute "notation" that has a
- default value of "decimal". The DTD fragment might be</p>
-
- <pre class="dtd-example"><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
-
- <p>If the style sheet contains the rules</p>
-
-<pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>the first rule will not match elements whose "notation" attribute
- is set by default, i.e. not set explicitly. To catch all cases, the
- attribute selector for the default value must be dropped:</p>
-
-<pre>EXAMPLE { /*... default property settings ...*/ }
-EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>
-
- <p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is
- more specific than the tag
- selector alone, the style declarations in the second rule will override
- those in the first for elements that have a "notation" attribute value
- of "octal". Care has to be taken that all property declarations that
- are to apply only to the default case are overridden in the non-default
- cases' style rules.</p>
-
-</div>
-
-<h3><a name=class-html>6.4. Class selectors</a></h3>
-
-<p>Working with HTML, authors may use the period (U+002E,
- <code>.</code>) notation as an alternative to the <code>~=</code>
- notation when representing the <code>class</code> attribute. Thus, for
- HTML, <code>div.value</code> and <code>div[class~=value]</code> have
- the same meaning. The attribute value must immediately follow the
- "period" (<code>.</code>).</p>
-
-<p>UAs may apply selectors using the period (.) notation in XML
- documents if the UA has namespace-specific knowledge that allows it to
- determine which attribute is the "class" attribute for the
- respective namespace. One such example of namespace-specific knowledge
- is the prose in the specification for a particular namespace (e.g. SVG
- 1.0 <a href="#refsSVG">[SVG]</a> describes the <a
- href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG
- "class" attribute</a> and how a UA should interpret it, and
- similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a
- href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML
- "class" attribute</a>.)</p>
-
-<div class="example">
- <p>CSS examples:</p>
-
- <p>We can assign style information to all elements with
- <code>class~="pastoral"</code> as follows:</p>
-
- <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>or just</p>
-
- <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>
-
- <p>The following assigns style only to H1 elements with
- <code>class~="pastoral"</code>:</p>
-
- <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>
-
- <p>Given these rules, the first H1 instance below would not have
- green text, while the second would:</p>
-
- <pre><H1>Not green</H1>
-<H1 class="pastoral">Very green</H1></pre>
-
-</div>
-
-<p>To represent a subset of "class" values, each value must be preceded
- by a ".", in any order.</P>
-
-<div class="example">
-
- <p>CSS example:</p>
-
- <p>The following rule matches any P element whose "class" attribute
- has been assigned a list of <a
- href="#whitespace">whitespace</a>-separated values that includes
- "pastoral" and "marine":</p>
-
- <pre>p.pastoral.marine { color: green }</pre>
-
- <p>This rule matches when <code>class="pastoral blue aqua
- marine"</code> but does not match for <code>class="pastoral
- blue"</code>.</p>
-
-</div>
-
-<p class="note"><strong>Note:</strong> Because CSS gives considerable
- power to the "class" attribute, authors could conceivably design their
- own "document language" based on elements with almost no associated
- presentation (such as DIV and SPAN in HTML) and assigning style
- information through the "class" attribute. Authors should avoid this
- practice since the structural elements of a document language often
- have recognized and accepted meanings and author-defined classes may
- not.</p>
-
-<p class="note"><strong>Note:</strong> If an element has multiple
- class attributes, their values must be concatenated with spaces
- between the values before searching for the class. As of this time the
- working group is not aware of any manner in which this situation can
- be reached, however, so this behavior is explicitly non-normative in
- this specification.</p>
-
-<h3><a name=id-selectors>6.5. ID selectors</a></h3>
-
-<p>Document languages may contain attributes that are declared to be
- of type ID. What makes attributes of type ID special is that no two
- such attributes can have the same value in a document, regardless of
- the type of the elements that carry them; whatever the document
- language, an ID typed attribute can be used to uniquely identify its
- element. In HTML all ID attributes are named "id"; XML applications
- may name ID attributes differently, but the same restriction
- applies.</p>
-
-<p>An ID-typed attribute of a document language allows authors to
- assign an identifier to one element instance in the document tree. W3C
- ID selectors represent an element instance based on its identifier. An
- ID selector contains a "number sign" (U+0023,
- <code>#</code>) immediately followed by the ID value, which must be an
- identifier.</p>
-
-<p>Selectors does not specify how a UA knows the ID-typed attribute of
- an element. The UA may, e.g., read a document's DTD, have the
- information hard-coded or ask the user.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following ID selector represents an <code>h1</code> element
- whose ID-typed attribute has the value "chapter1":</p>
- <pre>h1#chapter1</pre>
- <p>The following ID selector represents any element whose ID-typed
- attribute has the value "chapter1":</p>
- <pre>#chapter1</pre>
- <p>The following selector represents any element whose ID-typed
- attribute has the value "z98y".</p>
- <pre>*#z98y</pre>
-</div>
-
-<p class="note"><strong>Note.</strong> In XML 1.0 <a
- href="#refsXML10">[XML10]</a>, the information about which attribute
- contains an element's IDs is contained in a DTD or a schema. When
- parsing XML, UAs do not always read the DTD, and thus may not know
- what the ID of an element is (though a UA may have namespace-specific
- knowledge that allows it to determine which attribute is the ID
- attribute for that namespace). If a style sheet designer knows or
- suspects that a UA may not know what the ID of an element is, he
- should use normal attribute selectors instead:
- <code>[name=p371]</code> instead of <code>#p371</code>. Elements in
- XML 1.0 documents without a DTD do not have IDs at all.</p>
-
-<p>If an element has multiple ID attributes, all of them must be
- treated as IDs for that element for the purposes of the ID
- selector. Such a situation could be reached using mixtures of xml:id,
- DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
-
-<h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>
-
-<p>The pseudo-class concept is introduced to permit selection based on
- information that lies outside of the document tree or that cannot be
- expressed using the other simple selectors.</p>
-
-<p>A pseudo-class always consists of a "colon"
- (<code>:</code>) followed by the name of the pseudo-class and
- optionally by a value between parentheses.</p>
-
-<p>Pseudo-classes are allowed in all sequences of simple selectors
- contained in a selector. Pseudo-classes are allowed anywhere in
- sequences of simple selectors, after the leading type selector or
- universal selector (possibly omitted). Pseudo-class names are
- case-insensitive. Some pseudo-classes are mutually exclusive, while
- others can be applied simultaneously to the same
- element. Pseudo-classes may be dynamic, in the sense that an element
- may acquire or lose a pseudo-class while a user interacts with the
- document.</p>
-
-
-<h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>
-
-<p>Dynamic pseudo-classes classify elements on characteristics other
- than their name, attributes, or content, in principle characteristics
- that cannot be deduced from the document tree.</p>
-
-<p>Dynamic pseudo-classes do not appear in the document source or
- document tree.</p>
-
-
-<h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>
-
-<p>User agents commonly display unvisited links differently from
- previously visited ones. Selectors
- provides the pseudo-classes <code>:link</code> and
- <code>:visited</code> to distinguish them:</p>
-
-<ul>
- <li>The <code>:link</code> pseudo-class applies to links that have
- not yet been visited.
- </li>
- <li>The <code>:visited</code> pseudo-class applies once the link has
- been visited by the user.
- </li>
-</ul>
-
-<p>After some amount of time, user agents may choose to return a
- visited link to the (unvisited) ':link' state.</p>
-
-<p>The two states are mutually exclusive.</p>
-
-<div class="example">
-
- <p>Example:</p>
-
- <p>The following selector represents links carrying class
- <code>external</code> and already visited:</p>
-
- <pre>a.external:visited</pre>
-
-</div>
-
-<p class="note"><strong>Note:</strong> It is possible for style sheet
- authors to abuse the :link and :visited pseudo-classes to determine
- which sites a user has visited without the user's consent.
-
-<p>UAs may therefore treat all links as unvisited links, or implement
- other measures to preserve the user's privacy while rendering visited
- and unvisited links differently.</p>
-
-<h5>The <a name=useraction-pseudos>user action pseudo-classes
- :hover, :active, and :focus</a></h5>
-
-<p>Interactive user agents sometimes change the rendering in response
- to user actions. Selectors provides
- three pseudo-classes for the selection of an element the user is
- acting on.</p>
-
-<ul>
-
- <li>The <code>:hover</code> pseudo-class applies while the user
- designates an element with a pointing device, but does not activate
- it. For example, a visual user agent could apply this pseudo-class
- when the cursor (mouse pointer) hovers over a box generated by the
- element. User agents not that do not support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> do not have to support this pseudo-class. Some conforming
- user agents that support <a
- href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive
- media</a> may not be able to support this pseudo-class (e.g., a pen
- device that does not detect hovering).
- </li>
-
- <li>The <code>:active</code> pseudo-class applies while an element
- is being activated by the user. For example, between the times the
- user presses the mouse button and releases it.
- </li>
-
- <li>The <code>:focus</code> pseudo-class applies while an element
- has the focus (accepts keyboard or mouse events, or other forms of
- input).
- </li>
-
-</ul>
-
-<p>There may be document language or implementation specific limits on
- which elements can become <code>:active</code> or acquire
- <code>:focus</code>.</p>
-
-<p>These pseudo-classes are not mutually exclusive. An element may
- match several pseudo-classes at the same time.</p>
-
-<p>Selectors doesn't define if the parent of an element that is
- ':active' or ':hover' is also in that state.</p>
-
-<div class="example">
- <p>Examples:</p>
- <pre>a:link /* unvisited links */
-a:visited /* visited links */
-a:hover /* user hovers */
-a:active /* active links */</pre>
- <p>An example of combining dynamic pseudo-classes:</p>
- <pre>a:focus
-a:focus:hover</pre>
- <p>The last selector matches <code>a</code> elements that are in
- the pseudo-class :focus and in the pseudo-class :hover.</p>
-</div>
-
-<p class="note"><strong>Note:</strong> An element can be both ':visited'
- and ':active' (or ':link' and ':active').</p>
-
-<h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>
-
-<p>Some URIs refer to a location within a resource. This kind of URI
- ends with a "number sign" (#) followed by an anchor
- identifier (called the fragment identifier).</p>
-
-<p>URIs with fragment identifiers link to a certain element within the
- document, known as the target element. For instance, here is a URI
- pointing to an anchor named <code>section_2</code> in an HTML
- document:</p>
-
-<pre>http://example.com/html/top.html#section_2</pre>
-
-<p>A target element can be represented by the <code>:target</code>
- pseudo-class. If the document's URI has no fragment identifier, then
- the document has no target element.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>p.note:target</pre>
- <p>This selector represents a <code>p</code> element of class
- <code>note</code> that is the target element of the referring
- URI.</p>
-</div>
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>Here, the <code>:target</code> pseudo-class is used to make the
- target element red and place an image before it, if there is one:</p>
- <pre>*:target { color : red }
-*:target::before { content : url(target.png) }</pre>
-</div>
-
-<h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>
-
-<p>If the document language specifies how the human language of an
- element is determined, it is possible to write selectors that
- represent an element based on its language. For example, in HTML <a
- href="#refsHTML4">[HTML4]</a>, the language is determined by a
- combination of the <code>lang</code> attribute, the <code>meta</code>
- element, and possibly by information from the protocol (such as HTTP
- headers). XML uses an attribute called <code>xml:lang</code>, and
- there may be other document language-specific methods for determining
- the language.</p>
-
-<p>The pseudo-class <code>:lang(C)</code> represents an element that
- is in language C. Whether an element is represented by a
- <code>:lang()</code> selector is based solely on the identifier C
- being either equal to, or a hyphen-separated substring of, the
- element's language value, in the same way as if performed by the <a
- href="#attribute-representation">'|='</a> operator in attribute
- selectors. The identifier C does not have to be a valid language
- name.</p>
-
-<p>C must not be empty. (If it is, the selector is invalid.)</p>
-
-<p class="note"><strong>Note:</strong> It is recommended that
- documents and protocols indicate language using codes from RFC 3066 <a
- href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of
- "xml:lang" attributes in the case of XML-based documents <a
- href="#refsXML10">[XML10]</a>. See <a
- href="http://www.w3.org/International/questions/qa-lang-2or3.html">
- "FAQ: Two-letter or three-letter language codes."</a></p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The two following selectors represent an HTML document that is in
- Belgian, French, or German. The two next selectors represent
- <code>q</code> quotations in an arbitrary element in Belgian, French,
- or German.</p>
- <pre>html:lang(fr-be)
-html:lang(de)
-:lang(fr-be) > q
-:lang(de) > q</pre>
-</div>
-
-<h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>
-
-<h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>
-
-<p>The <code>:enabled</code> pseudo-class allows authors to customize
- the look of user interface elements that are enabled — which the
- user can select or activate in some fashion (e.g. clicking on a button
- with a mouse). There is a need for such a pseudo-class because there
- is no way to programmatically specify the default appearance of say,
- an enabled <code>input</code> element without also specifying what it
- would look like when it was disabled.</p>
-
-<p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the
- author to specify precisely how a disabled or inactive user interface
- element should look.</p>
-
-<p>Most elements will be neither enabled nor disabled. An element is
- enabled if the user can either activate it or transfer the focus to
- it. An element is disabled if it could be enabled, but the user cannot
- presently activate it or transfer focus to it.</p>
-
-
-<h5><a name=checked>The :checked pseudo-class</a></h5>
-
-<p>Radio and checkbox elements can be toggled by the user. Some menu
- items are "checked" when the user selects them. When such elements are
- toggled "on" the <code>:checked</code> pseudo-class applies. The
- <code>:checked</code> pseudo-class initially applies to such elements
- that have the HTML4 <code>selected</code> and <code>checked</code>
- attributes as described in <a
- href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section
- 17.2.1 of HTML4</a>, but of course the user can toggle "off" such
- elements in which case the <code>:checked</code> pseudo-class would no
- longer apply. While the <code>:checked</code> pseudo-class is dynamic
- in nature, and is altered by user action, since it can also be based
- on the presence of the semantic HTML4 <code>selected</code> and
- <code>checked</code> attributes, it applies to all media.
-
-
-<h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>
-
-<div class="note">
-
- <p>Radio and checkbox elements can be toggled by the user, but are
- sometimes in an indeterminate state, neither checked nor unchecked.
- This can be due to an element attribute, or DOM manipulation.</p>
-
- <p>A future version of this specification may introduce an
- <code>:indeterminate</code> pseudo-class that applies to such elements.
- <!--While the <code>:indeterminate</code> pseudo-class is dynamic in
- nature, and is altered by user action, since it can also be based on
- the presence of an element attribute, it applies to all media.</p>
-
- <p>Components of a radio-group initialized with no pre-selected choice
- are an example of :indeterminate state.--></p>
-
-</div>
-
-
-<h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>
-
-<p>Selectors introduces the concept of <dfn>structural
- pseudo-classes</dfn> to permit selection based on extra information that
- lies in
- the document tree but cannot be represented by other simple selectors or
- combinators.
-
-<p>Note that standalone pieces of PCDATA (text nodes in the DOM) are
- not counted when calculating the position of an element in the list of
- children of its parent. When calculating the position of an element in
- the list of children of its parent, the index numbering starts at 1.
-
-
-<h5><a name=root-pseudo>:root pseudo-class</a></h5>
-
-<p>The <code>:root</code> pseudo-class represents an element that is
- the root of the document. In HTML 4, this is always the
- <code>HTML</code> element.
-
-
-<h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>
-
-<p>The
- <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>before</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. In
- other words, this matches the <var>b</var>th child of an element after
- all the children have been split into groups of <var>a</var> elements
- each. For example, this allows the selectors to address every other
- row in a table, and could be used to alternate the color
- of paragraph text in a cycle of four. The <var>a</var> and
- <var>b</var> values must be zero, negative integers or positive
- integers. The index of the first child of an element is 1.
-
-<p>In addition to this, <code>:nth-child()</code> can take
- '<code>odd</code>' and '<code>even</code>' as arguments instead.
- '<code>odd</code>' has the same signification as <code>2n+1</code>,
- and '<code>even</code>' has the same signification as <code>2n</code>.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
-tr:nth-child(odd) /* same */
-tr:nth-child(2n) /* represents every even row of an HTML table */
-tr:nth-child(even) /* same */
-
-/* Alternate paragraph colours in CSS */
-p:nth-child(4n+1) { color: navy; }
-p:nth-child(4n+2) { color: green; }
-p:nth-child(4n+3) { color: maroon; }
-p:nth-child(4n+4) { color: purple; }</pre>
-</div>
-
-<p>When <var>a</var>=0, no repeating is used, so for example
- <code>:nth-child(0n+5)</code> matches only the fifth child. When
- <var>a</var>=0, the <var>a</var><code>n</code> part need not be
- included, so the syntax simplifies to
- <code>:nth-child(<var>b</var>)</code> and the last example simplifies
- to <code>:nth-child(5)</code>.
-
-<div class="example">
- <p>Examples:</p>
-<pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */
-foo:nth-child(1) /* same */</pre>
-</div>
-
-<p>When <var>a</var>=1, the number may be omitted from the rule.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selectors are therefore equivalent:</p>
-<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
-bar:nth-child(n+0) /* same */
-bar:nth-child(n) /* same */
-bar /* same but lower specificity (0,0,1) */</pre>
-</div>
-
-<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In
- such a case, the <var>b</var> part may be omitted.
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
-tr:nth-child(2n) /* same */</pre>
-</div>
-
-<p>If both <var>a</var> and <var>b</var> are equal to zero, the
- pseudo-class represents no element in the document tree.</p>
-
-<p>The value <var>a</var> can be negative, but only the positive
- values of <var>a</var><code>n</code>+<var>b</var>, for
- <code>n</code>≥0, may represent an element in the document
- tree.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
-</div>
-
-<p>When the value <var>b</var> is negative, the "+" character in the
- expression must be removed (it is effectively replaced by the "-"
- character indicating the negative value of <var>b</var>).</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>: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 */</pre>
-</div>
-
-
-<h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings
- <strong>after</strong> it in the document tree, for a given positive
- integer or zero value of <code>n</code>, and has a parent element. See
- <code>:nth-child()</code> pseudo-class for the syntax of its argument.
- It also accepts the '<code>even</code>' and '<code>odd</code>' values
- as arguments.
-
-
-<div class="example">
- <p>Examples:</p>
-<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
-
-foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
- counting from the last one */</pre>
-</div>
-
-
-<h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>before</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. In other words, this matches the <var>b</var>th child
- of that type after all the children of that type have been split into
- groups of a elements each. See <code>:nth-child()</code> pseudo-class
- for the syntax of its argument. It also accepts the
- '<code>even</code>' and '<code>odd</code>' values.
-
-
-<div class="example">
- <p>CSS example:</p>
-
- <p>This allows an author to alternate the position of floated images:</p>
-<pre>img:nth-of-type(2n+1) { float: right; }
-img:nth-of-type(2n) { float: left; }</pre>
-</div>
-
-
-<h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>
-
-<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
- pseudo-class notation represents an element that has
- <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same
- element name <strong>after</strong> it in the document tree, for a
- given zero or positive integer value of <code>n</code>, and has a
- parent element. See <code>:nth-child()</code> pseudo-class for the
- syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>'
- values.
-
-
-<div class="example">
- <p>Example:</p>
-
- <p>To represent all <code>h2</code> children of an XHTML
- <code>body</code> except the first and last, one could use the
- following selector:</p>
- <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
- <p>In this case, one could also use <code>:not()</code>, although the
- selector ends up being just as long:</p>
- <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
-</div>
-
-
-<h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
- pseudo-class
- represents an element that is the first child of some other element.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- the first child of a <code>div</code> element:</p>
- <pre>div > p:first-child</pre>
- <p>This selector can represent the <code>p</code> inside the
- <code>div</code> of the following fragment:</p>
- <pre><p> The last P before the note.</p>
-<div class="note">
- <p> The first P inside the note.</p>
-</div></pre>
- but cannot represent the second <code>p</code> in the following
- fragment:
- <pre><p> The last P before the note.</p>
-<div class="note">
- <h2> Note </h2>
- <p> The first P inside the note.</p>
-</div></pre>
- <p>The following two selectors are usually equivalent:</p>
- <pre>* > a:first-child /* a is first child of any element */
-a:first-child /* Same (assuming a is not the root element) */</pre>
-</div>
-
-<h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
- pseudo-class
- represents an element that is the last child of some other element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a list item <code>li</code> that
- is the last child of an ordered list <code>ol</code>.
- <pre>ol > li:last-child</pre>
-</div>
-
-<h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
- pseudo-class
- represents an element that is the first sibling of its type in the list of
- children of its parent element.
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents a definition title
- <code>dt</code> inside a definition list <code>dl</code>, this
- <code>dt</code> being the first of its type in the list of children of
- its parent element.</p>
- <pre>dl dt:first-of-type</pre>
- <p>It is a valid description for the first two <code>dt</code>
- elements in the following example but not for the third one:</p>
-<pre><dl>
- <dt>gigogne</dt>
- <dd>
- <dl>
- <dt>fusée</dt>
- <dd>multistage rocket</dd>
- <dt>table</dt>
- <dd>nest of tables</dd>
- </dl>
- </dd>
-</dl></pre>
-</div>
-
-<h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>
-
-<p>Same as <code>:nth-last-of-type(1)</code>. The
- <code>:last-of-type</code> pseudo-class represents an element that is
- the last sibling of its type in the list of children of its parent
- element.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The following selector represents the last data cell
- <code>td</code> of a table row.</p>
- <pre>tr > td:last-of-type</pre>
-</div>
-
-<h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children. Same as
- <code>:first-child:last-child</code> or
- <code>:nth-child(1):nth-last-child(1)</code>, but with a lower
- specificity.</p>
-
-<h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>
-
-<p>Represents an element that has a parent element and whose parent
- element has no other element children with the same element name. Same
- as <code>:first-of-type:last-of-type</code> or
- <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
- specificity.</p>
-
-
-<h5><a name=empty-pseudo></a>:empty pseudo-class</h5>
-
-<p>The <code>:empty</code> pseudo-class represents an element that has
- no children at all. In terms of the DOM, only element nodes and text
- nodes (including CDATA nodes and entity references) whose data has a
- non-zero length must be considered as affecting emptiness; comments,
- PIs, and other nodes must not affect whether an element is considered
- empty or not.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p><code>p:empty</code> is a valid representation of the following fragment:
- </p>
- <pre><p></p></pre>
- <p><code>foo:empty</code> is not a valid representation for the
- following fragments:</p>
- <pre><foo>bar</foo></pre>
- <pre><foo><bar>bla</bar></foo></pre>
- <pre><foo>this is not <bar>:empty</bar></foo></pre>
-</div>
-
-<h4><a name=content-selectors>6.6.6. Blank</a></h4>
-<!-- It's the Return of Appendix H!!! Run away! -->
-
-<p>This section intentionally left blank.</p>
-<!-- (used to be :contains()) -->
-
-<h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>
-
-<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
- functional notation taking a <a href="#simple-selectors-dfn">simple
- selector</a> (excluding the negation pseudo-class itself and
- pseudo-elements) as an argument. It represents an element that is not
- represented by the argument.
-
- <!-- pseudo-elements are not simple selectors, so the above paragraph
-may be a bit confusing -->
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following CSS selector matches all <code>button</code>
- elements in an HTML document that are not disabled.</p>
- <pre>button:not([DISABLED])</pre>
- <p>The following selector represents all but <code>FOO</code>
- elements.</p>
- <pre>*:not(FOO)</pre>
- <p>The following group of selectors represents all HTML elements
- except links.</p>
- <pre>html|*:not(:link):not(:visited)</pre>
-</div>
-
-<p>Default namespace declarations do not affect the argument of the
- negation pseudo-class unless the argument is a universal selector or a
- type selector.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>Assuming that the default namespace is bound to
- "http://example.com/", the following selector represents all
- elements that are not in that namespace:</p>
- <pre>*|*:not(*)</pre>
- <p>The following CSS selector matches any element being hovered,
- regardless of its namespace. In particular, it is not limited to
- only matching elements in the default namespace that are not being
- hovered, and elements not in the default namespace don't match the
- rule when they <em>are</em> being hovered.</p>
- <pre>*|*:not(:hover)</pre>
-</div>
-
-<p class="note"><strong>Note</strong>: the :not() pseudo allows
- useless selectors to be written. For instance <code>:not(*|*)</code>,
- which represents no element at all, or <code>foo:not(bar)</code>,
- which is equivalent to <code>foo</code> but with a higher
- specificity.</p>
-
-<h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>
-
-<p>Pseudo-elements create abstractions about the document tree beyond
- those specified by the document language. For instance, document
- languages do not offer mechanisms to access the first letter or first
- line of an element's content. Pseudo-elements allow designers to refer
- to this otherwise inaccessible information. Pseudo-elements may also
- provide designers a way to refer to content that does not exist in the
- source document (e.g., the <code>::before</code> and
- <code>::after</code> pseudo-elements give access to generated
- content).</p>
-
-<p>A pseudo-element is made of two colons (<code>::</code>) followed
- by the name of the pseudo-element.</p>
-
-<p>This <code>::</code> notation is introduced by the current document
- in order to establish a discrimination between pseudo-classes and
- pseudo-elements. For compatibility with existing style sheets, user
- agents must also accept the previous one-colon notation for
- pseudo-elements introduced in CSS levels 1 and 2 (namely,
- <code>:first-line</code>, <code>:first-letter</code>,
- <code>:before</code> and <code>:after</code>). This compatibility is
- not allowed for the new pseudo-elements introduced in CSS level 3.</p>
-
-<p>Only one pseudo-element may appear per selector, and if present it
- must appear after the sequence of simple selectors that represents the
- <a href="#subject">subjects</a> of the selector. <span class="note">A
-future version of this specification may allow multiple
-pesudo-elements per selector.</span></p>
-
-<h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>
-
-<p>The <code>::first-line</code> pseudo-element describes the contents
- of the first formatted line of an element.
-
-<div class="example">
- <p>CSS example:</p>
- <pre>p::first-line { text-transform: uppercase }</pre>
- <p>The above rule means "change the letters of the first line of every
- paragraph to uppercase".</p>
-</div>
-
-<p>The selector <code>p::first-line</code> does not match any real
- HTML element. It does match a pseudo-element that conforming user
- agents will insert at the beginning of every paragraph.</p>
-
-<p>Note that the length of the first line depends on a number of
- factors, including the width of the page, the font size, etc. Thus,
- an ordinary HTML paragraph such as:</p>
-
-<pre>
-<P>This is a somewhat long HTML
-paragraph that will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the lines of which happen to be broken as follows:
-
-<pre>
-THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
-will be broken into several lines. The first
-line will be identified by a fictional tag
-sequence. The other lines will be treated as
-ordinary lines in the paragraph.
-</pre>
-
-<p>This paragraph might be "rewritten" by user agents to include the
- <em>fictional tag sequence</em> for <code>::first-line</code>. This
- fictional tag sequence helps to show how properties are inherited.</p>
-
-<pre>
-<P><b><P::first-line></b> This is a somewhat long HTML
-paragraph that <b></P::first-line></b> will be broken into several
-lines. The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>If a pseudo-element breaks up a real element, the desired effect
- can often be described by a fictional tag sequence that closes and
- then re-opens the element. Thus, if we mark up the previous paragraph
- with a <code>span</code> element:</p>
-
-<pre>
-<P><b><SPAN class="test"></b> This is a somewhat long HTML
-paragraph that will be broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>the user agent could simulate start and end tags for
- <code>span</code> when inserting the fictional tag sequence for
- <code>::first-line</code>.
-
-<pre>
-<P><P::first-line><b><SPAN class="test"></b> This is a
-somewhat long HTML
-paragraph that will <b></SPAN></b></P::first-line><b><SPAN
- class="test"></b> be
-broken into several
-lines.<b></SPAN></b> The first line will be identified
-by a fictional tag sequence. The other lines
-will be treated as ordinary lines in the
-paragraph.</P>
-</pre>
-
-<p>In CSS, the <code>::first-line</code> pseudo-element can only be
- attached to a block-level element, an inline-block, a table-caption,
- or a table-cell.</p>
-
-<p><a name="first-formatted-line"></a>The "first formatted line" of an
- element may occur inside a
- block-level descendant in the same flow (i.e., a block-level
- descendant that is not positioned and not a float). E.g., the first
- line of the <code>div</code> in <code><DIV><P>This
- line...</P></DIV></code> is the first line of the <code>p</code>
- (assuming
- that both <code>p</code> and <code>div</code> are block-level).
-
-<p>The first line of a table-cell or inline-block cannot be the first
- formatted line of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first formatted line of the
- <code>div</code> is not the line "Hello".
-
-<p class="note">Note that the first line of the <code>p</code> in this
- fragment: <code><p><br>First...</code> doesn't contain any
- letters (assuming the default style for <code>br</code> in HTML
- 4). The word "First" is not on the first formatted line.
-
-<p>A UA should act as if the fictional start tags of the
- <code>::first-line</code> pseudo-elements were nested just inside the
- innermost enclosing block-level element. (Since CSS1 and CSS2 were
- silent on this case, authors should not rely on this behavior.) Here
- is an example. The fictional tag sequence for</p>
-
-<pre>
-<DIV>
- <P>First paragraph</P>
- <P>Second paragraph</P>
-</DIV>
-</pre>
-
-<p>is</p>
-
-<pre>
-<DIV>
- <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
- <P><P::first-line>Second paragraph</P::first-line></P>
-</DIV>
-</pre>
-
-<p>The <code>::first-line</code> pseudo-element is similar to an
- inline-level element, but with certain restrictions. In CSS, the
- following properties apply to a <code>::first-line</code>
- pseudo-element: font properties, color property, background
- properties, 'word-spacing', 'letter-spacing', 'text-decoration',
- 'vertical-align', 'text-transform', 'line-height'. UAs may apply other
- properties as well.</p>
-
-
-<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
-
-<p>The <code>::first-letter</code> pseudo-element represents the first
- letter of the first line of a block, if it is not preceded by any
- other content (such as images or inline tables) on its line. The
- ::first-letter pseudo-element may be used for "initial caps" and "drop
- caps", which are common typographical effects. This type of initial
- letter is similar to an inline-level element if its 'float' property
- is 'none'; otherwise, it is similar to a floated element.</p>
-
-<p>In CSS, these are the properties that apply to <code>::first-letter</code>
- pseudo-elements: font properties, 'text-decoration', 'text-transform',
- 'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
- 'float', 'vertical-align' (only if 'float' is 'none'), margin
- properties, padding properties, border properties, color property,
- background properties. UAs may apply other properties as well. To
- allow UAs to render a typographically correct drop cap or initial cap,
- the UA may choose a line-height, width and height based on the shape
- of the letter, unlike for normal elements.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>This example shows a possible rendering of an initial cap. Note
- that the 'line-height' that is inherited by the
- <code>::first-letter</code>
- pseudo-element is 1.1, but the UA in this example has computed the
- height of the first letter differently, so that it doesn't cause any
- unnecessary space between the first two lines. Also note that the
- fictional start tag of the first letter is inside the <span>span</span>,
- and thus
- the font weight of the first letter is normal, not bold as the <span>span</span>:
-<pre>
-p { line-height: 1.1 }
-p::first-letter { font-size: 3em; font-weight: normal }
-span { font-weight: bold }
-...
-<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
-Erbarremt over my en mijn benaeuwde vesten<br>
-En arme burgery, en op mijn volcx gebed<br>
-En dagelix geschrey de bange stad ontzet.
-</pre>
- <div class="figure">
- <p><img src="initial-cap.png"
- alt="Image illustrating the ::first-letter pseudo-element">
- </div>
-</div>
-
-<div class="example">
- <p>The following CSS will make a drop cap initial letter span about two
- lines:</p>
-
-<pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<HTML>
- <HEAD>
- <TITLE>Drop cap initial letter</TITLE>
- <STYLE type="text/css">
- P { font-size: 12pt; line-height: 1.2 }
- P::first-letter { font-size: 200%; font-weight: bold; float: left }
- SPAN { text-transform: uppercase }
- </STYLE>
- </HEAD>
- <BODY>
- <P><SPAN>The first</SPAN> few words of an article
- in The Economist.</P>
- </BODY>
-</HTML>
-</pre>
-
- <p>This example might be formatted as follows:</p>
-
- <div class="figure">
- <P><img src="first-letter.gif"
- alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements">
- </p>
- </div>
-
- <p>The <span class="index-inst" title="fictional tag
-sequence">fictional tag sequence</span> is:</p>
-
-<pre>
-<P>
-<SPAN>
-<P::first-letter>
-T
-</P::first-letter>he first
-</SPAN>
-few words of an article in the Economist.
-</P>
-</pre>
-
- <p>Note that the <code>::first-letter</code> pseudo-element tags abut
- the content (i.e., the initial character), while the ::first-line
- pseudo-element start tag is inserted right after the start tag of the
- block element.</p></div>
-
-<p>In order to achieve traditional drop caps formatting, user agents
- may approximate font sizes, for example to align baselines. Also, the
- glyph outline may be taken into account when formatting.</p>
-
-<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
- "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
- punctuation classes), that precedes or follows the first letter should
- be included. <a href="#refsUNICODE">[UNICODE]</a></p>
-
-<div class="figure">
- <P><img src="first-letter2.gif" alt="Quotes that precede the
-first letter should be included."></p>
-</div>
-
-<p>The <code>::first-letter</code> also applies if the first letter is
- in fact a digit, e.g., the "6" in "67 million dollars is a lot of
- money."</p>
-
-<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
- block, list-item, table-cell, table-caption, and inline-block
- elements. <span class="note">A future version of this specification
-may allow this pesudo-element to apply to more element
-types.</span></p>
-
-<p>The <code>::first-letter</code> pseudo-element can be used with all
- such elements that contain text, or that have a descendant in the same
- flow that contains text. A UA should act as if the fictional start tag
- of the ::first-letter pseudo-element is just before the first text of
- the element, even if that first text is in a descendant.</p>
-
-<div class="example">
- <p>Example:</p>
-
- <p>The fictional tag sequence for this HTMLfragment:
-<pre><div>
-<p>The first text.</pre>
- <p>is:
-<pre><div>
-<p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>
-</div>
-
-<p>The first letter of a table-cell or inline-block cannot be the
- first letter of an ancestor element. Thus, in <code><DIV><P
- STYLE="display: inline-block">Hello<BR>Goodbye</P>
- etcetera</DIV></code> the first letter of the <code>div</code> is
- not the
- letter "H". In fact, the <code>div</code> doesn't have a first letter.
-
-<p>The first letter must occur on the <a
- href="#first-formatted-line">first formatted line.</a> For example, in
- this fragment: <code><p><br>First...</code> the first line
- doesn't contain any letters and <code>::first-letter</code> doesn't
- match anything (assuming the default style for <code>br</code> in HTML
- 4). In particular, it does not match the "F" of "First."
-
-<p>In CSS, if an element is a list item ('display: list-item'), the
- <code>::first-letter</code> applies to the first letter in the
- principal box after the marker. UAs may ignore
- <code>::first-letter</code> on list items with 'list-style-position:
- inside'. If an element has <code>::before</code> or
- <code>::after</code> content, the <code>::first-letter</code> applies
- to the first letter of the element <em>including</em> that content.
-
-<div class="example">
- <p>Example:</p>
-
- <p>After the rule 'p::before {content: "Note: "}', the selector
- 'p::first-letter' matches the "N" of "Note".</p>
-</div>
-
-<p>Some languages may have specific rules about how to treat certain
- letter combinations. In Dutch, for example, if the letter combination
- "ij" appears at the beginning of a word, both letters should be
- considered within the <code>::first-letter</code> pseudo-element.
-
-<p>If the letters that would form the ::first-letter are not in the
- same element, such as "'T" in <code><p>'<em>T...</code>, the UA
- may create a ::first-letter pseudo-element from one of the elements,
- both elements, or simply not create a pseudo-element.</p>
-
-<p>Similarly, if the first letter(s) of the block are not at the start
- of the line (for example due to bidirectional reordering), then the UA
- need not create the pseudo-element(s).
-
-<div class="example">
- <p>Example:</p>
-
- <p><a name="overlapping-example">The following example</a> illustrates
- how overlapping pseudo-elements may interact. The first letter of
- each P element will be green with a font size of '24pt'. The rest of
- the first formatted line will be 'blue' while the rest of the
- paragraph will be 'red'.</p>
-
-<pre>p { color: red; font-size: 12pt }
-p::first-letter { color: green; font-size: 200% }
-p::first-line { color: blue }
-
-<P>Some text that ends up on two lines</P></pre>
-
- <p>Assuming that a line break will occur before the word "ends", the
-<span class="index-inst" title="fictional tag sequence">fictional tag
-sequence</span> for this fragment might be:</p>
-
-<pre><P>
-<P::first-line>
-<P::first-letter>
-S
-</P::first-letter>ome text that
-</P::first-line>
-ends up on two lines
-</P></pre>
-
- <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
- element. Properties set on <code>::first-line</code> are inherited by
- <code>::first-letter</code>, but are overridden if the same property is
- set on
- <code>::first-letter</code>.</p>
-</div>
-
-
-<h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection
- pseudo-element</a></h4>
-
-<p>The <code>::selection</code> pseudo-element applies to the portion
- of a document that has been highlighted by the user. This also
- applies, for example, to selected text within an editable text
- field. This pseudo-element should not be confused with the <code><a
- href="#checked">:checked</a></code> pseudo-class (which used to be
- named <code>:selected</code>)
-
-<p>Although the <code>::selection</code> pseudo-element is dynamic in
- nature, and is altered by user action, it is reasonable to expect that
- when a UA re-renders to a static medium (such as a printed page, see
- <a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a
- dynamic medium (like screen), the UA may wish to transfer the current
- <code>::selection</code> state to that other medium, and have all the
- appropriate formatting and rendering take effect as well. This is not
- required — UAs may omit the <code>::selection</code>
- pseudo-element for static media.
-
-<p>These are the CSS properties that apply to <code>::selection</code>
- pseudo-elements: color, background, cursor (optional), outline
- (optional). The computed value of the 'background-image' property on
- <code>::selection</code> may be ignored.
-
-
-<h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>
-
-<p>The <code>::before</code> and <code>::after</code> pseudo-elements
- can be used to describe generated content before or after an element's
- content. They are explained in CSS 2.1 <a
- href="#refsCSS21">[CSS21]</a>.</p>
-
-<p>When the <code>::first-letter</code> and <code>::first-line</code>
- pseudo-elements are combined with <code>::before</code> and
- <code>::after</code>, they apply to the first letter or line of the
- element including the inserted text.</p>
-
-<h2><a name=combinators>8. Combinators</a></h2>
-
-<h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>
-
-<p>At times, authors may want selectors to describe an element that is
- the descendant of another element in the document tree (e.g., "an
- <code>EM</code> element that is contained within an <code>H1</code>
- element"). Descendant combinators express such a relationship. A
- descendant combinator is <a href="#whitespace">white space</a> that
- separates two sequences of simple selectors. A selector of the form
- "<code>A B</code>" represents an element <code>B</code> that is an
- arbitrary descendant of some ancestor element <code>A</code>.
-
-<div class="example">
- <p>Examples:</p>
-
- <p>For example, consider the following selector:</p>
- <pre>h1 em</pre>
- <p>It represents an <code>em</code> element being the descendant of
- an <code>h1</code> element. It is a correct and valid, but partial,
- description of the following fragment:</p>
- <pre><h1>This <span class="myclass">headline
-is <em>very</em> important</span></h1></pre>
- <p>The following selector:</p>
- <pre>div * p</pre>
- <p>represents a <code>p</code> element that is a grandchild or later
- descendant of a <code>div</code> element. Note the whitespace on
- either side of the "*" is not part of the universal selector; the
- whitespace is a combinator indicating that the DIV must be the
- ancestor of some element, and that that element must be an ancestor
- of the P.</p>
-
- <p>The following selector, which combines descendant combinators and
- <a href="#attribute-selectors">attribute selectors</a>, represents an
- element that (1) has the <code>href</code> attribute set and (2) is
- inside a <code>p</code> that is itself inside a <code>div</code>:</p>
- <pre>div p *[href]</pre>
-</div>
-
-<h3><a name=child-combinators>8.2. Child combinators</a></h3>
-
-<p>A <dfn>child combinator</dfn> describes a childhood relationship
- between two elements. A child combinator is made of the
- "greater-than sign" (<code>></code>) character and
- separates two sequences of simple selectors.
-
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element that is
- child of <code>body</code>:</p>
- <pre>body > p</pre>
- <p>The following example combines descendant combinators and child
- combinators.</p>
- <pre>div ol>li p</pre>
- <!-- LEAVE THOSE SPACES OUT! see below -->
- <p>It represents a <code>p</code> element that is a descendant of an
- <code>li</code> element; the <code>li</code> element must be the
- child of an <code>ol</code> element; the <code>ol</code> element must
- be a descendant of a <code>div</code>. Notice that the optional white
- space around the ">" combinator has been left out.</p>
-</div>
-
-<p>For information on selecting the first child of an element, please
- see the section on the <code><a
- href="#structural-pseudos">:first-child</a></code> pseudo-class
- above.</p>
-
-<h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>
-
-<p>There are two different sibling combinators: the adjacent sibling
- combinator and the general sibling combinator. In both cases,
- non-element nodes (e.g. text between elements) are ignored when
- considering adjacency of elements.</p>
-
-<h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a>
-</h4>
-
-<p>The adjacent sibling combinator is made of the "plus
- sign" (U+002B, <code>+</code>) character that separates two
- sequences of simple selectors. The elements represented by the two
- sequences share the same parent in the document tree and the element
- represented by the first sequence immediately precedes the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Examples:</p>
-
- <p>The following selector represents a <code>p</code> element
- immediately following a <code>math</code> element:</p>
- <pre>math + p</pre>
- <p>The following selector is conceptually similar to the one in the
- previous example, except that it adds an attribute selector — it
- adds a constraint to the <code>h1</code> element, that it must have
- <code>class="opener"</code>:</p>
- <pre>h1.opener + h2</pre>
-</div>
-
-
-<h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a>
-</h4>
-
-<p>The general sibling combinator is made of the "tilde"
- (U+007E, <code>~</code>) character that separates two sequences of
- simple selectors. The elements represented by the two sequences share
- the same parent in the document tree and the element represented by
- the first sequence precedes (not necessarily immediately) the element
- represented by the second one.</p>
-
-<div class="example">
- <p>Example:</p>
- <pre>h1 ~ pre</pre>
- <p>represents a <code>pre</code> element following an <code>h1</code>. It
- is a correct and valid, but partial, description of:</p>
- <pre><h1>Definition of the function a</h1>
-<p>Function a(x) has to be applied to all figures in the table.</p>
-<pre>function a(x) = 12x/13.5</pre></pre>
-</div>
-
-<h2><a name=specificity>9. Calculating a selector's specificity</a></h2>
-
-<p>A selector's specificity is calculated as follows:</p>
-
-<ul>
- <li>count the number of ID selectors in the selector (= a)</li>
- <li>count the number of class selectors, attributes selectors, and
- pseudo-classes in the selector (= b)
- </li>
- <li>count the number of element names in the selector (= c)</li>
- <li>ignore pseudo-elements</li>
-</ul>
-
-<p>Selectors inside <a href="#negation">the negation pseudo-class</a>
- are counted like any other, but the negation itself does not count as
- a pseudo-class.</p>
-
-<p>Concatenating the three numbers a-b-c (in a number system with a
- large base) gives the specificity.</p>
-
-<div class="example">
- <p>Examples:</p>
-<pre>* /* a=0 b=0 c=0 -> specificity = 0 */
-LI /* a=0 b=0 c=1 -> specificity = 1 */
-UL LI /* a=0 b=0 c=2 -> specificity = 2 */
-UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
-H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
-UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
-LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
-#x34y /* a=1 b=0 c=0 -> specificity = 100 */
-#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
-</pre>
-</div>
-
-<p class="note"><strong>Note:</strong> the specificity of the styles
- specified in an HTML <code>style</code> attribute is described in CSS
- 2.1. <a href="#refsCSS21">[CSS21]</a>.</p>
-
-<h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>
-
-<h3><a name=grammar>10.1. Grammar</a></h3>
-
-<p>The grammar below defines the syntax of Selectors. It is globally
- LL(1) and can be locally LL(2) (but note that most UA's should not use
- it directly, since it doesn't express the parsing conventions). The
- format of the productions is optimized for human consumption and some
- shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)
- are used:</p>
-
-<ul>
- <li><b>*</b>: 0 or more
- <li><b>+</b>: 1 or more
- <li><b>?</b>: 0 or 1
- <li><b>|</b>: separates alternatives
- <li><b>[ ]</b>: grouping</li>
-</ul>
-
-<p>The productions are:</p>
-
-<pre>selectors_group
- : selector [ COMMA S* selector ]*
- ;
-
-selector
- : simple_selector_sequence [ combinator simple_selector_sequence ]*
- ;
-
-combinator
- /* combinators can be surrounded by white space */
- : PLUS S* | GREATER S* | TILDE S* | S+
- ;
-
-simple_selector_sequence
- : [ type_selector | universal ]
- [ HASH | class | attrib | pseudo | negation ]*
- | [ HASH | class | attrib | pseudo | negation ]+
- ;
-
-type_selector
- : [ namespace_prefix ]? element_name
- ;
-
-namespace_prefix
- : [ IDENT | '*' ]? '|'
- ;
-
-element_name
- : IDENT
- ;
-
-universal
- : [ namespace_prefix ]? '*'
- ;
-
-class
- : '.' IDENT
- ;
-
-attrib
- : '[' S* [ namespace_prefix ]? IDENT S*
- [ [ PREFIXMATCH |
- SUFFIXMATCH |
- SUBSTRINGMATCH |
- '=' |
- INCLUDES |
- DASHMATCH ] S* [ IDENT | STRING ] S*
- ]? ']'
- ;
-
-pseudo
- /* '::' starts a pseudo-element, ':' a pseudo-class */
- /* Exceptions: :first-line, :first-letter, :before and :after. */
- /* Note that pseudo-elements are restricted to one per selector and */
- /* occur only in the last simple_selector_sequence. */
- : ':' ':'? [ IDENT | functional_pseudo ]
- ;
-
-functional_pseudo
- : FUNCTION S* expression ')'
- ;
-
-expression
- /* In CSS3, the expressions are identifiers, strings, */
- /* or of the form "an+b" */
- : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
- ;
-
-negation
- : NOT S* negation_arg S* ')'
- ;
-
-negation_arg
- : type_selector | universal | HASH | class | attrib | pseudo
- ;</pre>
-
-
-<h3><a name=lex>10.2. Lexical scanner</a></h3>
-
-<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see
- <a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is
- case-insensitive.</p>
-
-<p>The two occurrences of "\377" represent the highest character
- number that current versions of Flex can deal with (decimal 255). They
- should be read as "\4177777" (decimal 1114111), which is the highest
- possible code point in Unicode/ISO-10646. <a
- href="#refsUNICODE">[UNICODE]</a></p>
-
-<pre>%option case-insensitive
-
-ident [-]?{nmstart}{nmchar}*
-name {nmchar}+
-nmstart [_a-z]|{nonascii}|{escape}
-nonascii [^\0-\177]
-unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
-escape {unicode}|\\[^\n\r\f0-9a-f]
-nmchar [_a-z0-9-]|{nonascii}|{escape}
-num [0-9]+|[0-9]*\.[0-9]+
-string {string1}|{string2}
-string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
-string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
-invalid {invalid1}|{invalid2}
-invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
-invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
-nl \n|\r\n|\r|\f
-w [ \t\r\n\f]*
-
-%%
-
-[ \t\r\n\f]+ return S;
-
-"~=" return INCLUDES;
-"|=" return DASHMATCH;
-"^=" return PREFIXMATCH;
-"$=" return SUFFIXMATCH;
-"*=" return SUBSTRINGMATCH;
-{ident} return IDENT;
-{string} return STRING;
-{ident}"(" return FUNCTION;
-{num} return NUMBER;
-"#"{name} return HASH;
-{w}"+" return PLUS;
-{w}">" return GREATER;
-{w}"," return COMMA;
-{w}"~" return TILDE;
-":not(" return NOT;
-@{ident} return ATKEYWORD;
-{invalid} return INVALID;
-{num}% return PERCENTAGE;
-{num}{ident} return DIMENSION;
-"<!--" return CDO;
-"-->" return CDC;
-
-"url("{w}{string}{w}")" return URI;
-"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI;
-U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;
-
-\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
-
-. return *yytext;</pre>
-
-
-<h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>
-
-<p>An important issue is the interaction of CSS selectors with XML
- documents in web clients that were produced prior to this
- document. Unfortunately, due to the fact that namespaces must be
- matched based on the URI which identifies the namespace, not the
- namespace prefix, some mechanism is required to identify namespaces in
- CSS by their URI as well. Without such a mechanism, it is impossible
- to construct a CSS style sheet which will properly match selectors in
- all cases against a random set of XML documents. However, given
- complete knowledge of the XML document to which a style sheet is to be
- applied, and a limited use of namespaces within the XML document, it
- is possible to construct a style sheet in which selectors would match
- elements and attributes correctly.</p>
-
-<p>It should be noted that a down-level CSS client will (if it
- properly conforms to CSS forward compatible parsing rules) ignore all
- <code>@namespace</code> at-rules, as well as all style rules that make
- use of namespace qualified element type or attribute selectors. The
- syntax of delimiting namespace prefixes in CSS was deliberately chosen
- so that down-level CSS clients would ignore the style rules rather
- than possibly match them incorrectly.</p>
-
-<p>The use of default namespaces in CSS makes it possible to write
- element type selectors that will function in both namespace aware CSS
- clients as well as down-level clients. It should be noted that
- down-level clients may incorrectly match selectors against XML
- elements in other namespaces.</p>
-
-<p>The following are scenarios and examples in which it is possible to
- construct style sheets which would function properly in web clients
- that do not implement this proposal.</p>
-
-<ol>
- <li>
-
- <p>The XML document does not use namespaces.</p>
-
- <ul>
-
- <li>In this case, it is obviously not necessary to declare or use
- namespaces in the style sheet. Standard CSS element type and
- attribute selectors will function adequately in a down-level
- client.
- </li>
-
- <li>In a CSS namespace aware client, the default behavior of
- element selectors matching without regard to namespace will
- function properly against all elements, since no namespaces are
- present. However, the use of specific element type selectors
- that
- match only elements that have no namespace ("<code>|name</code>")
- will guarantee that selectors will match only XML elements that
- do
- not have a declared namespace.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document defines a single, default namespace used
- throughout the document. No namespace prefixes are used in element
- names.</p>
-
- <ul>
-
- <li>In this case, a down-level client will function as if
- namespaces were not used in the XML document at all. Standard
- CSS
- element type and attribute selectors will match against all
- elements.
- </li>
-
- </ul>
-
- </li>
-
- <li>
-
- <p>The XML document does <b>not</b> use a default namespace, all
- namespace prefixes used are known to the style sheet author, and
- there is a direct mapping between namespace prefixes and namespace
- URIs. (A given prefix may only be mapped to one namespace URI
- throughout the XML document; there may be multiple prefixes mapped
- to the same URI).</p>
-
- <ul>
-
- <li>In this case, the down-level client will view and match
- element type and attribute selectors based on their fully
- qualified name, not the local part as outlined in the <a
- href="#typenmsp">Type selectors and Namespaces</a>
- section. CSS
- selectors may be declared using an escaped colon
- "<code>\:</code>"
- to describe the fully qualified names, e.g.
- "<code>html\:h1</code>" will match
- <code><html:h1></code>. Selectors using the qualified name
- will only match XML elements that use the same prefix. Other
- namespace prefixes used in the XML that are mapped to the same
- URI
- will not match as expected unless additional CSS style rules are
- declared for them.
- </li>
-
- <li>Note that selectors declared in this fashion will
- <em>only</em> match in down-level clients. A CSS namespace aware
- client will match element type and attribute selectors based on
- the name's local part. Selectors declared with the fully
- qualified name will not match (unless there is no namespace
- prefix
- in the fully qualified name).
- </li>
-
- </ul>
-
- </li>
-
-</ol>
-
-<p>In other scenarios: when the namespace prefixes used in the XML are
- not known in advance by the style sheet author; or a combination of
- elements with no namespace are used in conjunction with elements using
- a default namespace; or the same namespace prefix is mapped to
- <em>different</em> namespace URIs within the same document, or in
- different documents; it is impossible to construct a CSS style sheet
- that will function properly against all elements in those documents,
- unless, the style sheet is written using a namespace URI syntax (as
- outlined in this document or similar) and the document is processed by
- a CSS and XML namespace aware client.</p>
-
-<h2><a name=profiling>12. Profiles</a></h2>
-
-<p>Each specification using Selectors must define the subset of W3C
- Selectors it allows and excludes, and describe the local meaning of
- all the components of that subset.</p>
-
-<p>Non normative examples:
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 1</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>class selectors<br>ID selectors<br>:link,
- :visited and :active pseudo-classes<br>descendant combinator
- <br>::first-line and ::first-letter pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>universal selector<br>attribute selectors<br>:hover and
- :focus
- pseudo-classes<br>:target pseudo-class<br>:lang()
- pseudo-class<br>all UI
- element states pseudo-classes<br>all structural
- pseudo-classes<br>negation pseudo-class<br>all
- UI element fragments pseudo-elements<br>::before and ::after
- pseudo-elements<br>child combinators<br>sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>only one class selector allowed per sequence of simple
- selectors
- </td>
- </tr>
- </tbody>
- </table>
- <br><br>
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>CSS level 2</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>type selectors<br>universal selector<br>attribute presence and
- values selectors<br>class selectors<br>ID selectors<br>:link,
- :visited,
- :active, :hover, :focus, :lang() and :first-child pseudo-classes
- <br>descendant combinator<br>child combinator<br>adjacent
- sibling
- combinator<br>::first-line and ::first-letter
- pseudo-elements<br>::before
- and ::after pseudo-elements
- </td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>
-
- <p>content selectors<br>substring matching attribute
- selectors<br>:target pseudo-classes<br>all UI element
- states pseudo-classes<br>all structural pseudo-classes other
- than :first-child<br>negation pseudo-class<br>all UI element
- fragments pseudo-elements<br>general sibling combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>more than one class selector per sequence of simple selectors
- (CSS1
- constraint) allowed
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>In CSS, selectors express pattern matching rules that determine which
- style
- rules apply to elements in the document tree.
-
- <p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>
- with attribute <code>name</code> set inside a section 1 header
- <code>h1</code>:
- <pre>h1 a[name]</pre>
-
- <p>All CSS declarations attached to such a selector are applied to elements
- matching it.</div>
-
-<div class="profile">
- <table class="tprofile">
- <tbody>
- <tr>
- <th class="title" colspan=2>Selectors profile</th>
- </tr>
- <tr>
- <th>Specification</th>
- <td>STTS 3</td>
- </tr>
- <tr>
- <th>Accepts</th>
- <td>
-
- <p>type selectors<br>universal selectors<br>attribute
- selectors<br>class
- selectors<br>ID selectors<br>all structural
- pseudo-classes<br>
- all combinators
-
- <p>namespaces</td>
- </tr>
- <tr>
- <th>Excludes</th>
- <td>non-accepted pseudo-classes<br>pseudo-elements<br></td>
- </tr>
- <tr>
- <th>Extra constraints</th>
- <td>some selectors and combinators are not allowed in fragment
- descriptions on the right side of STTS declarations.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>Selectors can be used in STTS 3 in two different
- manners:
- <ol>
- <li>a selection mechanism equivalent to CSS selection mechanism:
- declarations
- attached to a given selector are applied to elements matching that
- selector,
- <li>fragment descriptions that appear on the right side of declarations.
- </li>
- </ol>
-</div>
-
-<h2><a name=Conformance></a>13. Conformance and requirements</h2>
-
-<p>This section defines conformance with the present specification only.
-
-<p>The inability of a user agent to implement part of this specification due to
- the limitations of a particular device (e.g., non interactive user agents
- will
- probably not implement dynamic pseudo-classes because they make no sense
- without
- interactivity) does not imply non-conformance.
-
-<p>All specifications reusing Selectors must contain a <a
- href="#profiling">Profile</a> listing the
- subset of Selectors it accepts or excludes, and describing the constraints
- it adds to the current specification.
-
-<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a
- token
- which is not allowed at the current parsing point.
-
-<p>User agents must observe the rules for handling parsing errors:
-<ul>
- <li>a simple selector containing an undeclared namespace prefix is invalid
- </li>
- <li>a selector containing an invalid simple selector, an invalid combinator
- or an invalid token is invalid.
- </li>
- <li>a group of selectors containing an invalid selector is invalid.</li>
-</ul>
-
-<p>Specifications reusing Selectors must define how to handle parsing
- errors. (In the case of CSS, the entire rule in which the selector is
- used is dropped.)</p>
-
-<!-- Apparently all these references are out of date:
-<p>Implementations of this specification must behave as
-"recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>
-when parsing selectors and attempting matches. (In particular,
-implementations must assume the data is normalized and must not
-normalize it.) Normative rules for matching strings are defined in
-<a href="#refsCWWW">[CWWW]</a> and <a
-href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this
-specification.</p>-->
-
-<h2><a name=Tests></a>14. Tests</h2>
-
-<p>This specification has <a
- href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
- suite</a> allowing user agents to verify their basic conformance to
- the specification. This test suite does not pretend to be exhaustive
- and does not cover all possible combined cases of Selectors.</p>
-
-<h2><a name=ACKS></a>15. Acknowledgements</h2>
-
-<p>The CSS working group would like to thank everyone who has sent
- comments on this specification over the years.</p>
-
-<p>The working group would like to extend special thanks to Donna
- McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed
- the final editorial review.</p>
-
-<h2><a name=references>16. References</a></h2>
-
-<dl class="refs">
-
- <dt>[CSS1]
- <dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading
- Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised
- 11 Jan 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>)
-
- <dt>[CSS21]
- <dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon
- Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision
- 1</cite>", W3C Working Draft, 13 June 2005
- <dd>(<code><a
- href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>)
-
- <dt>[CWWW]
- <dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau,
- Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model
- for the World Wide Web</cite>", W3C Recommendation, 15 February 2005
- <dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>)
-
- <dt>[FLEX]
- <dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner
- Generator</cite>", Version 2.3.7, ISBN 1882114213
-
- <dt>[HTML4]
- <dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs,
- editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24
- December 1999
- <dd>
- (<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>)
-
- <dt>[MATH]
- <dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical
- Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7
- July 1999
- <dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>)
-
- <dt>[RFC3066]
- <dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the
- Identification of Languages</cite>", Request for Comments 3066, January
- 2001
- <dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)
-
- <dt>[STTS]
- <dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation
- Sheets 3</cite>", Electricité de France, submission to the W3C,
- 11 November 1998
- <dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>)
-
- <dt>[SVG]
- <dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean
- Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1
- Specification</cite>", W3C Recommendation, 14 January 2003
- <dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>)
-
- <dt>[UNICODE]</dt>
- <dd><a name="refsUNICODE"></a> <cite><a
- href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode
- Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA,
- Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a
- href="http://www.unicode.org/versions/Unicode4.0.1/">Unicode
- 4.0.1</a> and <a
- href="http://www.unicode.org/versions/Unicode4.1.0/">Unicode
- 4.1.0</a>.
- <dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)
- </dd>
-
- <dt>[XML10]
- <dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,
- Eve Maler, François Yergeau, editors; "<cite>Extensible Markup
- Language (XML) 1.0 (Third Edition)</cite>", W3C Recommendation, 4
- February 2004
- <dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>)
-
- <dt>[XMLNAMES]
- <dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman,
- editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14
- January 1999
- <dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>)
-
- <dt>[YACC]
- <dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another
- compiler compiler</cite>", Technical Report, Murray Hill, 1975
-
-</dl>
-</div>
-</body>
-</html>
diff --git a/samples/src/main/java/gwtquery/samples/public/racetrack.html b/samples/src/main/java/gwtquery/samples/public/racetrack.html deleted file mode 100644 index 3ed9adab..00000000 --- a/samples/src/main/java/gwtquery/samples/public/racetrack.html +++ /dev/null @@ -1,73 +0,0 @@ -<html> -<head> - <title>Benchmark Racetrack</title> - <script type="text/javascript"> - var horses = {}; - - window.parent.moveHorse = function(id, amt) { - var elt = document.getElementById(id + "horse"); - var pos = horses[id]; - if (!pos) { - pos = horses[id] = 0; - } - horses[id] = pos + amt; - elt.style.left = '' + horses[id] + 'px'; - } - - window.parent.flagWinner = function(id) { - var img = document.createElement("img"); - img.src = "animated-flag.gif"; - var elt = document.getElementById(id + "horse"); - elt.appendChild(img); - img.style.position = 'fixed'; - img.style.left = horses[id]; - } - </script> - <style type="text/css"> - img.himg { - height: 55px; - } - img.logo { - max-width: 100px; - } - - .horse { - position: relative; - } - - .horse span { - font-weight: bold; - font-size: 150%; - color: white; /*left: -70px;*/ - /*top: -30px;*/ - /*position: relative;*/ - } - </style> -</head> -<body style="overflow: hidden"> -<div id="racefield" - style="width:790px; background-image: url(grass-texture-small.jpg); background-repeat: repeat;"> - <div id="gwthorse" class="horse"> - <nobr><img class="himg" src="horse.gif"><img class="logo" src="gwt-logo-cs.gif"> - </nobr> - </div> - <div id="dgwthorse" class="horse"> - <nobr><img class="himg" src="horse.gif"><img class="logo" src="gwt-logo-cs.gif"> - </nobr> - </div> - <div id="jqueryhorse" class="horse"> - <nobr><img class="himg" src="horse.gif"><img class="logo" src="logo_jquery.gif"> - </nobr> - </div> - <div id="dojohorse" class="horse"> - - <img class="himg" src="horse.gif"><img class="logo" src="dojo-logo-text.gif"></nobr> - </div> - <div id="prototypehorse" class="horse"> - - <img class="himg" src="horse.gif"><img class="logo" src="prototype_logo.gif"></nobr> - </div> - -</div> -</body> -</html>
\ No newline at end of file |
