- + diff --git a/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java b/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java index be1e1ec1..d70235c2 100644 --- a/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java +++ b/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java @@ -1,12 +1,12 @@ /* * Copyright 2011, The gwtquery team. - * + * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a copy of * the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the @@ -29,39 +29,39 @@ import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; public class AnimationsSample implements EntryPoint { - + public void onModuleLoad() { doMoveAnimation(); doColorAnimation(); - - $("#stopMove").click(new Function(){ + + $("#stopMove").click(new Function(){ public void f() { $(".foo").clearQueue().stop(); - + } }); - - $("#stopColor").click(new Function(){ + + $("#stopColor").click(new Function(){ public void f() { $(".foo").clearQueue("colorQueue"); } }); - - $("#startMove").click(new Function(){ + + $("#startMove").click(new Function(){ public void f() { $(".foo").css(CSS.LEFT.with(Length.px(0))); doMoveAnimation(); } }); - - $("#startColor").click(new Function(){ + + $("#startColor").click(new Function(){ public void f() { doColorAnimation(); } }); } - + private void doColorAnimation(){ $(".foo") .queue("colorQueue", lazy().css(CSS.BACKGROUND_COLOR.with(RGBColor.RED)).dequeue("colorQueue").done()) @@ -74,15 +74,15 @@ public class AnimationsSample implements EntryPoint { doColorAnimation(); $(".foo").dequeue("colorQueue"); } - + @Override public void cancel(Element e) { $(".foo").clearQueue().stop(); } }); - + } - + private void doMoveAnimation(){ $(".foo").animate(Properties.create("{left:'+=1000'}"), 2000, Easing.SWING) .delay(500) @@ -94,6 +94,6 @@ public class AnimationsSample implements EntryPoint { $(".foo").dequeue(); } }); - + } } diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java index b6de78c2..1bb73954 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java @@ -1,2409 +1,2409 @@ -/* - * Copyright 2011, The gwtquery team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a copy of - * the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - */ -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.core.client.Scheduler; -import com.google.gwt.core.client.Scheduler.RepeatingCommand; -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Selectors.DeferredSelector; -import com.google.gwt.query.client.impl.SelectorEngineCssToXPath; -import com.google.gwt.query.client.impl.SelectorEngineImpl; -import com.google.gwt.query.client.impl.SelectorEngineNative; -import com.google.gwt.query.client.impl.SelectorEngineNativeIE8; -import com.google.gwt.query.client.impl.SelectorEngineNativeMin; -import com.google.gwt.query.client.impl.SelectorEngineNativeMinIE8; -import com.google.gwt.query.client.impl.SelectorEngineSizzle; -import com.google.gwt.query.client.impl.SelectorEngineSizzleIE; -import com.google.gwt.query.client.impl.research.SelectorEngineJS; -import com.google.gwt.query.client.impl.research.SelectorEngineSizzleGwt; -import com.google.gwt.query.client.impl.research.SelectorEngineXPath; -import com.google.gwt.user.client.DOM; -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 { - - public interface Benchmark { - String getId(); - String getName(); - int runSelector(DeferredSelector dq); - } - - /** - * Benchmark for dynamic selectors - */ - private class DynamicBenchmark implements Benchmark { - - protected SelectorEngineImpl engine; - private String id; - - DynamicBenchmark(SelectorEngineImpl engine, String name) { - this.id = name; - this.engine = engine; - } - - public String getId() { - return id; - } - - public String getName() { - String name = engine.getClass().getName().replaceAll("^.*\\.", ""); - return name; - } - - public int runSelector(DeferredSelector dq) { - return engine.select(dq.getSelector(), gwtiframe).getLength(); - } - } - - /** - * Benchmark for the compiled selectors - */ - private class GQueryCompiledBenchmark implements Benchmark { - - String id; - String name; - - GQueryCompiledBenchmark(String id) { - this.id = id; - } - - public String getId() { - return id; - } - - public String getName() { - if (name == null) { - MySelectors s = GWT.create(MySelectors.class); - s.body(document); - name = s.getClass().getName().replaceAll("^.*_", ""); - if (s.isDegradated()) { - name += " [degradated]"; - } - } - return name; - } - - public int runSelector(DeferredSelector dq) { - return dq.runSelector(gwtiframe).getLength(); - } - } - - /** - * Benchmark for external libraries - */ - private class IframeBenchmark implements Benchmark { - private String id; - - IframeBenchmark(String name) { - this.id = name; - } - - public String getId() { - return id; - } - - public String getName() { - return id; - } - - public int runSelector(DeferredSelector dq) { - return runSelector(id, dq.getSelector()); - } - - public native int runSelector(String id, String selector) /*-{ - return eval("$wnd." + id + "benchmark('" + selector + "')"); - }-*/; - } - - public static native void exportIframeReadyCallback(GwtQueryBenchModule bench) /*-{ - $wnd.iframebench_ready_callback = function() { - bench.@gwtquery.samples.client.GwtQueryBenchModule::iframeReadyCallback()(); - }; - }-*/; - - private boolean ask = true; - - private Function askBenchMarks = new Function(){ - public void f() { - if (!running && ask) { - selectPanel.center(); - } else { - runBenchMarks.f(); - } - } - }; - - /** - * List of available benchmarks. - */ - private final Benchmark[] benchmarks = new Benchmark[] { - new GQueryCompiledBenchmark("gwt_compiled"), - new DynamicBenchmark((SelectorEngineImpl)GWT.create(SelectorEngineImpl.class), "gwt_dynamic"), - new DynamicBenchmark(new SelectorEngineSizzle(), "gwt_sizzle_jsni"), - new DynamicBenchmark(new SelectorEngineSizzleIE(), "gwt_sizzle_ie_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 DynamicBenchmark(new SelectorEngineNative(), "gwt_native"), - new DynamicBenchmark(new SelectorEngineNativeIE8(), "gwt_nativeIE8"), - new DynamicBenchmark(new SelectorEngineNativeMin(), "gwt_native_min"), - new DynamicBenchmark(new SelectorEngineNativeMinIE8(), "gwt_native_minIE8"), - 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"}; - - private DeferredSelector ds[]; - - private FlexTable grid = new FlexTable(); - - private Element gwtiframe; - private int min_time = 200; - private boolean running = false; - /** - * Main function to run all the selected benchmarks - */ - private Function runBenchMarks = new Function() { - public void f() { - - // Force to stop the race - if (running) { - running = false; - $("#startrace").text("Run Again"); - return; - } - running = true; - - selectedBenchmarks = readBenchmarkSelection(); - selectPanel.hide(); - $("#startrace").text("Stop the race"); - $("#results").show(); - - initResultsTable(ds, selectedBenchmarks); - initTrack(selectedBenchmarks); - - Scheduler.get().scheduleIncremental(new RepeatingCommand() { - 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; - - public boolean execute() { - // The race has been stopped - if (!running) { - return false; - } - if (benchMarkNumber >= selectedBenchmarks.length) { - benchMarkNumber = 0; - numCalls = 0; - row ++; - - moveHorses(selectedBenchmarks, row, totalTimes); - setResultClass(selectorNumber, winner); - - selectorNumber++; - winner = -1; - winTime = Double.MAX_VALUE; - if (selectorNumber >= ds.length) { - double min = Double.MAX_VALUE; - for (int i = 0; i < totalTimes.length; i++) { - if (totalTimes[i] < min) { - min = totalTimes[i]; - } - } - - 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").text("Run Again"); - setResultClass(selectorNumber, i); - } - } - return false; - } - } - DeferredSelector d = ds[selectorNumber]; - long start = System.currentTimeMillis(); - int num = 0; - long end = start; - Benchmark m = selectedBenchmarks[benchMarkNumber]; - double runtime = min_time; - int found = 0; - try { - do { - num += m.runSelector(d); - 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) { - e.printStackTrace(); - found = -1; - } - runTimes[benchMarkNumber] = runtime; - d(selectorNumber, benchMarkNumber, runtime, found); - totalTimes[benchMarkNumber] += runtime; - numCalls = 0; - benchMarkNumber++; - return true; - } - }); - } - }; - private Benchmark[] selectedBenchmarks; - private PopupPanel selectPanel = new PopupPanel() {{ - addStyleName("spanel"); - }}; - private PopupPanel helpPanel = new PopupPanel() {{ - setAutoHideEnabled(true); - setWidget(new HTML($("#help").html())); - addStyleName("help"); - }}; - private boolean shareIframes = true; - - private double trackWidth; - - private boolean useTrack = true; - - public void iframeReadyCallback() { - writeTestContent($(".ibench").contents().find("body").get(0)); - gwtiframe = $(".ibench").eq(0).contents().get(0); - $("#startrace").text("Start the race"); - $("#startrace").click(ask ? askBenchMarks: runBenchMarks); - $("#about").click(new Function(){ - public void f() { - helpPanel.center(); - } - }); - } - - /** - * EntryPoint - */ - public void onModuleLoad() { - - final MySelectors m = GWT.create(MySelectors.class); - - ds = 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; - } - - exportIframeReadyCallback(this); - initSelects(benchmarks); - initIFrames(); - $("#results").hide(); - - } - - 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); - } - - 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 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 = ""; - 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(); - } - } - - /** - * Reset the result table - */ - private void initResultsTable(DeferredSelector[] dg, Benchmark... benchs) { - int numRows = dg.length; - 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++) { - grid.setText(i+1, 0, dg[i].getSelector()); - for (int j = 0; j < benchs.length; j++) { - grid.setText(i+1, j+1, "-"); - } - } - } - - /** - * Initialize the selects to choose the benchmarks to run - */ - private void initSelects(Benchmark... benchs) { - String opt = "%ID%
"; - selectPanel.add(new HTML("

Make your selection

")); - 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() + " " + b.getName()).replaceAll("%SEL", "")); - } - g.append("
"); - $("#run").click(runBenchMarks); - selectPanel.hide(); - } - - /** - * Initialize the track with the horses - */ - private void initTrack(Benchmark... benchs) { - if (!useTrack) return; - String tpl = "

%ID%

"; - 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)); - } - - GQuery flag = $("

").appendTo(document); - - // These values are set in the css. - int horseHeight = 35; - int horseWidth = 150; - int flagWidth = 35; - - int height = horseHeight * (benchs.length + 1); - $("#racetrack").css("height", height + "px"); - - trackWidth = g.width() - horseWidth - flagWidth; - flag.hide(); - } - - /** - * 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); - } - double winnerPos = row * (double) trackWidth / (double) ds.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 Benchmark[] readBenchmarkSelection() { - ArrayList bs = new ArrayList(); - for (Element e : $("input", selectPanel.getElement()).elements()) { - String val = $(e).val().replaceAll(" .*$", ""); - if ($(e).prop("checked")) { - for (Benchmark b : benchmarks) { - if (b.getId().equals(val)) { - bs.add(b); - } - } - } - } - return bs.toArray(new Benchmark[bs.size()]); - } - - 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"); - } - - /** - * 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 += "

"; - ret += "

Selectors

"; - ret += " ."; - ret += "

W3C Working Draft 15 December 2005

"; - ret += "

This version:: "; - ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
Latest version:"; - ret += ": "; - ret += " http://www.w3.org/TR/css3-selectors"; - ret += "
Previous version:"; - ret += ": "; - ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; - ret += "
Editors:"; - ret += ": Daniel Glazman (Invited"; - ret += "; Tantek Çelik"; - ret += "; Ian"; - ret += " Hickson (Google)"; - ret += "; Peter Linss (former"; - ret += " editor, Netscape/AOL)"; - ret += "; John Williams (former editor, Quark, Inc.)"; - ret += "

"; - ret += "

"; - ret += " Copyright © 2005 W3C^®"; - ret += " (MIT, ERCIM, Keio), All Rights Reserved."; - ret += " liability,"; - ret += " trademark,"; - ret += " document"; - ret += " use rules apply."; - ret += "

"; - ret += "

Abstract

"; - ret += "

Selectors 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.

"; - ret += "

CSS (Cascading"; - ret += " Style Sheets) is a language for describing the rendering of HTML and XML 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 += "

Selectors define the following function:

"; - ret += "

expression ∗ element → boolean

"; - ret += "

That is, given an element and a selector, this specification"; - ret += " defines whether that element matches the selector.

"; - ret += "

These expressions can also be used, for instance, to select a set"; - ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; - ret += " language for transforming XML trees, uses this mechanism. [STTS]

"; - ret += "

Status of this document

"; - ret += "

This section describes the status of this document at the"; - ret += " of this technical report can be found in the W3C technical reports index at"; - ret += " http://www.w3.org/TR/.

"; - ret += "

This document describes the selectors that already exist in CSS1 and CSS2, and"; - ret += " also proposes new selectors for CSS3 and other languages that may need them.

"; - ret += "

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.

"; - ret += "

This specification is a last call working draft for the the CSS Working Group"; - ret += " (Style Activity). This"; - ret += " document is a revision of the Candidate"; - ret += " Recommendation dated 2001 November 13, and has incorporated"; - ret += " be demonstrable.

"; - ret += "

All persons are encouraged to review and implement this"; - ret += " specification and return comments to the (archived)"; - ret += " public mailing list www-style"; - ret += " (see instructions). W3C"; - ret += " The deadline for comments is 14 January 2006.

"; - ret += "

This is still a draft document and may be updated, replaced, or"; - ret += "

This document may be available in translation."; - ret += "

"; - ret += "

1. Introduction"; - ret += "
- 1.1. Dependencies
- 1.2. Terminology
- 1.3. Changes from CSS2
"; - ret += "
2. Selectors"; - ret += "
3. Case sensitivity"; - ret += "
4. Selector syntax"; - ret += "
5. Groups of selectors"; - ret += "
6. Simple selectors"; - ret += "
- 6.1. Type"; - ret += " selectors"; - ret += "
  - 6.1.1. Type"; - ret += " selectors and namespaces
  "; - ret += "
- 6.2."; - ret += " Universal selector"; - ret += "
  - 6.2.1. Universal selector and"; - ret += " namespaces
  "; - ret += "
- 6.3."; - ret += " Attribute selectors"; - ret += "
  - 6.3.1."; - ret += " values"; - ret += "
  - 6.3.2. Substring"; - ret += " matching attribute selectors"; - ret += "
  - 6.3.3."; - ret += " Attribute selectors and namespaces"; - ret += "
  - 6.3.4."; - ret += " Default attribute values in DTDs
  "; - ret += "
- 6.4. Class"; - ret += " selectors"; - ret += "
- 6.5. ID"; - ret += " selectors"; - ret += "
- 6.6."; - ret += " Pseudo-classes"; - ret += "
  - 6.6.1."; - ret += " Dynamic pseudo-classes"; - ret += "
  - 6.6.2. The"; - ret += " :target pseudo-class"; - ret += "
  - 6.6.3. The"; - ret += " :lang() pseudo-class"; - ret += "
  - 6.6.4. UI"; - ret += " element states pseudo-classes"; - ret += "
  - 6.6.5."; - ret += " Structural pseudo-classes"; - ret += "
    - :root"; - ret += " pseudo-class"; - ret += "
    - :nth-child()"; - ret += " pseudo-class"; - ret += "
    - :nth-last-child()"; - ret += "
    - :nth-of-type()"; - ret += " pseudo-class"; - ret += "
    - :nth-last-of-type()"; - ret += "
    - :first-child"; - ret += " pseudo-class"; - ret += "
    - :last-child"; - ret += " pseudo-class"; - ret += "
    - :first-of-type"; - ret += " pseudo-class"; - ret += "
    - :last-of-type"; - ret += " pseudo-class"; - ret += "
    - :only-child"; - ret += " pseudo-class"; - ret += "
    - :only-of-type"; - ret += " pseudo-class"; - ret += "
    - :empty"; - ret += " pseudo-class
    "; - ret += "
  - 6.6.7. The"; - ret += " negation pseudo-class
  "; - ret += "
"; - ret += "
7. Pseudo-elements"; - ret += "
- 7.1. The ::first-line"; - ret += " pseudo-element"; - ret += "
- 7.2. The ::first-letter"; - ret += " pseudo-element"; - ret += "
- 7.3. The ::selection"; - ret += " pseudo-element"; - ret += "
- 7.4. The ::before and ::after"; - ret += " pseudo-elements
"; - ret += "
8. Combinators"; - ret += "
- 8.1."; - ret += " Descendant combinators"; - ret += "
- 8.2. Child"; - ret += " combinators"; - ret += "
- 8.3. Sibling"; - ret += " combinators"; - ret += "
  - 8.3.1."; - ret += " Adjacent sibling combinator"; - ret += "
  - 8.3.2."; - ret += " General sibling combinator
  "; - ret += "
"; - ret += "
9. Calculating a selector's"; - ret += " specificity"; - ret += "
10. The grammar of"; - ret += " Selectors"; - ret += "
- 10.1. Grammar"; - ret += "
- 10.2. Lexical scanner"; - ret += "
"; - ret += "
11. Namespaces and down-level"; - ret += " clients"; - ret += "
12. Profiles"; - ret += "
13. Conformance and requirements"; - ret += "
14. Tests"; - ret += "
15. Acknowledgements"; - ret += "
16. References"; - ret += "

"; - ret += "

1. Introduction

"; - ret += "

1.1. Dependencies

"; - ret += "

Some features of this specification are specific to CSS, or have"; - ret += " specification, these have been described in terms of CSS2.1. [CSS21]

"; - ret += "

1.2. Terminology

"; - ret += "

All of the text of this specification is normative except"; - ret += " non-normative.

"; - ret += "

1.3. Changes from CSS2

"; - ret += "

This section is non-normative.

"; - ret += "

The main differences between the selectors in CSS2 and those in"; - ret += " Selectors are:"; - ret += "

the list of basic definitions (selector, group of selectors,"; - ret += " of simple selectors, and the term 'simple selector' is now used for"; - ret += "
an optional namespace component is now allowed in type element"; - ret += " selectors, the universal selector and attribute selectors"; - ret += "
a new combinator has been"; - ret += "
new simple selectors including substring matching attribute"; - ret += " selectors, and new pseudo-classes"; - ret += "
new pseudo-elements, and introduction of the '::' convention"; - ret += "
the grammar has been rewritten
profiles to be added to specifications integrating Selectors"; - ret += " and defining the set of selectors which is actually supported by"; - ret += "
Selectors are now a CSS3 Module and an independent"; - ret += "
the specification now has its own test suite

"; - ret += "

2. Selectors

"; - ret += "

This section is non-normative, as it merely summarizes the"; - ret += " following sections.

"; - ret += "

A Selector represents a structure. This structure can be used as a"; - ret += " HTML or XML fragment corresponding to that structure.

"; - ret += "

Selectors may range from simple element names to rich contextual"; - ret += " representations.

"; - ret += "

The following table summarizes the Selector syntax:

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal"; - ret += " selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a 'foo' attribute	Attribute"; - ret += " selectors	2
E[foo='bar']	an E element whose 'foo' attribute value is exactly"; - ret += "	Attribute"; - ret += " selectors	2
E[foo~='bar']	an E element whose 'foo' attribute value is a list of"; - ret += "	Attribute"; - ret += " selectors	2
E[foo^='bar']	an E element whose 'foo' attribute value begins exactly"; - ret += "	Attribute"; - ret += " selectors	3
E[foo$='bar']	an E element whose 'foo' attribute value ends exactly"; - ret += "	Attribute"; - ret += " selectors	3
E[foo*='bar']	an E element whose 'foo' attribute value contains the"; - ret += "	Attribute"; - ret += " selectors	3
E[hreflang\|='en']	an E element whose 'hreflang' attribute has a"; - ret += "	Attribute"; - ret += " selectors	2
E:root	an E element, root of the document	Structural"; - ret += " pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural"; - ret += " pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting"; - ret += "	Structural"; - ret += " pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural"; - ret += " pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting"; - ret += "	Structural"; - ret += " pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural"; - ret += " pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural"; - ret += " pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural"; - ret += " pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural"; - ret += " pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural"; - ret += " pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural"; - ret += " pseudo-classes	3
E:empty	an E element that has no children (including text"; - ret += "	Structural"; - ret += " pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of"; - ret += "	The link"; - ret += " pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user"; - ret += " action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target"; - ret += " pseudo-class	3
E:lang(fr)	an element of type E in language 'fr' (the document"; - ret += "	The :lang()"; - ret += " pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or"; - ret += "	The UI element states"; - ret += " pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)"; - ret += "	The UI element states"; - ret += " pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line"; - ret += " pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter"; - ret += " pseudo-element	1
E::selection	the portion of an E element that is currently"; - ret += "	The UI element"; - ret += " fragments pseudo-elements	3
E::before	generated content before an E element	The ::before"; - ret += " pseudo-element	2
E::after	generated content after an E element	The ::after"; - ret += " pseudo-element	2
E.warning	an E element whose class is"; - ret += "	Class"; - ret += " selectors	1
E#myid	an E element with ID equal to 'myid'.	ID"; - ret += " selectors	1
E:not(s)	an E element that does not match simple selector s	Negation"; - ret += " pseudo-class	3
E F	an F element descendant of an E element	Descendant"; - ret += " combinator	1
E > F	an F element child of an E element	Child"; - ret += " combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator"; - ret += "	2
E ~ F	an F element preceded by an E element	General sibling combinator"; - ret += "	3

"; - ret += "

The meaning of each selector is derived from the table above by"; - ret += " column.

"; - ret += "

3. Case sensitivity

"; - ret += "

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.

"; - ret += "

4. Selector syntax

"; - ret += "

A selector is a chain of one"; - ret += " or more sequences of simple selectors"; - ret += " separated by combinators.

"; - ret += "

A sequence of simple selectors"; - ret += " is a chain of simple selectors"; - ret += " that are not separated by a combinator. It"; - ret += " always begins with a type selector or a"; - ret += " universal selector. No other type"; - ret += " selector or universal selector is allowed in the sequence.

"; - ret += "

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, content selector, or pseudo-class. One pseudo-element may be appended to the last"; - ret += " sequence of simple selectors.

"; - ret += "

Combinators are: white space, 'greater-than"; - ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; - ret += " +) and 'tilde' (U+007E, ~). White"; - ret += " space may appear between a combinator and the simple selectors around"; - ret += " it. Only the characters 'space' (U+0020), 'tab'"; - ret += " never part of white space.

"; - ret += "

The elements of a document tree that are represented by a selector"; - ret += " are the subjects of the selector. 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.

"; - ret += "

An empty selector, containing no sequence of simple selectors and"; - ret += " no pseudo-element, is an invalid"; - ret += " selector.

"; - ret += "

5. Groups of selectors

"; - ret += "

When several selectors share the same declarations, they may be"; - ret += " grouped into a comma-separated list. (A comma is U+002C.)

"; - ret += "

CSS examples:

"; - ret += "

In this example, we condense three rules with identical"; - ret += " declarations into one. Thus,

"; - ret += "

h1 { font-family: sans-serif }";
-    ret += "      h3 { font-family: sans-serif }

"; - ret += "

is equivalent to:

"; - ret += "

h1, h2, h3 { font-family: sans-serif }

"; - ret += "

Warning: 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.

"; - ret += "

6. Simple selectors

"; - ret += "

6.1. Type selector

"; - ret += "

A type selector is the name of a document language"; - ret += " type in the document tree.

"; - ret += "

Example:

"; - ret += "

The following selector represents an h1 element in the"; - ret += " document tree:

"; - ret += "

h1

"; - ret += "

6.1.1. Type selectors and namespaces

"; - ret += "

Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; - ret += " (U+007C, |).

"; - ret += "

The namespace component may be left empty to indicate that the"; - ret += " selector is only to represent elements with no declared namespace.

"; - ret += "

An asterisk may be used for the namespace prefix, indicating that"; - ret += " with no namespace).

"; - ret += "

Element type selectors that have no namespace component (no"; - ret += " element's namespace (equivalent to '*|') unless a default"; - ret += " namespace.

"; - ret += "

A type selector containing a namespace prefix that has not been"; - ret += " previously declared is an invalid selector."; - ret += " language implementing Selectors. In CSS, such a mechanism is defined"; - ret += " in the General Syntax module.

"; - ret += "

In a namespace-aware client, element type selectors will only match"; - ret += " against the local"; - ret += " part"; - ret += " of the element's qualified"; - ret += " name. See below for notes about matching"; - ret += " behaviors in down-level clients.

"; - ret += "

In summary:

"; - ret += "

ns|E: elements with name E in namespace ns
*|E: elements with name E in any namespace, including those without any"; - ret += "
|E: elements with name E without any declared namespace
E: if no default namespace has been specified, this is equivalent to *|E."; - ret += "

"; - ret += "

CSS examples:

"; - ret += "

@namespace foo url(http://www.example.com);";
-    ret += "       h1 { color: green }

"; - ret += "

The first rule will match only h1 elements in the"; - ret += " 'http://www.example.com' namespace.

"; - ret += "

The second rule will match all elements in the"; - ret += " 'http://www.example.com' namespace.

"; - ret += "

The third rule will match only h1 elements without"; - ret += " any declared namespace.

"; - ret += "

The fourth rule will match h1 elements in any"; - ret += " namespace (including those without any declared namespace).

"; - ret += "

The last rule is equivalent to the fourth rule because no default"; - ret += " namespace has been defined.

"; - ret += "

6.2. Universal selector

"; - ret += "

The universal selector, written 'asterisk'"; - ret += " (*), represents the qualified name of any element"; - ret += " specified, see Universal selector and"; - ret += " Namespaces below.

"; - ret += "

If the universal selector is not the only component of a sequence"; - ret += " of simple selectors, the * may be omitted.

"; - ret += "

Examples:

"; - ret += "

*[hreflang|=en] and [hreflang|=en] are"; - ret += "
*.warning and .warning are equivalent,"; - ret += "
*#myid and #myid are equivalent.

"; - ret += "

Note: it is recommended that the"; - ret += " *, representing the universal selector, not be"; - ret += " omitted.

"; - ret += "

6.2.1. Universal selector and namespaces

"; - ret += "

The universal selector allows an optional namespace component. It"; - ret += " is used as follows:

"; - ret += "

ns|*: all elements in namespace ns
*|*: all elements
|*: all elements without any declared namespace
*: if no default namespace has been specified, this is equivalent to *|*."; - ret += "

"; - ret += "

A universal selector containing a namespace prefix that has not"; - ret += " been previously declared is an invalid"; - ret += " to the language implementing Selectors. In CSS, such a mechanism is"; - ret += " defined in the General Syntax module.

"; - ret += "

6.3. Attribute selectors

"; - ret += "

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.

"; - ret += "

6.3.1. Attribute presence and values"; - ret += " selectors

"; - ret += "

CSS2 introduced four attribute selectors:

"; - ret += "

[att]"; - ret += ": Represents an element with the att attribute, whatever the"; - ret += "
[att=val]: Represents an element with the att attribute whose value is"; - ret += "
[att~=val]: Represents an element with the att attribute whose value is"; - ret += " a whitespace-separated list of words, one"; - ret += " represent anything (since the words are separated by"; - ret += "
[att|=val]"; - ret += ": Represents an element with the att attribute, its value"; - ret += " matches (e.g., the hreflang attribute on the"; - ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; - ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; - ret += "

"; - ret += "

Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names and values in selectors depends on"; - ret += " the document language.

"; - ret += "

Examples:

"; - ret += "

The following attribute selector represents an h1"; - ret += " element that carries the title attribute, whatever its"; - ret += " value:

"; - ret += "

h1[title]

"; - ret += "

In the following example, the selector represents a"; - ret += " span element whose class attribute has"; - ret += " exactly the value 'example':

"; - ret += "

span[class='example']

"; - ret += "

Multiple attribute selectors can be used to represent several"; - ret += " attribute. Here, the selector represents a span element"; - ret += " whose hello attribute has exactly the value 'Cleveland'"; - ret += " and whose goodbye attribute has exactly the value"; - ret += " 'Columbus':

"; - ret += "

span[hello='Cleveland'][goodbye='Columbus']

"; - ret += "

The following selectors illustrate the differences between '='"; - ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; - ret += " second selector will only represent an a element with"; - ret += " an href attribute having the exact value"; - ret += " 'http://www.w3.org/'.

"; - ret += "

a[rel~='copyright']";
-    ret += "      a[href='http://www.w3.org/']

"; - ret += "

The following selector represents a link element"; - ret += " whose hreflang attribute is exactly 'fr'.

"; - ret += "

link[hreflang=fr]

"; - ret += "

The following selector represents a link element for"; - ret += " which the values of the hreflang attribute begins with"; - ret += " 'en', including 'en', 'en-US', and 'en-cockney':

"; - ret += "

link[hreflang|='en']

"; - ret += "

Similarly, the following selectors represents a"; - ret += " DIALOGUE element whenever it has one of two different"; - ret += " values for an attribute character:

"; - ret += "

DIALOGUE[character=romeo]";
-    ret += "      DIALOGUE[character=juliet]

"; - ret += "

6.3.2. Substring matching attribute"; - ret += " selectors

"; - ret += "

Three additional attribute selectors are provided for matching"; - ret += " substrings in the value of an attribute:

"; - ret += "

[att^=val]: Represents an element with the att attribute whose value"; - ret += "
[att$=val]"; - ret += ": Represents an element with the att attribute whose value"; - ret += "
[att*=val]"; - ret += ": Represents an element with the att attribute whose value"; - ret += "

"; - ret += "

Attribute values must be identifiers or strings. The"; - ret += " case-sensitivity of attribute names in selectors depends on the"; - ret += " document language.

"; - ret += "

Examples:

"; - ret += "

The following selector represents an HTML object,"; - ret += " image:

"; - ret += "

object[type^='image/']

"; - ret += "

The following selector represents an HTML anchor a with an"; - ret += " href attribute whose value ends with '.html'.

"; - ret += "

a[href$='.html']

"; - ret += "

The following selector represents an HTML paragraph with a"; - ret += " title"; - ret += " attribute whose value contains the substring 'hello'

"; - ret += "

p[title*='hello']

"; - ret += "

6.3.3. Attribute selectors and namespaces

"; - ret += "

Attribute selectors allow an optional namespace component to the"; - ret += " separator 'vertical bar' (|). In keeping with"; - ret += " apply to attributes, therefore attribute selectors without a namespace"; - ret += " (equivalent to '|attr'). An asterisk may be used for the"; - ret += "

An attribute selector with an attribute name containing a namespace"; - ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; - ret += " a namespace prefix is left up to the language implementing Selectors."; - ret += "

"; - ret += "

CSS examples:

"; - ret += "

@namespace foo 'http://www.example.com';";
-    ret += "      [att] { color: green }

"; - ret += "

The first rule will match only elements with the attribute"; - ret += " att in the 'http://www.example.com' namespace with the"; - ret += " value 'val'.

"; - ret += "

The second rule will match only elements with the attribute"; - ret += " att regardless of the namespace of the attribute"; - ret += " (including no declared namespace).

"; - ret += "

The last two rules are equivalent and will match only elements"; - ret += " with the attribute att where the attribute is not"; - ret += " declared to be in a namespace.

"; - ret += "

6.3.4. Default attribute values in DTDs

"; - ret += "

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.

"; - ret += "

More precisely, a UA is not required to read an 'external"; - ret += " subset' of the DTD but is required to look for default"; - ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

"; - ret += "

A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; - ret += " required to use its built-in knowledge of the XHTML DTD.)

"; - ret += "

Note: Typically, implementations"; - ret += " choose to ignore external subsets.

"; - ret += "

Example:

"; - ret += "

Consider an element EXAMPLE with an attribute 'notation' that has a"; - ret += " default value of 'decimal'. The DTD fragment might be

"; - ret += "

<!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>

"; - ret += "

If the style sheet contains the rules

"; - ret += "

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }

"; - ret += "

the first rule will not match elements whose 'notation' attribute"; - ret += " attribute selector for the default value must be dropped:

"; - ret += "

EXAMPLE                   { /*... default property settings ...*/ }";
-    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }

"; - ret += "

Here, because the selector EXAMPLE[notation=octal] is"; - ret += " cases' style rules.

"; - ret += "

6.4. Class selectors

"; - ret += "

Working with HTML, authors may use the period (U+002E,"; - ret += " .) notation as an alternative to the ~="; - ret += " notation when representing the class attribute. Thus, for"; - ret += " HTML, div.value and div[class~=value] have"; - ret += " 'period' (.).

"; - ret += "

UAs may apply selectors using the period (.) notation in XML"; - ret += " 1.0 [SVG] describes the SVG"; - ret += " 'class' attribute and how a UA should interpret it, and"; - ret += " similarly MathML 1.01 [MATH] describes the MathML"; - ret += " 'class' attribute.)

"; - ret += "

CSS examples:

"; - ret += "

We can assign style information to all elements with"; - ret += " class~='pastoral' as follows:

"; - ret += "

*.pastoral { color: green }  /* all elements with class~=pastoral */

"; - ret += "

or just

"; - ret += "

.pastoral { color: green }  /* all elements with class~=pastoral */

"; - ret += "

The following assigns style only to H1 elements with"; - ret += " class~='pastoral':

"; - ret += "

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

"; - ret += "

Given these rules, the first H1 instance below would not have"; - ret += " green text, while the second would:

"; - ret += "

<H1>Not green</H1>";
-    ret += "      <H1 class='pastoral'>Very green</H1>

"; - ret += "

To represent a subset of 'class' values, each value must be preceded"; - ret += " by a '.', in any order.

"; - ret += "

CSS example:

"; - ret += "

The following rule matches any P element whose 'class' attribute"; - ret += " has been assigned a list of whitespace-separated values that includes"; - ret += " 'pastoral' and 'marine':

"; - ret += "

p.pastoral.marine { color: green }

"; - ret += "

This rule matches when class='pastoral blue aqua"; - ret += " marine' but does not match for class='pastoral"; - ret += " blue'.

"; - ret += "

Note: Because CSS gives considerable"; - ret += " not.

"; - ret += "

Note: If an element has multiple"; - ret += " this specification.

"; - ret += "

6.5. ID selectors

"; - ret += "

Document languages may contain attributes that are declared to be"; - ret += " applies.

"; - ret += "

An ID-typed attribute of a document language allows authors to"; - ret += " ID selectors represent an element instance based on its identifier. An"; - ret += " #) immediately followed by the ID value, which must be an"; - ret += " identifier.

"; - ret += "

Selectors does not specify how a UA knows the ID-typed attribute of"; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following ID selector represents an h1 element"; - ret += " whose ID-typed attribute has the value 'chapter1':

"; - ret += "

h1#chapter1

"; - ret += "

The following ID selector represents any element whose ID-typed"; - ret += " attribute has the value 'chapter1':

"; - ret += "

#chapter1

"; - ret += "

The following selector represents any element whose ID-typed"; - ret += " attribute has the value 'z98y'.

"; - ret += "

*#z98y

"; - ret += "

Note. In XML 1.0 [XML10], the information about which attribute"; - ret += " should use normal attribute selectors instead:"; - ret += " [name=p371] instead of #p371. Elements in"; - ret += " XML 1.0 documents without a DTD do not have IDs at all.

"; - ret += "

If an element has multiple ID attributes, all of them must be"; - ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

"; - ret += "

6.6. Pseudo-classes

"; - ret += "

The pseudo-class concept is introduced to permit selection based on"; - ret += " expressed using the other simple selectors.

"; - ret += "

A pseudo-class always consists of a 'colon'"; - ret += " (:) followed by the name of the pseudo-class and"; - ret += " optionally by a value between parentheses.

"; - ret += "

Pseudo-classes are allowed in all sequences of simple selectors"; - ret += " sequences of simple selectors, after the leading type selector or"; - ret += " document.

"; - ret += "

6.6.1. Dynamic pseudo-classes

"; - ret += "

Dynamic pseudo-classes classify elements on characteristics other"; - ret += " that cannot be deduced from the document tree.

"; - ret += "

Dynamic pseudo-classes do not appear in the document source or"; - ret += " document tree.

"; - ret += "

The link pseudo-classes: :link and :visited

"; - ret += "

User agents commonly display unvisited links differently from"; - ret += " previously visited ones. Selectors"; - ret += " provides the pseudo-classes :link and"; - ret += " :visited to distinguish them:

"; - ret += "

The :link pseudo-class applies to links that have"; - ret += "
The :visited pseudo-class applies once the link has"; - ret += "

"; - ret += "

After some amount of time, user agents may choose to return a"; - ret += " visited link to the (unvisited) ':link' state.

"; - ret += "

The two states are mutually exclusive.

"; - ret += "

Example:

"; - ret += "

The following selector represents links carrying class"; - ret += " external and already visited:

"; - ret += "

a.external:visited

"; - ret += "

Note: It is possible for style sheet"; - ret += "

UAs may therefore treat all links as unvisited links, or implement"; - ret += " and unvisited links differently.

"; - ret += "

The user action pseudo-classes"; - ret += " :hover, :active, and :focus

"; - ret += "

Interactive user agents sometimes change the rendering in response"; - ret += " to user actions. Selectors provides"; - ret += " acting on.

"; - ret += "

The :hover pseudo-class applies while the user"; - ret += " element. User agents not that do not support interactive"; - ret += " media do not have to support this pseudo-class. Some conforming"; - ret += " user agents that support interactive"; - ret += " media may not be able to support this pseudo-class (e.g., a pen"; - ret += "
The :active pseudo-class applies while an element"; - ret += "
The :focus pseudo-class applies while an element"; - ret += "

"; - ret += "

There may be document language or implementation specific limits on"; - ret += " which elements can become :active or acquire"; - ret += " :focus.

"; - ret += "

These pseudo-classes are not mutually exclusive. An element may"; - ret += " match several pseudo-classes at the same time.

"; - ret += "

Selectors doesn't define if the parent of an element that is"; - ret += " ':active' or ':hover' is also in that state.

"; - ret += "

Examples:

"; - ret += "

a:link    /* unvisited links */";
-    ret += "      a:active  /* active links */

"; - ret += "

An example of combining dynamic pseudo-classes:

"; - ret += "

a:focus";
-    ret += "      a:focus:hover

"; - ret += "

The last selector matches a elements that are in"; - ret += " the pseudo-class :focus and in the pseudo-class :hover.

"; - ret += "

Note: An element can be both ':visited'"; - ret += " and ':active' (or ':link' and ':active').

"; - ret += "

6.6.2. The target pseudo-class :target

"; - ret += "

Some URIs refer to a location within a resource. This kind of URI"; - ret += " identifier (called the fragment identifier).

"; - ret += "

URIs with fragment identifiers link to a certain element within the"; - ret += " pointing to an anchor named section_2 in an HTML"; - ret += " document:

"; - ret += "

http://example.com/html/top.html#section_2

"; - ret += "

A target element can be represented by the :target"; - ret += " the document has no target element.

"; - ret += "

Example:

"; - ret += "

p.note:target

"; - ret += "

This selector represents a p element of class"; - ret += " note that is the target element of the referring"; - ret += " URI.

"; - ret += "

CSS example:

"; - ret += "

Here, the :target pseudo-class is used to make the"; - ret += " target element red and place an image before it, if there is one:

"; - ret += "

*:target { color : red }";
-    ret += "      *:target::before { content : url(target.png) }

"; - ret += "

6.6.3. The language pseudo-class :lang

"; - ret += "

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 [HTML4], the language is determined by a"; - ret += " combination of the lang attribute, the meta"; - ret += " headers). XML uses an attribute called xml:lang, and"; - ret += " the language.

"; - ret += "

The pseudo-class :lang(C) represents an element that"; - ret += " :lang() selector is based solely on the identifier C"; - ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; - ret += " selectors. The identifier C does not have to be a valid language"; - ret += " name.

"; - ret += "

C must not be empty. (If it is, the selector is invalid.)

"; - ret += "

Note: It is recommended that"; - ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; - ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; - ret += " 'FAQ: Two-letter or three-letter language codes.'

"; - ret += "

Examples:

"; - ret += "

The two following selectors represent an HTML document that is in"; - ret += " Belgian, French, or German. The two next selectors represent"; - ret += " q quotations in an arbitrary element in Belgian, French,"; - ret += " or German.

"; - ret += "

html:lang(fr-be)";
-    ret += "      :lang(de) > q

"; - ret += "

6.6.4. The UI element states pseudo-classes

"; - ret += "

The :enabled and :disabled pseudo-classes

"; - ret += "

The :enabled pseudo-class allows authors to customize"; - ret += " an enabled input element without also specifying what it"; - ret += " would look like when it was disabled.

"; - ret += "

Similar to :enabled, :disabled allows the"; - ret += " element should look.

"; - ret += "

Most elements will be neither enabled nor disabled. An element is"; - ret += " presently activate it or transfer focus to it.

"; - ret += "

The :checked pseudo-class

"; - ret += "

Radio and checkbox elements can be toggled by the user. Some menu"; - ret += " toggled 'on' the :checked pseudo-class applies. The"; - ret += " :checked pseudo-class initially applies to such elements"; - ret += " that have the HTML4 selected and checked"; - ret += " attributes as described in Section"; - ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; - ret += " elements in which case the :checked pseudo-class would no"; - ret += " longer apply. While the :checked pseudo-class is dynamic"; - ret += " on the presence of the semantic HTML4 selected and"; - ret += " checked attributes, it applies to all media."; - ret += "

The :indeterminate pseudo-class

"; - ret += "

Radio and checkbox elements can be toggled by the user, but are"; - ret += " This can be due to an element attribute, or DOM manipulation.

"; - ret += "

A future version of this specification may introduce an"; - ret += " :indeterminate pseudo-class that applies to such elements."; - ret += "

"; - ret += "

6.6.5. Structural pseudo-classes

"; - ret += "

Selectors introduces the concept of structural"; - ret += " pseudo-classes to permit selection based on extra information that"; - ret += " the document tree but cannot be represented by other simple selectors or"; - ret += "

Note that standalone pieces of PCDATA (text nodes in the DOM) are"; - ret += "

:root pseudo-class

"; - ret += "

The :root pseudo-class represents an element that is"; - ret += " HTML element."; - ret += "

:nth-child() pseudo-class

"; - ret += "

The"; - ret += " :nth-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " before it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. In"; - ret += " other words, this matches the bth child of an element after"; - ret += " all the children have been split into groups of a elements"; - ret += " each. For example, this allows the selectors to address every other"; - ret += " of paragraph text in a cycle of four. The a and"; - ret += " b values must be zero, negative integers or positive"; - ret += "

In addition to this, :nth-child() can take"; - ret += " 'odd' and 'even' as arguments instead."; - ret += " 'odd' has the same signification as 2n+1,"; - ret += " and 'even' has the same signification as 2n."; - ret += "

"; - ret += "

Examples:

"; - ret += "

tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
-    ret += "      p:nth-child(4n+4) { color: purple; }

"; - ret += "

When a=0, no repeating is used, so for example"; - ret += " :nth-child(0n+5) matches only the fifth child. When"; - ret += " a=0, the an part need not be"; - ret += " :nth-child(b) and the last example simplifies"; - ret += " to :nth-child(5)."; - ret += "

"; - ret += "

Examples:

"; - ret += "

foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
-    ret += "      foo:nth-child(1)      /* same */

"; - ret += "

When a=1, the number may be omitted from the rule."; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selectors are therefore equivalent:

"; - ret += "

bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
-    ret += "      bar                   /* same but lower specificity (0,0,1) */

"; - ret += "

If b=0, then every ath element is picked. In"; - ret += " such a case, the b part may be omitted."; - ret += "

"; - ret += "

Examples:

"; - ret += "

tr:nth-child(2n+0) /* represents every even row of an HTML table */";
-    ret += "      tr:nth-child(2n) /* same */

"; - ret += "

If both a and b are equal to zero, the"; - ret += " pseudo-class represents no element in the document tree.

"; - ret += "

The value a can be negative, but only the positive"; - ret += " values of an+b, for"; - ret += " n≥0, may represent an element in the document"; - ret += " tree.

"; - ret += "

Example:

"; - ret += "

html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */

"; - ret += "

When the value b is negative, the '+' character in the"; - ret += " character indicating the negative value of b).

"; - ret += "

Examples:

"; - ret += "

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

"; - ret += "

:nth-last-child() pseudo-class

"; - ret += "

The :nth-last-child(an+b)"; - ret += " an+b-1 siblings"; - ret += " after it in the document tree, for a given positive"; - ret += " integer or zero value of n, and has a parent element. See"; - ret += " :nth-child() pseudo-class for the syntax of its argument."; - ret += " It also accepts the 'even' and 'odd' values"; - ret += "

"; - ret += "

Examples:

"; - ret += "

tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
-    ret += "                                    counting from the last one */

"; - ret += "

:nth-of-type() pseudo-class

"; - ret += "

The :nth-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name before it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. In other words, this matches the bth child"; - ret += " groups of a elements each. See :nth-child() pseudo-class"; - ret += " 'even' and 'odd' values."; - ret += "

"; - ret += "

CSS example:

"; - ret += "

This allows an author to alternate the position of floated images:

"; - ret += "

img:nth-of-type(2n+1) { float: right; }";
-    ret += "      img:nth-of-type(2n) { float: left; }

"; - ret += "

:nth-last-of-type() pseudo-class

"; - ret += "

The :nth-last-of-type(an+b)"; - ret += " an+b-1 siblings with the same"; - ret += " element name after it in the document tree, for a"; - ret += " given zero or positive integer value of n, and has a"; - ret += " parent element. See :nth-child() pseudo-class for the"; - ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; - ret += "

"; - ret += "

Example:

"; - ret += "

To represent all h2 children of an XHTML"; - ret += " body except the first and last, one could use the"; - ret += " following selector:

"; - ret += "

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

"; - ret += "

In this case, one could also use :not(), although the"; - ret += " selector ends up being just as long:

"; - ret += "

body > h2:not(:first-of-type):not(:last-of-type)

"; - ret += "

:first-child pseudo-class

"; - ret += "

Same as :nth-child(1). The :first-child"; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element that is"; - ret += " the first child of a div element:

"; - ret += "

div > p:first-child

"; - ret += "

This selector can represent the p inside the"; - ret += " div of the following fragment:

"; - ret += "

<p> The last P before the note.</p>";
-    ret += "      </div>

"; - ret += " but cannot represent the second p in the following"; - ret += "

<p> The last P before the note.</p>";
-    ret += "      </div>

"; - ret += "

The following two selectors are usually equivalent:

"; - ret += "

* > a:first-child /* a is first child of any element */";
-    ret += "      a:first-child /* Same (assuming a is not the root element) */

"; - ret += "

:last-child pseudo-class

"; - ret += "

Same as :nth-last-child(1). The :last-child"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following selector represents a list item li that"; - ret += " is the last child of an ordered list ol."; - ret += "

ol > li:last-child

"; - ret += "

:first-of-type pseudo-class

"; - ret += "

Same as :nth-of-type(1). The :first-of-type"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following selector represents a definition title"; - ret += " dt inside a definition list dl, this"; - ret += " dt being the first of its type in the list of children of"; - ret += " its parent element.

"; - ret += "

dl dt:first-of-type

"; - ret += "

It is a valid description for the first two dt"; - ret += " elements in the following example but not for the third one:

"; - ret += "

<dl>";
-    ret += "      </dl>

"; - ret += "

:last-of-type pseudo-class

"; - ret += "

Same as :nth-last-of-type(1). The"; - ret += " :last-of-type pseudo-class represents an element that is"; - ret += " element.

"; - ret += "

Example:

"; - ret += "

The following selector represents the last data cell"; - ret += " td of a table row.

"; - ret += "

tr > td:last-of-type

"; - ret += "

:only-child pseudo-class

"; - ret += "

Represents an element that has a parent element and whose parent"; - ret += " :first-child:last-child or"; - ret += " :nth-child(1):nth-last-child(1), but with a lower"; - ret += " specificity.

"; - ret += "

:only-of-type pseudo-class

"; - ret += "

Represents an element that has a parent element and whose parent"; - ret += " as :first-of-type:last-of-type or"; - ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; - ret += " specificity.

"; - ret += "

:empty pseudo-class

"; - ret += "

The :empty pseudo-class represents an element that has"; - ret += " empty or not.

"; - ret += "

Examples:

"; - ret += "

p:empty is a valid representation of the following fragment:"; - ret += "

"; - ret += "

<p></p>

"; - ret += "

foo:empty is not a valid representation for the"; - ret += " following fragments:

"; - ret += "

<foo>bar</foo>

"; - ret += "

<foo><bar>bla</bar></foo>

"; - ret += "

<foo>this is not <bar>:empty</bar></foo>

"; - ret += "

6.6.6. Blank

"; - ret += " "; - ret += "

This section intentionally left blank.

"; - ret += " "; - ret += "

6.6.7. The negation pseudo-class

"; - ret += "

The negation pseudo-class, :not(X), is a"; - ret += " functional notation taking a simple"; - ret += " selector (excluding the negation pseudo-class itself and"; - ret += " "; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following CSS selector matches all button"; - ret += " elements in an HTML document that are not disabled.

"; - ret += "

button:not([DISABLED])

"; - ret += "

The following selector represents all but FOO"; - ret += " elements.

"; - ret += "

*:not(FOO)

"; - ret += "

The following group of selectors represents all HTML elements"; - ret += " except links.

"; - ret += "

html|*:not(:link):not(:visited)

"; - ret += "

Default namespace declarations do not affect the argument of the"; - ret += " type selector.

"; - ret += "

Examples:

"; - ret += "

Assuming that the default namespace is bound to"; - ret += " elements that are not in that namespace:

"; - ret += "

*|*:not(*)

"; - ret += "

The following CSS selector matches any element being hovered,"; - ret += " rule when they are being hovered.

"; - ret += "

*|*:not(:hover)

"; - ret += "

Note: the :not() pseudo allows"; - ret += " useless selectors to be written. For instance :not(*|*),"; - ret += " which represents no element at all, or foo:not(bar),"; - ret += " which is equivalent to foo but with a higher"; - ret += " specificity.

"; - ret += "

7. Pseudo-elements

"; - ret += "

Pseudo-elements create abstractions about the document tree beyond"; - ret += " source document (e.g., the ::before and"; - ret += " ::after pseudo-elements give access to generated"; - ret += " content).

"; - ret += "

A pseudo-element is made of two colons (::) followed"; - ret += " by the name of the pseudo-element.

"; - ret += "

This :: notation is introduced by the current document"; - ret += " :first-line, :first-letter,"; - ret += " :before and :after). This compatibility is"; - ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

"; - ret += "

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 += " subjects of the selector. A"; - ret += " pesudo-elements per selector.

"; - ret += "

7.1. The ::first-line pseudo-element

"; - ret += "

The ::first-line pseudo-element describes the contents"; - ret += "

"; - ret += "

CSS example:

"; - ret += "

p::first-line { text-transform: uppercase }

"; - ret += "

The above rule means 'change the letters of the first line of every"; - ret += " paragraph to uppercase'.

"; - ret += "

The selector p::first-line does not match any real"; - ret += " agents will insert at the beginning of every paragraph.

"; - ret += "

Note that the length of the first line depends on a number of"; - ret += " an ordinary HTML paragraph such as:

"; - ret += "

      <P>This is a somewhat long HTML ";
-    ret += "

"; - ret += "

the lines of which happen to be broken as follows:"; - ret += "

      THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
-    ret += "

"; - ret += "

This paragraph might be 'rewritten' by user agents to include the"; - ret += " fictional tag sequence for ::first-line. This"; - ret += " fictional tag sequence helps to show how properties are inherited.

"; - ret += "

      <P><P::first-line> This is a somewhat long HTML ";
-    ret += "      paragraph that </P::first-line> will be broken into several";
-    ret += "

"; - ret += "

If a pseudo-element breaks up a real element, the desired effect"; - ret += " with a span element:

"; - ret += "

      <P><SPAN class='test'> This is a somewhat long HTML";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "

"; - ret += "

the user agent could simulate start and end tags for"; - ret += " span when inserting the fictional tag sequence for"; - ret += " ::first-line."; - ret += "

      <P><P::first-line><SPAN class='test'> This is a";
-    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
-    ret += "          class='test'> be";
-    ret += "      lines.</SPAN> The first line will be identified";
-    ret += "

"; - ret += "

In CSS, the ::first-line pseudo-element can only be"; - ret += " or a table-cell.

"; - ret += "

The 'first formatted line' of an"; - ret += " line of the div in <DIV><P>This"; - ret += " line...</P></DIV> is the first line of the p"; - ret += " that both p and div are block-level)."; - ret += "

The first line of a table-cell or inline-block cannot be the first"; - ret += " formatted line of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first formatted line of the"; - ret += " div is not the line 'Hello'."; - ret += "

Note that the first line of the p in this"; - ret += " fragment: <p><br>First... doesn't contain any"; - ret += " letters (assuming the default style for br in HTML"; - ret += "

A UA should act as if the fictional start tags of the"; - ret += " ::first-line pseudo-elements were nested just inside the"; - ret += " is an example. The fictional tag sequence for

"; - ret += "

      <DIV>";
-    ret += "

"; - ret += "

      <DIV>";
-    ret += "

"; - ret += "

The ::first-line pseudo-element is similar to an"; - ret += " following properties apply to a ::first-line"; - ret += " properties as well.

"; - ret += "

7.2. The ::first-letter pseudo-element

"; - ret += "

The ::first-letter pseudo-element represents the first"; - ret += " is 'none'; otherwise, it is similar to a floated element.

"; - ret += "

In CSS, these are the properties that apply to ::first-letter"; - ret += " of the letter, unlike for normal elements.

"; - ret += "

Example:

"; - ret += "

This example shows a possible rendering of an initial cap. Note"; - ret += " ::first-letter"; - ret += " fictional start tag of the first letter is inside the span,"; - ret += " the font weight of the first letter is normal, not bold as the span:"; - ret += "

      p { line-height: 1.1 }";
-    ret += "

"; - ret += "

Image illustrating the ::first-letter pseudo-element "; - ret += "

"; - ret += "

The following CSS will make a drop cap initial letter span about two"; - ret += " lines:

"; - ret += "

      <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
-    ret += "

"; - ret += "

This example might be formatted as follows:

"; - ret += "

Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements "; - ret += "

"; - ret += "

The fictional tag sequence is:

"; - ret += "

      <P>";
-    ret += "

"; - ret += "

Note that the ::first-letter pseudo-element tags abut"; - ret += " block element.

"; - ret += "

In order to achieve traditional drop caps formatting, user agents"; - ret += " glyph outline may be taken into account when formatting.

"; - ret += "

Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; - ret += " be included. [UNICODE]

"; - ret += "

Quotes that precede the";
- ret += " first letter should be included.

"; - ret += "

The ::first-letter also applies if the first letter is"; - ret += " money.'

"; - ret += "

In CSS, the ::first-letter pseudo-element applies to"; - ret += " elements. A future version of this specification"; - ret += " types.

"; - ret += "

The ::first-letter pseudo-element can be used with all"; - ret += " the element, even if that first text is in a descendant.

"; - ret += "

Example:

"; - ret += "

The fictional tag sequence for this HTMLfragment:"; - ret += "

<div>";
-    ret += "      <p>The first text.

"; - ret += "

is:"; - ret += "

<div>";
-    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.

"; - ret += "

The first letter of a table-cell or inline-block cannot be the"; - ret += " first letter of an ancestor element. Thus, in <DIV><P"; - ret += " etcetera</DIV> the first letter of the div is"; - ret += " letter 'H'. In fact, the div doesn't have a first letter."; - ret += "

The first letter must occur on the first formatted line. For example, in"; - ret += " this fragment: <p><br>First... the first line"; - ret += " doesn't contain any letters and ::first-letter doesn't"; - ret += " match anything (assuming the default style for br in HTML"; - ret += "

In CSS, if an element is a list item ('display: list-item'), the"; - ret += " ::first-letter applies to the first letter in the"; - ret += " ::first-letter on list items with 'list-style-position:"; - ret += " inside'. If an element has ::before or"; - ret += " ::after content, the ::first-letter applies"; - ret += " to the first letter of the element including that content."; - ret += "

"; - ret += "

Example:

"; - ret += "

After the rule 'p::before {content: 'Note: '}', the selector"; - ret += " 'p::first-letter' matches the 'N' of 'Note'.

"; - ret += "

Some languages may have specific rules about how to treat certain"; - ret += " considered within the ::first-letter pseudo-element."; - ret += "

If the letters that would form the ::first-letter are not in the"; - ret += " same element, such as ''T' in <p>'<em>T..., the UA"; - ret += " both elements, or simply not create a pseudo-element.

"; - ret += "

Similarly, if the first letter(s) of the block are not at the start"; - ret += "

"; - ret += "

Example:

"; - ret += "

The following example illustrates"; - ret += " paragraph will be 'red'.

"; - ret += "

p { color: red; font-size: 12pt }";
-    ret += "      <P>Some text that ends up on two lines</P>

"; - ret += "

Assuming that a line break will occur before the word 'ends', the"; - ret += " fictional tag"; - ret += " sequence for this fragment might be:

"; - ret += "

<P>";
-    ret += "      </P>

"; - ret += "

Note that the ::first-letter element is inside the ::first-line"; - ret += " element. Properties set on ::first-line are inherited by"; - ret += " ::first-letter, but are overridden if the same property is"; - ret += " ::first-letter.

"; - ret += "

7.3. The ::selection"; - ret += " pseudo-element

"; - ret += "

The ::selection pseudo-element applies to the portion"; - ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; - ret += " named :selected)"; - ret += "

Although the ::selection pseudo-element is dynamic in"; - ret += " [CSS21]) which was originally rendered to a"; - ret += " ::selection state to that other medium, and have all the"; - ret += " required — UAs may omit the ::selection"; - ret += "

These are the CSS properties that apply to ::selection"; - ret += " ::selection may be ignored."; - ret += "

7.4. The ::before and ::after pseudo-elements

"; - ret += "

The ::before and ::after pseudo-elements"; - ret += " content. They are explained in CSS 2.1 [CSS21].

"; - ret += "

When the ::first-letter and ::first-line"; - ret += " pseudo-elements are combined with ::before and"; - ret += " ::after, they apply to the first letter or line of the"; - ret += " element including the inserted text.

"; - ret += "

8. Combinators

"; - ret += "

8.1. Descendant combinator

"; - ret += "

At times, authors may want selectors to describe an element that is"; - ret += " EM element that is contained within an H1"; - ret += " descendant combinator is white space that"; - ret += " separates two sequences of simple selectors. A selector of the form"; - ret += " 'A B' represents an element B that is an"; - ret += " arbitrary descendant of some ancestor element A."; - ret += "

"; - ret += "

Examples:

"; - ret += "

For example, consider the following selector:

"; - ret += "

h1 em

"; - ret += "

It represents an em element being the descendant of"; - ret += " an h1 element. It is a correct and valid, but partial,"; - ret += " description of the following fragment:

"; - ret += "

<h1>This <span class='myclass'>headline";
-    ret += "      is <em>very</em> important</span></h1>

"; - ret += "

The following selector:

"; - ret += "

div * p

"; - ret += "

represents a p element that is a grandchild or later"; - ret += " descendant of a div element. Note the whitespace on"; - ret += " of the P.

"; - ret += "

The following selector, which combines descendant combinators and"; - ret += " attribute selectors, represents an"; - ret += " element that (1) has the href attribute set and (2) is"; - ret += " inside a p that is itself inside a div:

"; - ret += "

div p *[href]

"; - ret += "

8.2. Child combinators

"; - ret += "

A child combinator describes a childhood relationship"; - ret += " 'greater-than sign' (>) character and"; - ret += " separates two sequences of simple selectors."; - ret += "

"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element that is"; - ret += " child of body:

"; - ret += "

body > p

"; - ret += "

The following example combines descendant combinators and child"; - ret += " combinators.

"; - ret += "

div ol>li p

"; - ret += " "; - ret += "

It represents a p element that is a descendant of an"; - ret += " li element; the li element must be the"; - ret += " child of an ol element; the ol element must"; - ret += " be a descendant of a div. Notice that the optional white"; - ret += " space around the '>' combinator has been left out.

"; - ret += "

For information on selecting the first child of an element, please"; - ret += " see the section on the :first-child pseudo-class"; - ret += " above.

"; - ret += "

8.3. Sibling combinators

"; - ret += "

There are two different sibling combinators: the adjacent sibling"; - ret += " considering adjacency of elements.

"; - ret += "

8.3.1. Adjacent sibling combinator"; - ret += "

"; - ret += "

The adjacent sibling combinator is made of the 'plus"; - ret += " sign' (U+002B, +) character that separates two"; - ret += " sequences of simple selectors. The elements represented by the two"; - ret += " represented by the second one.

"; - ret += "

Examples:

"; - ret += "

The following selector represents a p element"; - ret += " immediately following a math element:

"; - ret += "

math + p

"; - ret += "

The following selector is conceptually similar to the one in the"; - ret += " adds a constraint to the h1 element, that it must have"; - ret += " class='opener':

"; - ret += "

h1.opener + h2

"; - ret += "

8.3.2. General sibling combinator"; - ret += "

"; - ret += "

The general sibling combinator is made of the 'tilde'"; - ret += " (U+007E, ~) character that separates two sequences of"; - ret += " simple selectors. The elements represented by the two sequences share"; - ret += " represented by the second one.

"; - ret += "

Example:

"; - ret += "

h1 ~ pre

"; - ret += "

represents a pre element following an h1. It"; - ret += " is a correct and valid, but partial, description of:

"; - ret += "

<h1>Definition of the function a</h1>";
-    ret += "      <pre>function a(x) = 12x/13.5</pre>

"; - ret += "

9. Calculating a selector's specificity

"; - ret += "

A selector's specificity is calculated as follows:

"; - ret += "

count the number of ID selectors in the selector (= a)
count the number of class selectors, attributes selectors, and"; - ret += "
count the number of element names in the selector (= c)
ignore pseudo-elements

"; - ret += "

Selectors inside the negation pseudo-class"; - ret += " a pseudo-class.

"; - ret += "

Concatenating the three numbers a-b-c (in a number system with a"; - ret += " large base) gives the specificity.

"; - ret += "

Examples:

"; - ret += "

*               /* a=0 b=0 c=0 -> specificity =   0 */";
-    ret += "

"; - ret += "

Note: the specificity of the styles"; - ret += " specified in an HTML style attribute is described in CSS"; - ret += " 2.1. [CSS21].

"; - ret += "

10. The grammar of Selectors

"; - ret += "

10.1. Grammar

"; - ret += "

The grammar below defines the syntax of Selectors. It is globally"; - ret += " shorthand notations beyond Yacc (see [YACC])"; - ret += " are used:

"; - ret += "

*: 0 or more"; - ret += "
+: 1 or more"; - ret += "
?: 0 or 1"; - ret += "
|: separates alternatives"; - ret += "
[ ]: grouping

"; - ret += "

The productions are:

"; - ret += "

selectors_group";
-    ret += "        ;

"; - ret += "

10.2. Lexical scanner

"; - ret += "

The following is the tokenizer, written in Flex (see"; - ret += " [FLEX]) notation. The tokenizer is"; - ret += " case-insensitive.

"; - ret += "

The two occurrences of '\377' represent the highest character"; - ret += " possible code point in Unicode/ISO-10646. [UNICODE]

"; - ret += "

%option case-insensitive";
-    ret += "      .                return *yytext;

"; - ret += "

11. Namespaces and down-level clients

"; - ret += "

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.

"; - ret += "

It should be noted that a down-level CSS client will (if it"; - ret += " @namespace 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.

"; - ret += "

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.

"; - ret += "

The following are scenarios and examples in which it is possible to"; - ret += " that do not implement this proposal.

"; - ret += "

"; - ret += "
The XML document does not use namespaces.
"; - ret += "
- In this case, it is obviously not necessary to declare or use"; - ret += " attribute selectors will function adequately in a down-level"; - ret += "
- 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 ('|name')"; - ret += " will guarantee that selectors will match only XML elements that"; - ret += "
"; - ret += "
"; - ret += "
The XML document defines a single, default namespace used"; - ret += " names.
"; - ret += "
- In this case, a down-level client will function as if"; - ret += " element type and attribute selectors will match against all"; - ret += "
"; - ret += "
"; - ret += "
The XML document does not use a default namespace, all"; - ret += " to the same URI).
"; - ret += "
- 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 Type selectors and Namespaces"; - ret += " selectors may be declared using an escaped colon"; - ret += " '\\:'"; - ret += " 'html\\:h1' will match"; - ret += " <html:h1>. Selectors using the qualified name"; - ret += "
- Note that selectors declared in this fashion will"; - ret += " only 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 += "
"; - ret += "

"; - ret += "

In other scenarios: when the namespace prefixes used in the XML are"; - ret += " different namespace URIs within the same document, or in"; - ret += " a CSS and XML namespace aware client.

"; - ret += "

12. Profiles

"; - ret += "

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.

"; - ret += "

Non normative examples:"; - ret += "

Selectors profile
Specification	CSS level 1
Accepts	type selectors class selectors ID selectors :link,"; - ret += " :visited and :active pseudo-classes descendant combinator"; - ret += " ::first-line and ::first-letter pseudo-elements"; - ret += "
Excludes	"; - ret += " universal selector attribute selectors :hover and"; - ret += " pseudo-classes :target pseudo-class :lang()"; - ret += " pseudo-class all UI"; - ret += " element states pseudo-classes all structural"; - ret += " pseudo-classes negation pseudo-class all"; - ret += " UI element fragments pseudo-elements ::before and ::after"; - ret += " pseudo-elements child combinators sibling combinators"; - ret += " namespaces
Extra constraints	only one class selector allowed per sequence of simple"; - ret += " selectors"; - ret += "

Selectors profile
Specification	CSS level 2
Accepts	type selectors universal selector attribute presence and"; - ret += " values selectors class selectors ID selectors :link,"; - ret += " descendant combinator child combinator adjacent"; - ret += " combinator ::first-line and ::first-letter"; - ret += " pseudo-elements ::before"; - ret += "
Excludes	"; - ret += " content selectors substring matching attribute"; - ret += " selectors :target pseudo-classes all UI element"; - ret += " states pseudo-classes all structural pseudo-classes other"; - ret += " than :first-child negation pseudo-class all UI element"; - ret += " fragments pseudo-elements general sibling combinators"; - ret += " namespaces
Extra constraints	more than one class selector per sequence of simple selectors"; - ret += "

"; - ret += "

In CSS, selectors express pattern matching rules that determine which"; - ret += "

The following selector (CSS level 2) will match all anchors a"; - ret += " with attribute name set inside a section 1 header"; - ret += " h1:"; - ret += "

h1 a[name]

"; - ret += "

All CSS declarations attached to such a selector are applied to elements"; - ret += " matching it.

"; - ret += "

Selectors profile
Specification	STTS 3
Accepts	"; - ret += " type selectors universal selectors attribute"; - ret += " selectors class"; - ret += " selectors ID selectors all structural"; - ret += " pseudo-classes "; - ret += " namespaces
Excludes	non-accepted pseudo-classes pseudo-elements
Extra constraints	some selectors and combinators are not allowed in fragment"; - ret += "

"; - ret += "

Selectors can be used in STTS 3 in two different"; - ret += "

a selection mechanism equivalent to CSS selection mechanism:"; - ret += "
fragment descriptions that appear on the right side of declarations."; - ret += "

"; - ret += "

13. Conformance and requirements

"; - ret += "

This section defines conformance with the present specification only."; - ret += "

The inability of a user agent to implement part of this specification due to"; - ret += "

All specifications reusing Selectors must contain a Profile listing the"; - ret += " subset of Selectors it accepts or excludes, and describing the constraints"; - ret += "

Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; - ret += "

User agents must observe the rules for handling parsing errors:"; - ret += "

a simple selector containing an undeclared namespace prefix is invalid"; - ret += "
a selector containing an invalid simple selector, an invalid combinator"; - ret += "
a group of selectors containing an invalid selector is invalid.

"; - ret += "

Specifications reusing Selectors must define how to handle parsing"; - ret += " used is dropped.)

"; - ret += " "; - ret += "

14. Tests

"; - ret += "

This specification has a test"; - ret += " suite allowing user agents to verify their basic conformance to"; - ret += " and does not cover all possible combined cases of Selectors.

"; - ret += "

15. Acknowledgements

"; - ret += "

The CSS working group would like to thank everyone who has sent"; - ret += " comments on this specification over the years.

"; - ret += "

The working group would like to extend special thanks to Donna"; - ret += " the final editorial review.

"; - ret += "

16. References

"; - ret += "

[CSS1]"; - ret += ": Bert Bos, Håkon Wium Lie; 'Cascading"; - ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; - ret += "; (http://www.w3.org/TR/REC-CSS1)"; - ret += "
[CSS21]"; - ret += ": Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; - ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; - ret += " 1', W3C Working Draft, 13 June 2005"; - ret += "; (http://www.w3.org/TR/CSS21)"; - ret += "
[CWWW]"; - ret += ": Martin J. Dürst, François Yergeau,"; - ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; - ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; - ret += "; (http://www.w3.org/TR/charmod/)"; - ret += "
[FLEX]"; - ret += ": 'Flex: The Lexical Scanner"; - ret += " Generator', Version 2.3.7, ISBN 1882114213"; - ret += "
[HTML4]"; - ret += ": Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; - ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; - ret += "; "; - ret += " (http://www.w3.org/TR/html4/)"; - ret += "
[MATH]"; - ret += ": Patrick Ion, Robert Miner, editors; 'Mathematical"; - ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; - ret += "; (http://www.w3.org/TR/REC-MathML/)"; - ret += "
[RFC3066]"; - ret += ": H. Alvestrand; 'Tags for the"; - ret += " Identification of Languages', Request for Comments 3066, January"; - ret += "; (http://www.ietf.org/rfc/rfc3066.txt)"; - ret += "
[STTS]"; - ret += ": Daniel Glazman; 'Simple Tree Transformation"; - ret += " Sheets 3', Electricité de France, submission to the W3C,"; - ret += "; (http://www.w3.org/TR/NOTE-STTS3)"; - ret += "
[SVG]"; - ret += ": Jon Ferraiolo, 藤沢淳, Dean"; - ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; - ret += " Specification', W3C Recommendation, 14 January 2003"; - ret += "; (http://www.w3.org/TR/SVG/)"; - ret += "
[UNICODE]: The Unicode"; - ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; - ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; - ret += " 4.0.1 and Unicode"; - ret += " 4.1.0."; - ret += "; (http://www.unicode.org/versions/)"; - ret += "
[XML10]"; - ret += ": Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; - ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; - ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; - ret += "; (http://www.w3.org/TR/REC-xml/)"; - ret += "
[XMLNAMES]"; - ret += ": Tim Bray, Dave Hollander, Andrew Layman,"; - ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; - ret += "; (http://www.w3.org/TR/REC-xml-names/)"; - ret += "
[YACC]"; - ret += ": S. C. Johnson; 'YACC — Yet another"; - ret += " compiler compiler', Technical Report, Murray Hill, 1975"; - ret += "

"; - ret += " 1"; - ret += " 2"; - $(e).html(ret); - } - -} +/* + * Copyright 2011, The gwtquery team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +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.core.client.Scheduler; +import com.google.gwt.core.client.Scheduler.RepeatingCommand; +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.Selectors.DeferredSelector; +import com.google.gwt.query.client.impl.SelectorEngineCssToXPath; +import com.google.gwt.query.client.impl.SelectorEngineImpl; +import com.google.gwt.query.client.impl.SelectorEngineNative; +import com.google.gwt.query.client.impl.SelectorEngineNativeIE8; +import com.google.gwt.query.client.impl.SelectorEngineNativeMin; +import com.google.gwt.query.client.impl.SelectorEngineNativeMinIE8; +import com.google.gwt.query.client.impl.SelectorEngineSizzle; +import com.google.gwt.query.client.impl.SelectorEngineSizzleIE; +import com.google.gwt.query.client.impl.research.SelectorEngineJS; +import com.google.gwt.query.client.impl.research.SelectorEngineSizzleGwt; +import com.google.gwt.query.client.impl.research.SelectorEngineXPath; +import com.google.gwt.user.client.DOM; +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 { + + public interface Benchmark { + String getId(); + String getName(); + int runSelector(DeferredSelector dq); + } + + /** + * Benchmark for dynamic selectors + */ + private class DynamicBenchmark implements Benchmark { + + protected SelectorEngineImpl engine; + private String id; + + DynamicBenchmark(SelectorEngineImpl engine, String name) { + this.id = name; + this.engine = engine; + } + + public String getId() { + return id; + } + + public String getName() { + String name = engine.getClass().getName().replaceAll("^.*\\.", ""); + return name; + } + + public int runSelector(DeferredSelector dq) { + return engine.select(dq.getSelector(), gwtiframe).getLength(); + } + } + + /** + * Benchmark for the compiled selectors + */ + private class GQueryCompiledBenchmark implements Benchmark { + + String id; + String name; + + GQueryCompiledBenchmark(String id) { + this.id = id; + } + + public String getId() { + return id; + } + + public String getName() { + if (name == null) { + MySelectors s = GWT.create(MySelectors.class); + s.body(document); + name = s.getClass().getName().replaceAll("^.*_", ""); + if (s.isDegradated()) { + name += " [degradated]"; + } + } + return name; + } + + public int runSelector(DeferredSelector dq) { + return dq.runSelector(gwtiframe).getLength(); + } + } + + /** + * Benchmark for external libraries + */ + private class IframeBenchmark implements Benchmark { + private String id; + + IframeBenchmark(String name) { + this.id = name; + } + + public String getId() { + return id; + } + + public String getName() { + return id; + } + + public int runSelector(DeferredSelector dq) { + return runSelector(id, dq.getSelector()); + } + + public native int runSelector(String id, String selector) /*-{ + return eval("$wnd." + id + "benchmark('" + selector + "')"); + }-*/; + } + + public static native void exportIframeReadyCallback(GwtQueryBenchModule bench) /*-{ + $wnd.iframebench_ready_callback = function() { + bench.@gwtquery.samples.client.GwtQueryBenchModule::iframeReadyCallback()(); + }; + }-*/; + + private boolean ask = true; + + private Function askBenchMarks = new Function(){ + public void f() { + if (!running && ask) { + selectPanel.center(); + } else { + runBenchMarks.f(); + } + } + }; + + /** + * List of available benchmarks. + */ + private final Benchmark[] benchmarks = new Benchmark[] { + new GQueryCompiledBenchmark("gwt_compiled"), + new DynamicBenchmark((SelectorEngineImpl)GWT.create(SelectorEngineImpl.class), "gwt_dynamic"), + new DynamicBenchmark(new SelectorEngineSizzle(), "gwt_sizzle_jsni"), + new DynamicBenchmark(new SelectorEngineSizzleIE(), "gwt_sizzle_ie_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 DynamicBenchmark(new SelectorEngineNative(), "gwt_native"), + new DynamicBenchmark(new SelectorEngineNativeIE8(), "gwt_nativeIE8"), + new DynamicBenchmark(new SelectorEngineNativeMin(), "gwt_native_min"), + new DynamicBenchmark(new SelectorEngineNativeMinIE8(), "gwt_native_minIE8"), + 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"}; + + private DeferredSelector ds[]; + + private FlexTable grid = new FlexTable(); + + private Element gwtiframe; + private int min_time = 200; + private boolean running = false; + /** + * Main function to run all the selected benchmarks + */ + private Function runBenchMarks = new Function() { + public void f() { + + // Force to stop the race + if (running) { + running = false; + $("#startrace").text("Run Again"); + return; + } + running = true; + + selectedBenchmarks = readBenchmarkSelection(); + selectPanel.hide(); + $("#startrace").text("Stop the race"); + $("#results").show(); + + initResultsTable(ds, selectedBenchmarks); + initTrack(selectedBenchmarks); + + Scheduler.get().scheduleIncremental(new RepeatingCommand() { + 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; + + public boolean execute() { + // The race has been stopped + if (!running) { + return false; + } + if (benchMarkNumber >= selectedBenchmarks.length) { + benchMarkNumber = 0; + numCalls = 0; + row ++; + + moveHorses(selectedBenchmarks, row, totalTimes); + setResultClass(selectorNumber, winner); + + selectorNumber++; + winner = -1; + winTime = Double.MAX_VALUE; + if (selectorNumber >= ds.length) { + double min = Double.MAX_VALUE; + for (int i = 0; i < totalTimes.length; i++) { + if (totalTimes[i] < min) { + min = totalTimes[i]; + } + } + + 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").text("Run Again"); + setResultClass(selectorNumber, i); + } + } + return false; + } + } + DeferredSelector d = ds[selectorNumber]; + long start = System.currentTimeMillis(); + int num = 0; + long end = start; + Benchmark m = selectedBenchmarks[benchMarkNumber]; + double runtime = min_time; + int found = 0; + try { + do { + num += m.runSelector(d); + 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) { + e.printStackTrace(); + found = -1; + } + runTimes[benchMarkNumber] = runtime; + d(selectorNumber, benchMarkNumber, runtime, found); + totalTimes[benchMarkNumber] += runtime; + numCalls = 0; + benchMarkNumber++; + return true; + } + }); + } + }; + private Benchmark[] selectedBenchmarks; + private PopupPanel selectPanel = new PopupPanel() {{ + addStyleName("spanel"); + }}; + private PopupPanel helpPanel = new PopupPanel() {{ + setAutoHideEnabled(true); + setWidget(new HTML($("#help").html())); + addStyleName("help"); + }}; + private boolean shareIframes = true; + + private double trackWidth; + + private boolean useTrack = true; + + public void iframeReadyCallback() { + writeTestContent($(".ibench").contents().find("body").get(0)); + gwtiframe = $(".ibench").eq(0).contents().get(0); + $("#startrace").text("Start the race"); + $("#startrace").click(ask ? askBenchMarks: runBenchMarks); + $("#about").click(new Function(){ + public void f() { + helpPanel.center(); + } + }); + } + + /** + * EntryPoint + */ + public void onModuleLoad() { + + final MySelectors m = GWT.create(MySelectors.class); + + ds = 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; + } + + exportIframeReadyCallback(this); + initSelects(benchmarks); + initIFrames(); + $("#results").hide(); + + } + + 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); + } + + 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 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 = ""; + 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(); + } + } + + /** + * Reset the result table + */ + private void initResultsTable(DeferredSelector[] dg, Benchmark... benchs) { + int numRows = dg.length; + 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++) { + grid.setText(i+1, 0, dg[i].getSelector()); + for (int j = 0; j < benchs.length; j++) { + grid.setText(i+1, j+1, "-"); + } + } + } + + /** + * Initialize the selects to choose the benchmarks to run + */ + private void initSelects(Benchmark... benchs) { + String opt = "%ID%
"; + selectPanel.add(new HTML("

Make your selection

")); + 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() + " " + b.getName()).replaceAll("%SEL", "")); + } + g.append("
"); + $("#run").click(runBenchMarks); + selectPanel.hide(); + } + + /** + * Initialize the track with the horses + */ + private void initTrack(Benchmark... benchs) { + if (!useTrack) return; + String tpl = "

%ID%

"; + 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)); + } + + GQuery flag = $("

").appendTo(document); + + // These values are set in the css. + int horseHeight = 35; + int horseWidth = 150; + int flagWidth = 35; + + int height = horseHeight * (benchs.length + 1); + $("#racetrack").css("height", height + "px"); + + trackWidth = g.width() - horseWidth - flagWidth; + flag.hide(); + } + + /** + * 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); + } + double winnerPos = row * (double) trackWidth / (double) ds.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 Benchmark[] readBenchmarkSelection() { + ArrayList bs = new ArrayList(); + for (Element e : $("input", selectPanel.getElement()).elements()) { + String val = $(e).val().replaceAll(" .*$", ""); + if ($(e).prop("checked")) { + for (Benchmark b : benchmarks) { + if (b.getId().equals(val)) { + bs.add(b); + } + } + } + } + return bs.toArray(new Benchmark[bs.size()]); + } + + 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"); + } + + /** + * 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 += "

"; + ret += "

Selectors

"; + ret += " ."; + ret += "

W3C Working Draft 15 December 2005

"; + ret += "

This version:: "; + ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
Latest version:"; + ret += ": "; + ret += " http://www.w3.org/TR/css3-selectors"; + ret += "
Previous version:"; + ret += ": "; + ret += " http://www.w3.org/TR/2001/CR-css3-selectors-20011113"; + ret += "
Editors:"; + ret += ": Daniel Glazman (Invited"; + ret += "; Tantek Çelik"; + ret += "; Ian"; + ret += " Hickson (Google)"; + ret += "; Peter Linss (former"; + ret += " editor, Netscape/AOL)"; + ret += "; John Williams (former editor, Quark, Inc.)"; + ret += "

"; + ret += "

"; + ret += " Copyright © 2005 W3C^®"; + ret += " (MIT, ERCIM, Keio), All Rights Reserved."; + ret += " liability,"; + ret += " trademark,"; + ret += " document"; + ret += " use rules apply."; + ret += "

"; + ret += "

Abstract

"; + ret += "

Selectors 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.

"; + ret += "

CSS (Cascading"; + ret += " Style Sheets) is a language for describing the rendering of HTML and XML 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 += "

Selectors define the following function:

"; + ret += "

expression ∗ element → boolean

"; + ret += "

That is, given an element and a selector, this specification"; + ret += " defines whether that element matches the selector.

"; + ret += "

These expressions can also be used, for instance, to select a set"; + ret += " subtree. STTS (Simple Tree Transformation Sheets), a"; + ret += " language for transforming XML trees, uses this mechanism. [STTS]

"; + ret += "

Status of this document

"; + ret += "

This section describes the status of this document at the"; + ret += " of this technical report can be found in the W3C technical reports index at"; + ret += " http://www.w3.org/TR/.

"; + ret += "

This document describes the selectors that already exist in CSS1 and CSS2, and"; + ret += " also proposes new selectors for CSS3 and other languages that may need them.

"; + ret += "

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.

"; + ret += "

This specification is a last call working draft for the the CSS Working Group"; + ret += " (Style Activity). This"; + ret += " document is a revision of the Candidate"; + ret += " Recommendation dated 2001 November 13, and has incorporated"; + ret += " be demonstrable.

"; + ret += "

All persons are encouraged to review and implement this"; + ret += " specification and return comments to the (archived)"; + ret += " public mailing list www-style"; + ret += " (see instructions). W3C"; + ret += " The deadline for comments is 14 January 2006.

"; + ret += "

This is still a draft document and may be updated, replaced, or"; + ret += "

This document may be available in translation."; + ret += "

"; + ret += "

1. Introduction"; + ret += "
- 1.1. Dependencies
- 1.2. Terminology
- 1.3. Changes from CSS2
"; + ret += "
2. Selectors"; + ret += "
3. Case sensitivity"; + ret += "
4. Selector syntax"; + ret += "
5. Groups of selectors"; + ret += "
6. Simple selectors"; + ret += "
- 6.1. Type"; + ret += " selectors"; + ret += "
  - 6.1.1. Type"; + ret += " selectors and namespaces
  "; + ret += "
- 6.2."; + ret += " Universal selector"; + ret += "
  - 6.2.1. Universal selector and"; + ret += " namespaces
  "; + ret += "
- 6.3."; + ret += " Attribute selectors"; + ret += "
  - 6.3.1."; + ret += " values"; + ret += "
  - 6.3.2. Substring"; + ret += " matching attribute selectors"; + ret += "
  - 6.3.3."; + ret += " Attribute selectors and namespaces"; + ret += "
  - 6.3.4."; + ret += " Default attribute values in DTDs
  "; + ret += "
- 6.4. Class"; + ret += " selectors"; + ret += "
- 6.5. ID"; + ret += " selectors"; + ret += "
- 6.6."; + ret += " Pseudo-classes"; + ret += "
  - 6.6.1."; + ret += " Dynamic pseudo-classes"; + ret += "
  - 6.6.2. The"; + ret += " :target pseudo-class"; + ret += "
  - 6.6.3. The"; + ret += " :lang() pseudo-class"; + ret += "
  - 6.6.4. UI"; + ret += " element states pseudo-classes"; + ret += "
  - 6.6.5."; + ret += " Structural pseudo-classes"; + ret += "
    - :root"; + ret += " pseudo-class"; + ret += "
    - :nth-child()"; + ret += " pseudo-class"; + ret += "
    - :nth-last-child()"; + ret += "
    - :nth-of-type()"; + ret += " pseudo-class"; + ret += "
    - :nth-last-of-type()"; + ret += "
    - :first-child"; + ret += " pseudo-class"; + ret += "
    - :last-child"; + ret += " pseudo-class"; + ret += "
    - :first-of-type"; + ret += " pseudo-class"; + ret += "
    - :last-of-type"; + ret += " pseudo-class"; + ret += "
    - :only-child"; + ret += " pseudo-class"; + ret += "
    - :only-of-type"; + ret += " pseudo-class"; + ret += "
    - :empty"; + ret += " pseudo-class
    "; + ret += "
  - 6.6.7. The"; + ret += " negation pseudo-class
  "; + ret += "
"; + ret += "
7. Pseudo-elements"; + ret += "
- 7.1. The ::first-line"; + ret += " pseudo-element"; + ret += "
- 7.2. The ::first-letter"; + ret += " pseudo-element"; + ret += "
- 7.3. The ::selection"; + ret += " pseudo-element"; + ret += "
- 7.4. The ::before and ::after"; + ret += " pseudo-elements
"; + ret += "
8. Combinators"; + ret += "
- 8.1."; + ret += " Descendant combinators"; + ret += "
- 8.2. Child"; + ret += " combinators"; + ret += "
- 8.3. Sibling"; + ret += " combinators"; + ret += "
  - 8.3.1."; + ret += " Adjacent sibling combinator"; + ret += "
  - 8.3.2."; + ret += " General sibling combinator
  "; + ret += "
"; + ret += "
9. Calculating a selector's"; + ret += " specificity"; + ret += "
10. The grammar of"; + ret += " Selectors"; + ret += "
- 10.1. Grammar"; + ret += "
- 10.2. Lexical scanner"; + ret += "
"; + ret += "
11. Namespaces and down-level"; + ret += " clients"; + ret += "
12. Profiles"; + ret += "
13. Conformance and requirements"; + ret += "
14. Tests"; + ret += "
15. Acknowledgements"; + ret += "
16. References"; + ret += "

"; + ret += "

1. Introduction

"; + ret += "

1.1. Dependencies

"; + ret += "

Some features of this specification are specific to CSS, or have"; + ret += " specification, these have been described in terms of CSS2.1. [CSS21]

"; + ret += "

1.2. Terminology

"; + ret += "

All of the text of this specification is normative except"; + ret += " non-normative.

"; + ret += "

1.3. Changes from CSS2

"; + ret += "

This section is non-normative.

"; + ret += "

The main differences between the selectors in CSS2 and those in"; + ret += " Selectors are:"; + ret += "

the list of basic definitions (selector, group of selectors,"; + ret += " of simple selectors, and the term 'simple selector' is now used for"; + ret += "
an optional namespace component is now allowed in type element"; + ret += " selectors, the universal selector and attribute selectors"; + ret += "
a new combinator has been"; + ret += "
new simple selectors including substring matching attribute"; + ret += " selectors, and new pseudo-classes"; + ret += "
new pseudo-elements, and introduction of the '::' convention"; + ret += "
the grammar has been rewritten
profiles to be added to specifications integrating Selectors"; + ret += " and defining the set of selectors which is actually supported by"; + ret += "
Selectors are now a CSS3 Module and an independent"; + ret += "
the specification now has its own test suite

"; + ret += "

2. Selectors

"; + ret += "

This section is non-normative, as it merely summarizes the"; + ret += " following sections.

"; + ret += "

A Selector represents a structure. This structure can be used as a"; + ret += " HTML or XML fragment corresponding to that structure.

"; + ret += "

Selectors may range from simple element names to rich contextual"; + ret += " representations.

"; + ret += "

The following table summarizes the Selector syntax:

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal"; + ret += " selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a 'foo' attribute	Attribute"; + ret += " selectors	2
E[foo='bar']	an E element whose 'foo' attribute value is exactly"; + ret += "	Attribute"; + ret += " selectors	2
E[foo~='bar']	an E element whose 'foo' attribute value is a list of"; + ret += "	Attribute"; + ret += " selectors	2
E[foo^='bar']	an E element whose 'foo' attribute value begins exactly"; + ret += "	Attribute"; + ret += " selectors	3
E[foo$='bar']	an E element whose 'foo' attribute value ends exactly"; + ret += "	Attribute"; + ret += " selectors	3
E[foo*='bar']	an E element whose 'foo' attribute value contains the"; + ret += "	Attribute"; + ret += " selectors	3
E[hreflang\|='en']	an E element whose 'hreflang' attribute has a"; + ret += "	Attribute"; + ret += " selectors	2
E:root	an E element, root of the document	Structural"; + ret += " pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural"; + ret += " pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural"; + ret += " pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural"; + ret += " pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural"; + ret += " pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural"; + ret += " pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural"; + ret += " pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural"; + ret += " pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural"; + ret += " pseudo-classes	3
E:empty	an E element that has no children (including text"; + ret += "	Structural"; + ret += " pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of"; + ret += "	The link"; + ret += " pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user"; + ret += " action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target"; + ret += " pseudo-class	3
E:lang(fr)	an element of type E in language 'fr' (the document"; + ret += "	The :lang()"; + ret += " pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or"; + ret += "	The UI element states"; + ret += " pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)"; + ret += "	The UI element states"; + ret += " pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line"; + ret += " pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter"; + ret += " pseudo-element	1
E::selection	the portion of an E element that is currently"; + ret += "	The UI element"; + ret += " fragments pseudo-elements	3
E::before	generated content before an E element	The ::before"; + ret += " pseudo-element	2
E::after	generated content after an E element	The ::after"; + ret += " pseudo-element	2
E.warning	an E element whose class is"; + ret += "	Class"; + ret += " selectors	1
E#myid	an E element with ID equal to 'myid'.	ID"; + ret += " selectors	1
E:not(s)	an E element that does not match simple selector s	Negation"; + ret += " pseudo-class	3
E F	an F element descendant of an E element	Descendant"; + ret += " combinator	1
E > F	an F element child of an E element	Child"; + ret += " combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator"; + ret += "	2
E ~ F	an F element preceded by an E element	General sibling combinator"; + ret += "	3

"; + ret += "

The meaning of each selector is derived from the table above by"; + ret += " column.

"; + ret += "

3. Case sensitivity

"; + ret += "

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.

"; + ret += "

4. Selector syntax

"; + ret += "

A selector is a chain of one"; + ret += " or more sequences of simple selectors"; + ret += " separated by combinators.

"; + ret += "

A sequence of simple selectors"; + ret += " is a chain of simple selectors"; + ret += " that are not separated by a combinator. It"; + ret += " always begins with a type selector or a"; + ret += " universal selector. No other type"; + ret += " selector or universal selector is allowed in the sequence.

"; + ret += "

Combinators are: white space, 'greater-than"; + ret += " sign' (U+003E, >), 'plus sign' (U+002B,"; + ret += " +) and 'tilde' (U+007E, ~). White"; + ret += " space may appear between a combinator and the simple selectors around"; + ret += " it. Only the characters 'space' (U+0020), 'tab'"; + ret += " never part of white space.

"; + ret += "

The elements of a document tree that are represented by a selector"; + ret += " are the subjects of the selector. 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.

"; + ret += "

An empty selector, containing no sequence of simple selectors and"; + ret += " no pseudo-element, is an invalid"; + ret += " selector.

"; + ret += "

5. Groups of selectors

"; + ret += "

When several selectors share the same declarations, they may be"; + ret += " grouped into a comma-separated list. (A comma is U+002C.)

"; + ret += "

CSS examples:

"; + ret += "

In this example, we condense three rules with identical"; + ret += " declarations into one. Thus,

"; + ret += "

h1 { font-family: sans-serif }";
+    ret += "      h3 { font-family: sans-serif }

"; + ret += "

is equivalent to:

"; + ret += "

h1, h2, h3 { font-family: sans-serif }

"; + ret += "

Warning: 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.

"; + ret += "

6. Simple selectors

"; + ret += "

6.1. Type selector

"; + ret += "

A type selector is the name of a document language"; + ret += " type in the document tree.

"; + ret += "

Example:

"; + ret += "

The following selector represents an h1 element in the"; + ret += " document tree:

"; + ret += "

h1

"; + ret += "

6.1.1. Type selectors and namespaces

"; + ret += "

Type selectors allow an optional namespace ([XMLNAMES]) component. A namespace prefix"; + ret += " (U+007C, |).

"; + ret += "

The namespace component may be left empty to indicate that the"; + ret += " selector is only to represent elements with no declared namespace.

"; + ret += "

An asterisk may be used for the namespace prefix, indicating that"; + ret += " with no namespace).

"; + ret += "

Element type selectors that have no namespace component (no"; + ret += " element's namespace (equivalent to '*|') unless a default"; + ret += " namespace.

"; + ret += "

A type selector containing a namespace prefix that has not been"; + ret += " previously declared is an invalid selector."; + ret += " language implementing Selectors. In CSS, such a mechanism is defined"; + ret += " in the General Syntax module.

"; + ret += "

In a namespace-aware client, element type selectors will only match"; + ret += " against the local"; + ret += " part"; + ret += " of the element's qualified"; + ret += " name. See below for notes about matching"; + ret += " behaviors in down-level clients.

"; + ret += "

In summary:

"; + ret += "

ns|E: elements with name E in namespace ns
*|E: elements with name E in any namespace, including those without any"; + ret += "
|E: elements with name E without any declared namespace
E: if no default namespace has been specified, this is equivalent to *|E."; + ret += "

"; + ret += "

CSS examples:

"; + ret += "

@namespace foo url(http://www.example.com);";
+    ret += "       h1 { color: green }

"; + ret += "

The first rule will match only h1 elements in the"; + ret += " 'http://www.example.com' namespace.

"; + ret += "

The second rule will match all elements in the"; + ret += " 'http://www.example.com' namespace.

"; + ret += "

The third rule will match only h1 elements without"; + ret += " any declared namespace.

"; + ret += "

The fourth rule will match h1 elements in any"; + ret += " namespace (including those without any declared namespace).

"; + ret += "

The last rule is equivalent to the fourth rule because no default"; + ret += " namespace has been defined.

"; + ret += "

6.2. Universal selector

"; + ret += "

The universal selector, written 'asterisk'"; + ret += " (*), represents the qualified name of any element"; + ret += " specified, see Universal selector and"; + ret += " Namespaces below.

"; + ret += "

If the universal selector is not the only component of a sequence"; + ret += " of simple selectors, the * may be omitted.

"; + ret += "

Examples:

"; + ret += "

*[hreflang|=en] and [hreflang|=en] are"; + ret += "
*.warning and .warning are equivalent,"; + ret += "
*#myid and #myid are equivalent.

"; + ret += "

Note: it is recommended that the"; + ret += " *, representing the universal selector, not be"; + ret += " omitted.

"; + ret += "

6.2.1. Universal selector and namespaces

"; + ret += "

The universal selector allows an optional namespace component. It"; + ret += " is used as follows:

"; + ret += "

ns|*: all elements in namespace ns
*|*: all elements
|*: all elements without any declared namespace
*: if no default namespace has been specified, this is equivalent to *|*."; + ret += "

"; + ret += "

A universal selector containing a namespace prefix that has not"; + ret += " been previously declared is an invalid"; + ret += " to the language implementing Selectors. In CSS, such a mechanism is"; + ret += " defined in the General Syntax module.

"; + ret += "

6.3. Attribute selectors

"; + ret += "

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.

"; + ret += "

6.3.1. Attribute presence and values"; + ret += " selectors

"; + ret += "

CSS2 introduced four attribute selectors:

"; + ret += "

[att]"; + ret += ": Represents an element with the att attribute, whatever the"; + ret += "
[att=val]: Represents an element with the att attribute whose value is"; + ret += "
[att~=val]: Represents an element with the att attribute whose value is"; + ret += " a whitespace-separated list of words, one"; + ret += " represent anything (since the words are separated by"; + ret += "
[att|=val]"; + ret += ": Represents an element with the att attribute, its value"; + ret += " matches (e.g., the hreflang attribute on the"; + ret += " link element in HTML) as described in RFC 3066 ([RFC3066]). For lang (or"; + ret += " xml:lang) language subcode matching, please see the :lang pseudo-class."; + ret += "

"; + ret += "

Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names and values in selectors depends on"; + ret += " the document language.

"; + ret += "

Examples:

"; + ret += "

The following attribute selector represents an h1"; + ret += " element that carries the title attribute, whatever its"; + ret += " value:

"; + ret += "

h1[title]

"; + ret += "

In the following example, the selector represents a"; + ret += " span element whose class attribute has"; + ret += " exactly the value 'example':

"; + ret += "

span[class='example']

"; + ret += "

Multiple attribute selectors can be used to represent several"; + ret += " attribute. Here, the selector represents a span element"; + ret += " whose hello attribute has exactly the value 'Cleveland'"; + ret += " and whose goodbye attribute has exactly the value"; + ret += " 'Columbus':

"; + ret += "

span[hello='Cleveland'][goodbye='Columbus']

"; + ret += "

The following selectors illustrate the differences between '='"; + ret += " 'copyright copyleft copyeditor' on a rel attribute. The"; + ret += " second selector will only represent an a element with"; + ret += " an href attribute having the exact value"; + ret += " 'http://www.w3.org/'.

"; + ret += "

a[rel~='copyright']";
+    ret += "      a[href='http://www.w3.org/']

"; + ret += "

The following selector represents a link element"; + ret += " whose hreflang attribute is exactly 'fr'.

"; + ret += "

link[hreflang=fr]

"; + ret += "

The following selector represents a link element for"; + ret += " which the values of the hreflang attribute begins with"; + ret += " 'en', including 'en', 'en-US', and 'en-cockney':

"; + ret += "

link[hreflang|='en']

"; + ret += "

Similarly, the following selectors represents a"; + ret += " DIALOGUE element whenever it has one of two different"; + ret += " values for an attribute character:

"; + ret += "

DIALOGUE[character=romeo]";
+    ret += "      DIALOGUE[character=juliet]

"; + ret += "

6.3.2. Substring matching attribute"; + ret += " selectors

"; + ret += "

Three additional attribute selectors are provided for matching"; + ret += " substrings in the value of an attribute:

"; + ret += "

[att^=val]: Represents an element with the att attribute whose value"; + ret += "
[att$=val]"; + ret += ": Represents an element with the att attribute whose value"; + ret += "
[att*=val]"; + ret += ": Represents an element with the att attribute whose value"; + ret += "

"; + ret += "

Attribute values must be identifiers or strings. The"; + ret += " case-sensitivity of attribute names in selectors depends on the"; + ret += " document language.

"; + ret += "

Examples:

"; + ret += "

The following selector represents an HTML object,"; + ret += " image:

"; + ret += "

object[type^='image/']

"; + ret += "

The following selector represents an HTML anchor a with an"; + ret += " href attribute whose value ends with '.html'.

"; + ret += "

a[href$='.html']

"; + ret += "

The following selector represents an HTML paragraph with a"; + ret += " title"; + ret += " attribute whose value contains the substring 'hello'

"; + ret += "

p[title*='hello']

"; + ret += "

6.3.3. Attribute selectors and namespaces

"; + ret += "

Attribute selectors allow an optional namespace component to the"; + ret += " separator 'vertical bar' (|). In keeping with"; + ret += " apply to attributes, therefore attribute selectors without a namespace"; + ret += " (equivalent to '|attr'). An asterisk may be used for the"; + ret += "

An attribute selector with an attribute name containing a namespace"; + ret += " prefix that has not been previously declared is an invalid selector. The mechanism for"; + ret += " a namespace prefix is left up to the language implementing Selectors."; + ret += "

"; + ret += "

CSS examples:

"; + ret += "

@namespace foo 'http://www.example.com';";
+    ret += "      [att] { color: green }

"; + ret += "

The first rule will match only elements with the attribute"; + ret += " att in the 'http://www.example.com' namespace with the"; + ret += " value 'val'.

"; + ret += "

The second rule will match only elements with the attribute"; + ret += " att regardless of the namespace of the attribute"; + ret += " (including no declared namespace).

"; + ret += "

The last two rules are equivalent and will match only elements"; + ret += " with the attribute att where the attribute is not"; + ret += " declared to be in a namespace.

"; + ret += "

6.3.4. Default attribute values in DTDs

"; + ret += "

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.

"; + ret += "

More precisely, a UA is not required to read an 'external"; + ret += " subset' of the DTD but is required to look for default"; + ret += " attribute values in the document's 'internal subset.' (See [XML10] for definitions of these subsets.)

"; + ret += "

A UA that recognizes an XML namespace [XMLNAMES] is not required to use its"; + ret += " required to use its built-in knowledge of the XHTML DTD.)

"; + ret += "

Note: Typically, implementations"; + ret += " choose to ignore external subsets.

"; + ret += "

Example:

"; + ret += "

Consider an element EXAMPLE with an attribute 'notation' that has a"; + ret += " default value of 'decimal'. The DTD fragment might be

"; + ret += "

<!ATTLIST EXAMPLE notation (decimal,octal) 'decimal'>

"; + ret += "

If the style sheet contains the rules

"; + ret += "

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }

"; + ret += "

the first rule will not match elements whose 'notation' attribute"; + ret += " attribute selector for the default value must be dropped:

"; + ret += "

EXAMPLE                   { /*... default property settings ...*/ }";
+    ret += "      EXAMPLE[notation=octal]   { /*... other settings...*/ }

"; + ret += "

Here, because the selector EXAMPLE[notation=octal] is"; + ret += " cases' style rules.

"; + ret += "

6.4. Class selectors

"; + ret += "

Working with HTML, authors may use the period (U+002E,"; + ret += " .) notation as an alternative to the ~="; + ret += " notation when representing the class attribute. Thus, for"; + ret += " HTML, div.value and div[class~=value] have"; + ret += " 'period' (.).

"; + ret += "

UAs may apply selectors using the period (.) notation in XML"; + ret += " 1.0 [SVG] describes the SVG"; + ret += " 'class' attribute and how a UA should interpret it, and"; + ret += " similarly MathML 1.01 [MATH] describes the MathML"; + ret += " 'class' attribute.)

"; + ret += "

CSS examples:

"; + ret += "

We can assign style information to all elements with"; + ret += " class~='pastoral' as follows:

"; + ret += "

*.pastoral { color: green }  /* all elements with class~=pastoral */

"; + ret += "

or just

"; + ret += "

.pastoral { color: green }  /* all elements with class~=pastoral */

"; + ret += "

The following assigns style only to H1 elements with"; + ret += " class~='pastoral':

"; + ret += "

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

"; + ret += "

Given these rules, the first H1 instance below would not have"; + ret += " green text, while the second would:

"; + ret += "

<H1>Not green</H1>";
+    ret += "      <H1 class='pastoral'>Very green</H1>

"; + ret += "

To represent a subset of 'class' values, each value must be preceded"; + ret += " by a '.', in any order.

"; + ret += "

CSS example:

"; + ret += "

The following rule matches any P element whose 'class' attribute"; + ret += " has been assigned a list of whitespace-separated values that includes"; + ret += " 'pastoral' and 'marine':

"; + ret += "

p.pastoral.marine { color: green }

"; + ret += "

This rule matches when class='pastoral blue aqua"; + ret += " marine' but does not match for class='pastoral"; + ret += " blue'.

"; + ret += "

Note: Because CSS gives considerable"; + ret += " not.

"; + ret += "

Note: If an element has multiple"; + ret += " this specification.

"; + ret += "

6.5. ID selectors

"; + ret += "

Document languages may contain attributes that are declared to be"; + ret += " applies.

"; + ret += "

An ID-typed attribute of a document language allows authors to"; + ret += " ID selectors represent an element instance based on its identifier. An"; + ret += " #) immediately followed by the ID value, which must be an"; + ret += " identifier.

"; + ret += "

Selectors does not specify how a UA knows the ID-typed attribute of"; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following ID selector represents an h1 element"; + ret += " whose ID-typed attribute has the value 'chapter1':

"; + ret += "

h1#chapter1

"; + ret += "

The following ID selector represents any element whose ID-typed"; + ret += " attribute has the value 'chapter1':

"; + ret += "

#chapter1

"; + ret += "

The following selector represents any element whose ID-typed"; + ret += " attribute has the value 'z98y'.

"; + ret += "

*#z98y

"; + ret += "

Note. In XML 1.0 [XML10], the information about which attribute"; + ret += " should use normal attribute selectors instead:"; + ret += " [name=p371] instead of #p371. Elements in"; + ret += " XML 1.0 documents without a DTD do not have IDs at all.

"; + ret += "

If an element has multiple ID attributes, all of them must be"; + ret += " DOM3 Core, XML DTDs, and namespace-specific knowledge.

"; + ret += "

6.6. Pseudo-classes

"; + ret += "

The pseudo-class concept is introduced to permit selection based on"; + ret += " expressed using the other simple selectors.

"; + ret += "

A pseudo-class always consists of a 'colon'"; + ret += " (:) followed by the name of the pseudo-class and"; + ret += " optionally by a value between parentheses.

"; + ret += "

Pseudo-classes are allowed in all sequences of simple selectors"; + ret += " sequences of simple selectors, after the leading type selector or"; + ret += " document.

"; + ret += "

6.6.1. Dynamic pseudo-classes

"; + ret += "

Dynamic pseudo-classes classify elements on characteristics other"; + ret += " that cannot be deduced from the document tree.

"; + ret += "

Dynamic pseudo-classes do not appear in the document source or"; + ret += " document tree.

"; + ret += "

The link pseudo-classes: :link and :visited

"; + ret += "

User agents commonly display unvisited links differently from"; + ret += " previously visited ones. Selectors"; + ret += " provides the pseudo-classes :link and"; + ret += " :visited to distinguish them:

"; + ret += "

The :link pseudo-class applies to links that have"; + ret += "
The :visited pseudo-class applies once the link has"; + ret += "

"; + ret += "

After some amount of time, user agents may choose to return a"; + ret += " visited link to the (unvisited) ':link' state.

"; + ret += "

The two states are mutually exclusive.

"; + ret += "

Example:

"; + ret += "

The following selector represents links carrying class"; + ret += " external and already visited:

"; + ret += "

a.external:visited

"; + ret += "

Note: It is possible for style sheet"; + ret += "

UAs may therefore treat all links as unvisited links, or implement"; + ret += " and unvisited links differently.

"; + ret += "

The user action pseudo-classes"; + ret += " :hover, :active, and :focus

"; + ret += "

Interactive user agents sometimes change the rendering in response"; + ret += " to user actions. Selectors provides"; + ret += " acting on.

"; + ret += "

The :hover pseudo-class applies while the user"; + ret += " element. User agents not that do not support interactive"; + ret += " media do not have to support this pseudo-class. Some conforming"; + ret += " user agents that support interactive"; + ret += " media may not be able to support this pseudo-class (e.g., a pen"; + ret += "
The :active pseudo-class applies while an element"; + ret += "
The :focus pseudo-class applies while an element"; + ret += "

"; + ret += "

There may be document language or implementation specific limits on"; + ret += " which elements can become :active or acquire"; + ret += " :focus.

"; + ret += "

These pseudo-classes are not mutually exclusive. An element may"; + ret += " match several pseudo-classes at the same time.

"; + ret += "

Selectors doesn't define if the parent of an element that is"; + ret += " ':active' or ':hover' is also in that state.

"; + ret += "

Examples:

"; + ret += "

a:link    /* unvisited links */";
+    ret += "      a:active  /* active links */

"; + ret += "

An example of combining dynamic pseudo-classes:

"; + ret += "

a:focus";
+    ret += "      a:focus:hover

"; + ret += "

The last selector matches a elements that are in"; + ret += " the pseudo-class :focus and in the pseudo-class :hover.

"; + ret += "

Note: An element can be both ':visited'"; + ret += " and ':active' (or ':link' and ':active').

"; + ret += "

6.6.2. The target pseudo-class :target

"; + ret += "

Some URIs refer to a location within a resource. This kind of URI"; + ret += " identifier (called the fragment identifier).

"; + ret += "

URIs with fragment identifiers link to a certain element within the"; + ret += " pointing to an anchor named section_2 in an HTML"; + ret += " document:

"; + ret += "

http://example.com/html/top.html#section_2

"; + ret += "

A target element can be represented by the :target"; + ret += " the document has no target element.

"; + ret += "

Example:

"; + ret += "

p.note:target

"; + ret += "

This selector represents a p element of class"; + ret += " note that is the target element of the referring"; + ret += " URI.

"; + ret += "

CSS example:

"; + ret += "

Here, the :target pseudo-class is used to make the"; + ret += " target element red and place an image before it, if there is one:

"; + ret += "

*:target { color : red }";
+    ret += "      *:target::before { content : url(target.png) }

"; + ret += "

6.6.3. The language pseudo-class :lang

"; + ret += "

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 [HTML4], the language is determined by a"; + ret += " combination of the lang attribute, the meta"; + ret += " headers). XML uses an attribute called xml:lang, and"; + ret += " the language.

"; + ret += "

The pseudo-class :lang(C) represents an element that"; + ret += " :lang() selector is based solely on the identifier C"; + ret += " element's language value, in the same way as if performed by the '|=' operator in attribute"; + ret += " selectors. The identifier C does not have to be a valid language"; + ret += " name.

"; + ret += "

C must not be empty. (If it is, the selector is invalid.)

"; + ret += "

Note: It is recommended that"; + ret += " documents and protocols indicate language using codes from RFC 3066 [RFC3066] or its successor, and by means of"; + ret += " 'xml:lang' attributes in the case of XML-based documents [XML10]. See "; + ret += " 'FAQ: Two-letter or three-letter language codes.'

"; + ret += "

Examples:

"; + ret += "

The two following selectors represent an HTML document that is in"; + ret += " Belgian, French, or German. The two next selectors represent"; + ret += " q quotations in an arbitrary element in Belgian, French,"; + ret += " or German.

"; + ret += "

html:lang(fr-be)";
+    ret += "      :lang(de) > q

"; + ret += "

6.6.4. The UI element states pseudo-classes

"; + ret += "

The :enabled and :disabled pseudo-classes

"; + ret += "

The :enabled pseudo-class allows authors to customize"; + ret += " an enabled input element without also specifying what it"; + ret += " would look like when it was disabled.

"; + ret += "

Similar to :enabled, :disabled allows the"; + ret += " element should look.

"; + ret += "

Most elements will be neither enabled nor disabled. An element is"; + ret += " presently activate it or transfer focus to it.

"; + ret += "

The :checked pseudo-class

"; + ret += "

Radio and checkbox elements can be toggled by the user. Some menu"; + ret += " toggled 'on' the :checked pseudo-class applies. The"; + ret += " :checked pseudo-class initially applies to such elements"; + ret += " that have the HTML4 selected and checked"; + ret += " attributes as described in Section"; + ret += " 17.2.1 of HTML4, but of course the user can toggle 'off' such"; + ret += " elements in which case the :checked pseudo-class would no"; + ret += " longer apply. While the :checked pseudo-class is dynamic"; + ret += " on the presence of the semantic HTML4 selected and"; + ret += " checked attributes, it applies to all media."; + ret += "

The :indeterminate pseudo-class

"; + ret += "

Radio and checkbox elements can be toggled by the user, but are"; + ret += " This can be due to an element attribute, or DOM manipulation.

"; + ret += "

A future version of this specification may introduce an"; + ret += " :indeterminate pseudo-class that applies to such elements."; + ret += "

"; + ret += "

6.6.5. Structural pseudo-classes

"; + ret += "

Selectors introduces the concept of structural"; + ret += " pseudo-classes to permit selection based on extra information that"; + ret += " the document tree but cannot be represented by other simple selectors or"; + ret += "

Note that standalone pieces of PCDATA (text nodes in the DOM) are"; + ret += "

:root pseudo-class

"; + ret += "

The :root pseudo-class represents an element that is"; + ret += " HTML element."; + ret += "

:nth-child() pseudo-class

"; + ret += "

The"; + ret += " :nth-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " before it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. In"; + ret += " other words, this matches the bth child of an element after"; + ret += " all the children have been split into groups of a elements"; + ret += " each. For example, this allows the selectors to address every other"; + ret += " of paragraph text in a cycle of four. The a and"; + ret += " b values must be zero, negative integers or positive"; + ret += "

In addition to this, :nth-child() can take"; + ret += " 'odd' and 'even' as arguments instead."; + ret += " 'odd' has the same signification as 2n+1,"; + ret += " and 'even' has the same signification as 2n."; + ret += "

"; + ret += "

Examples:

"; + ret += "

tr:nth-child(2n+1) /* represents every odd row of an HTML table */";
+    ret += "      p:nth-child(4n+4) { color: purple; }

"; + ret += "

When a=0, no repeating is used, so for example"; + ret += " :nth-child(0n+5) matches only the fifth child. When"; + ret += " a=0, the an part need not be"; + ret += " :nth-child(b) and the last example simplifies"; + ret += " to :nth-child(5)."; + ret += "

"; + ret += "

Examples:

"; + ret += "

foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */";
+    ret += "      foo:nth-child(1)      /* same */

"; + ret += "

When a=1, the number may be omitted from the rule."; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selectors are therefore equivalent:

"; + ret += "

bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */";
+    ret += "      bar                   /* same but lower specificity (0,0,1) */

"; + ret += "

If b=0, then every ath element is picked. In"; + ret += " such a case, the b part may be omitted."; + ret += "

"; + ret += "

Examples:

"; + ret += "

tr:nth-child(2n+0) /* represents every even row of an HTML table */";
+    ret += "      tr:nth-child(2n) /* same */

"; + ret += "

If both a and b are equal to zero, the"; + ret += " pseudo-class represents no element in the document tree.

"; + ret += "

The value a can be negative, but only the positive"; + ret += " values of an+b, for"; + ret += " n≥0, may represent an element in the document"; + ret += " tree.

"; + ret += "

Example:

"; + ret += "

html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */

"; + ret += "

When the value b is negative, the '+' character in the"; + ret += " character indicating the negative value of b).

"; + ret += "

Examples:

"; + ret += "

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

"; + ret += "

:nth-last-child() pseudo-class

"; + ret += "

The :nth-last-child(an+b)"; + ret += " an+b-1 siblings"; + ret += " after it in the document tree, for a given positive"; + ret += " integer or zero value of n, and has a parent element. See"; + ret += " :nth-child() pseudo-class for the syntax of its argument."; + ret += " It also accepts the 'even' and 'odd' values"; + ret += "

"; + ret += "

Examples:

"; + ret += "

tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */";
+    ret += "                                    counting from the last one */

"; + ret += "

:nth-of-type() pseudo-class

"; + ret += "

The :nth-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name before it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. In other words, this matches the bth child"; + ret += " groups of a elements each. See :nth-child() pseudo-class"; + ret += " 'even' and 'odd' values."; + ret += "

"; + ret += "

CSS example:

"; + ret += "

This allows an author to alternate the position of floated images:

"; + ret += "

img:nth-of-type(2n+1) { float: right; }";
+    ret += "      img:nth-of-type(2n) { float: left; }

"; + ret += "

:nth-last-of-type() pseudo-class

"; + ret += "

The :nth-last-of-type(an+b)"; + ret += " an+b-1 siblings with the same"; + ret += " element name after it in the document tree, for a"; + ret += " given zero or positive integer value of n, and has a"; + ret += " parent element. See :nth-child() pseudo-class for the"; + ret += " syntax of its argument. It also accepts the 'even' and 'odd'"; + ret += "

"; + ret += "

Example:

"; + ret += "

To represent all h2 children of an XHTML"; + ret += " body except the first and last, one could use the"; + ret += " following selector:

"; + ret += "

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

"; + ret += "

In this case, one could also use :not(), although the"; + ret += " selector ends up being just as long:

"; + ret += "

body > h2:not(:first-of-type):not(:last-of-type)

"; + ret += "

:first-child pseudo-class

"; + ret += "

Same as :nth-child(1). The :first-child"; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " the first child of a div element:

"; + ret += "

div > p:first-child

"; + ret += "

This selector can represent the p inside the"; + ret += " div of the following fragment:

"; + ret += "

<p> The last P before the note.</p>";
+    ret += "      </div>

"; + ret += " but cannot represent the second p in the following"; + ret += "

<p> The last P before the note.</p>";
+    ret += "      </div>

"; + ret += "

The following two selectors are usually equivalent:

"; + ret += "

* > a:first-child /* a is first child of any element */";
+    ret += "      a:first-child /* Same (assuming a is not the root element) */

"; + ret += "

:last-child pseudo-class

"; + ret += "

Same as :nth-last-child(1). The :last-child"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following selector represents a list item li that"; + ret += " is the last child of an ordered list ol."; + ret += "

ol > li:last-child

"; + ret += "

:first-of-type pseudo-class

"; + ret += "

Same as :nth-of-type(1). The :first-of-type"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following selector represents a definition title"; + ret += " dt inside a definition list dl, this"; + ret += " dt being the first of its type in the list of children of"; + ret += " its parent element.

"; + ret += "

dl dt:first-of-type

"; + ret += "

It is a valid description for the first two dt"; + ret += " elements in the following example but not for the third one:

"; + ret += "

<dl>";
+    ret += "      </dl>

"; + ret += "

:last-of-type pseudo-class

"; + ret += "

Same as :nth-last-of-type(1). The"; + ret += " :last-of-type pseudo-class represents an element that is"; + ret += " element.

"; + ret += "

Example:

"; + ret += "

The following selector represents the last data cell"; + ret += " td of a table row.

"; + ret += "

tr > td:last-of-type

"; + ret += "

:only-child pseudo-class

"; + ret += "

Represents an element that has a parent element and whose parent"; + ret += " :first-child:last-child or"; + ret += " :nth-child(1):nth-last-child(1), but with a lower"; + ret += " specificity.

"; + ret += "

:only-of-type pseudo-class

"; + ret += "

Represents an element that has a parent element and whose parent"; + ret += " as :first-of-type:last-of-type or"; + ret += " :nth-of-type(1):nth-last-of-type(1), but with a lower"; + ret += " specificity.

"; + ret += "

:empty pseudo-class

"; + ret += "

The :empty pseudo-class represents an element that has"; + ret += " empty or not.

"; + ret += "

Examples:

"; + ret += "

p:empty is a valid representation of the following fragment:"; + ret += "

"; + ret += "

<p></p>

"; + ret += "

foo:empty is not a valid representation for the"; + ret += " following fragments:

"; + ret += "

<foo>bar</foo>

"; + ret += "

<foo><bar>bla</bar></foo>

"; + ret += "

<foo>this is not <bar>:empty</bar></foo>

"; + ret += "

6.6.6. Blank

"; + ret += " "; + ret += "

This section intentionally left blank.

"; + ret += " "; + ret += "

6.6.7. The negation pseudo-class

"; + ret += "

The negation pseudo-class, :not(X), is a"; + ret += " functional notation taking a simple"; + ret += " selector (excluding the negation pseudo-class itself and"; + ret += " "; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following CSS selector matches all button"; + ret += " elements in an HTML document that are not disabled.

"; + ret += "

button:not([DISABLED])

"; + ret += "

The following selector represents all but FOO"; + ret += " elements.

"; + ret += "

*:not(FOO)

"; + ret += "

The following group of selectors represents all HTML elements"; + ret += " except links.

"; + ret += "

html|*:not(:link):not(:visited)

"; + ret += "

Default namespace declarations do not affect the argument of the"; + ret += " type selector.

"; + ret += "

Examples:

"; + ret += "

Assuming that the default namespace is bound to"; + ret += " elements that are not in that namespace:

"; + ret += "

*|*:not(*)

"; + ret += "

The following CSS selector matches any element being hovered,"; + ret += " rule when they are being hovered.

"; + ret += "

*|*:not(:hover)

"; + ret += "

Note: the :not() pseudo allows"; + ret += " useless selectors to be written. For instance :not(*|*),"; + ret += " which represents no element at all, or foo:not(bar),"; + ret += " which is equivalent to foo but with a higher"; + ret += " specificity.

"; + ret += "

7. Pseudo-elements

"; + ret += "

Pseudo-elements create abstractions about the document tree beyond"; + ret += " source document (e.g., the ::before and"; + ret += " ::after pseudo-elements give access to generated"; + ret += " content).

"; + ret += "

A pseudo-element is made of two colons (::) followed"; + ret += " by the name of the pseudo-element.

"; + ret += "

This :: notation is introduced by the current document"; + ret += " :first-line, :first-letter,"; + ret += " :before and :after). This compatibility is"; + ret += " not allowed for the new pseudo-elements introduced in CSS level 3.

"; + ret += "

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 += " subjects of the selector. A"; + ret += " pesudo-elements per selector.

"; + ret += "

7.1. The ::first-line pseudo-element

"; + ret += "

The ::first-line pseudo-element describes the contents"; + ret += "

"; + ret += "

CSS example:

"; + ret += "

p::first-line { text-transform: uppercase }

"; + ret += "

The above rule means 'change the letters of the first line of every"; + ret += " paragraph to uppercase'.

"; + ret += "

The selector p::first-line does not match any real"; + ret += " agents will insert at the beginning of every paragraph.

"; + ret += "

Note that the length of the first line depends on a number of"; + ret += " an ordinary HTML paragraph such as:

"; + ret += "

      <P>This is a somewhat long HTML ";
+    ret += "

"; + ret += "

the lines of which happen to be broken as follows:"; + ret += "

      THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT";
+    ret += "

"; + ret += "

This paragraph might be 'rewritten' by user agents to include the"; + ret += " fictional tag sequence for ::first-line. This"; + ret += " fictional tag sequence helps to show how properties are inherited.

"; + ret += "

      <P><P::first-line> This is a somewhat long HTML ";
+    ret += "      paragraph that </P::first-line> will be broken into several";
+    ret += "

"; + ret += "

If a pseudo-element breaks up a real element, the desired effect"; + ret += " with a span element:

"; + ret += "

      <P><SPAN class='test'> This is a somewhat long HTML";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "

"; + ret += "

the user agent could simulate start and end tags for"; + ret += " span when inserting the fictional tag sequence for"; + ret += " ::first-line."; + ret += "

      <P><P::first-line><SPAN class='test'> This is a";
+    ret += "      paragraph that will </SPAN></P::first-line><SPAN";
+    ret += "          class='test'> be";
+    ret += "      lines.</SPAN> The first line will be identified";
+    ret += "

"; + ret += "

In CSS, the ::first-line pseudo-element can only be"; + ret += " or a table-cell.

"; + ret += "

The 'first formatted line' of an"; + ret += " line of the div in <DIV><P>This"; + ret += " line...</P></DIV> is the first line of the p"; + ret += " that both p and div are block-level)."; + ret += "

The first line of a table-cell or inline-block cannot be the first"; + ret += " formatted line of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first formatted line of the"; + ret += " div is not the line 'Hello'."; + ret += "

Note that the first line of the p in this"; + ret += " fragment: <p><br>First... doesn't contain any"; + ret += " letters (assuming the default style for br in HTML"; + ret += "

A UA should act as if the fictional start tags of the"; + ret += " ::first-line pseudo-elements were nested just inside the"; + ret += " is an example. The fictional tag sequence for

"; + ret += "

      <DIV>";
+    ret += "

"; + ret += "

      <DIV>";
+    ret += "

"; + ret += "

The ::first-line pseudo-element is similar to an"; + ret += " following properties apply to a ::first-line"; + ret += " properties as well.

"; + ret += "

7.2. The ::first-letter pseudo-element

"; + ret += "

The ::first-letter pseudo-element represents the first"; + ret += " is 'none'; otherwise, it is similar to a floated element.

"; + ret += "

In CSS, these are the properties that apply to ::first-letter"; + ret += " of the letter, unlike for normal elements.

"; + ret += "

Example:

"; + ret += "

This example shows a possible rendering of an initial cap. Note"; + ret += " ::first-letter"; + ret += " fictional start tag of the first letter is inside the span,"; + ret += " the font weight of the first letter is normal, not bold as the span:"; + ret += "

      p { line-height: 1.1 }";
+    ret += "

"; + ret += "

Image illustrating the ::first-letter pseudo-element "; + ret += "

"; + ret += "

The following CSS will make a drop cap initial letter span about two"; + ret += " lines:

"; + ret += "

      <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>";
+    ret += "

"; + ret += "

This example might be formatted as follows:

"; + ret += "

Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements "; + ret += "

"; + ret += "

The fictional tag sequence is:

"; + ret += "

      <P>";
+    ret += "

"; + ret += "

Note that the ::first-letter pseudo-element tags abut"; + ret += " block element.

"; + ret += "

In order to achieve traditional drop caps formatting, user agents"; + ret += " glyph outline may be taken into account when formatting.

"; + ret += "

Punctuation (i.e, characters defined in Unicode in the 'open' (Ps),"; + ret += " be included. [UNICODE]

"; + ret += "

Quotes that precede the";
+ ret += " first letter should be included.

"; + ret += "

The ::first-letter also applies if the first letter is"; + ret += " money.'

"; + ret += "

In CSS, the ::first-letter pseudo-element applies to"; + ret += " elements. A future version of this specification"; + ret += " types.

"; + ret += "

The ::first-letter pseudo-element can be used with all"; + ret += " the element, even if that first text is in a descendant.

"; + ret += "

Example:

"; + ret += "

The fictional tag sequence for this HTMLfragment:"; + ret += "

<div>";
+    ret += "      <p>The first text.

"; + ret += "

is:"; + ret += "

<div>";
+    ret += "      <p><div::first-letter><p::first-letter>T</...></...>he first text.

"; + ret += "

The first letter of a table-cell or inline-block cannot be the"; + ret += " first letter of an ancestor element. Thus, in <DIV><P"; + ret += " etcetera</DIV> the first letter of the div is"; + ret += " letter 'H'. In fact, the div doesn't have a first letter."; + ret += "

The first letter must occur on the first formatted line. For example, in"; + ret += " this fragment: <p><br>First... the first line"; + ret += " doesn't contain any letters and ::first-letter doesn't"; + ret += " match anything (assuming the default style for br in HTML"; + ret += "

In CSS, if an element is a list item ('display: list-item'), the"; + ret += " ::first-letter applies to the first letter in the"; + ret += " ::first-letter on list items with 'list-style-position:"; + ret += " inside'. If an element has ::before or"; + ret += " ::after content, the ::first-letter applies"; + ret += " to the first letter of the element including that content."; + ret += "

"; + ret += "

Example:

"; + ret += "

After the rule 'p::before {content: 'Note: '}', the selector"; + ret += " 'p::first-letter' matches the 'N' of 'Note'.

"; + ret += "

Some languages may have specific rules about how to treat certain"; + ret += " considered within the ::first-letter pseudo-element."; + ret += "

If the letters that would form the ::first-letter are not in the"; + ret += " same element, such as ''T' in <p>'<em>T..., the UA"; + ret += " both elements, or simply not create a pseudo-element.

"; + ret += "

Similarly, if the first letter(s) of the block are not at the start"; + ret += "

"; + ret += "

Example:

"; + ret += "

The following example illustrates"; + ret += " paragraph will be 'red'.

"; + ret += "

p { color: red; font-size: 12pt }";
+    ret += "      <P>Some text that ends up on two lines</P>

"; + ret += "

Assuming that a line break will occur before the word 'ends', the"; + ret += " fictional tag"; + ret += " sequence for this fragment might be:

"; + ret += "

<P>";
+    ret += "      </P>

"; + ret += "

Note that the ::first-letter element is inside the ::first-line"; + ret += " element. Properties set on ::first-line are inherited by"; + ret += " ::first-letter, but are overridden if the same property is"; + ret += " ::first-letter.

"; + ret += "

7.3. The ::selection"; + ret += " pseudo-element

"; + ret += "

The ::selection pseudo-element applies to the portion"; + ret += " field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be"; + ret += " named :selected)"; + ret += "

Although the ::selection pseudo-element is dynamic in"; + ret += " [CSS21]) which was originally rendered to a"; + ret += " ::selection state to that other medium, and have all the"; + ret += " required — UAs may omit the ::selection"; + ret += "

These are the CSS properties that apply to ::selection"; + ret += " ::selection may be ignored."; + ret += "

7.4. The ::before and ::after pseudo-elements

"; + ret += "

The ::before and ::after pseudo-elements"; + ret += " content. They are explained in CSS 2.1 [CSS21].

"; + ret += "

When the ::first-letter and ::first-line"; + ret += " pseudo-elements are combined with ::before and"; + ret += " ::after, they apply to the first letter or line of the"; + ret += " element including the inserted text.

"; + ret += "

8. Combinators

"; + ret += "

8.1. Descendant combinator

"; + ret += "

At times, authors may want selectors to describe an element that is"; + ret += " EM element that is contained within an H1"; + ret += " descendant combinator is white space that"; + ret += " separates two sequences of simple selectors. A selector of the form"; + ret += " 'A B' represents an element B that is an"; + ret += " arbitrary descendant of some ancestor element A."; + ret += "

"; + ret += "

Examples:

"; + ret += "

For example, consider the following selector:

"; + ret += "

h1 em

"; + ret += "

It represents an em element being the descendant of"; + ret += " an h1 element. It is a correct and valid, but partial,"; + ret += " description of the following fragment:

"; + ret += "

<h1>This <span class='myclass'>headline";
+    ret += "      is <em>very</em> important</span></h1>

"; + ret += "

The following selector:

"; + ret += "

div * p

"; + ret += "

represents a p element that is a grandchild or later"; + ret += " descendant of a div element. Note the whitespace on"; + ret += " of the P.

"; + ret += "

The following selector, which combines descendant combinators and"; + ret += " attribute selectors, represents an"; + ret += " element that (1) has the href attribute set and (2) is"; + ret += " inside a p that is itself inside a div:

"; + ret += "

div p *[href]

"; + ret += "

8.2. Child combinators

"; + ret += "

A child combinator describes a childhood relationship"; + ret += " 'greater-than sign' (>) character and"; + ret += " separates two sequences of simple selectors."; + ret += "

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element that is"; + ret += " child of body:

"; + ret += "

body > p

"; + ret += "

The following example combines descendant combinators and child"; + ret += " combinators.

"; + ret += "

div ol>li p

"; + ret += " "; + ret += "

It represents a p element that is a descendant of an"; + ret += " li element; the li element must be the"; + ret += " child of an ol element; the ol element must"; + ret += " be a descendant of a div. Notice that the optional white"; + ret += " space around the '>' combinator has been left out.

"; + ret += "

For information on selecting the first child of an element, please"; + ret += " see the section on the :first-child pseudo-class"; + ret += " above.

"; + ret += "

8.3. Sibling combinators

"; + ret += "

There are two different sibling combinators: the adjacent sibling"; + ret += " considering adjacency of elements.

"; + ret += "

8.3.1. Adjacent sibling combinator"; + ret += "

"; + ret += "

The adjacent sibling combinator is made of the 'plus"; + ret += " sign' (U+002B, +) character that separates two"; + ret += " sequences of simple selectors. The elements represented by the two"; + ret += " represented by the second one.

"; + ret += "

Examples:

"; + ret += "

The following selector represents a p element"; + ret += " immediately following a math element:

"; + ret += "

math + p

"; + ret += "

The following selector is conceptually similar to the one in the"; + ret += " adds a constraint to the h1 element, that it must have"; + ret += " class='opener':

"; + ret += "

h1.opener + h2

"; + ret += "

8.3.2. General sibling combinator"; + ret += "

"; + ret += "

The general sibling combinator is made of the 'tilde'"; + ret += " (U+007E, ~) character that separates two sequences of"; + ret += " simple selectors. The elements represented by the two sequences share"; + ret += " represented by the second one.

"; + ret += "

Example:

"; + ret += "

h1 ~ pre

"; + ret += "

represents a pre element following an h1. It"; + ret += " is a correct and valid, but partial, description of:

"; + ret += "

<h1>Definition of the function a</h1>";
+    ret += "      <pre>function a(x) = 12x/13.5</pre>

"; + ret += "

9. Calculating a selector's specificity

"; + ret += "

A selector's specificity is calculated as follows:

"; + ret += "

count the number of ID selectors in the selector (= a)
count the number of class selectors, attributes selectors, and"; + ret += "
count the number of element names in the selector (= c)
ignore pseudo-elements

"; + ret += "

Selectors inside the negation pseudo-class"; + ret += " a pseudo-class.

"; + ret += "

Concatenating the three numbers a-b-c (in a number system with a"; + ret += " large base) gives the specificity.

"; + ret += "

Examples:

"; + ret += "

*               /* a=0 b=0 c=0 -> specificity =   0 */";
+    ret += "

"; + ret += "

Note: the specificity of the styles"; + ret += " specified in an HTML style attribute is described in CSS"; + ret += " 2.1. [CSS21].

"; + ret += "

10. The grammar of Selectors

"; + ret += "

10.1. Grammar

"; + ret += "

The grammar below defines the syntax of Selectors. It is globally"; + ret += " shorthand notations beyond Yacc (see [YACC])"; + ret += " are used:

"; + ret += "

*: 0 or more"; + ret += "
+: 1 or more"; + ret += "
?: 0 or 1"; + ret += "
|: separates alternatives"; + ret += "
[ ]: grouping

"; + ret += "

The productions are:

"; + ret += "

selectors_group";
+    ret += "        ;

"; + ret += "

10.2. Lexical scanner

"; + ret += "

The following is the tokenizer, written in Flex (see"; + ret += " [FLEX]) notation. The tokenizer is"; + ret += " case-insensitive.

"; + ret += "

The two occurrences of '\377' represent the highest character"; + ret += " possible code point in Unicode/ISO-10646. [UNICODE]

"; + ret += "

%option case-insensitive";
+    ret += "      .                return *yytext;

"; + ret += "

11. Namespaces and down-level clients

"; + ret += "

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.

"; + ret += "

It should be noted that a down-level CSS client will (if it"; + ret += " @namespace 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.

"; + ret += "

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.

"; + ret += "

The following are scenarios and examples in which it is possible to"; + ret += " that do not implement this proposal.

"; + ret += "

"; + ret += "
The XML document does not use namespaces.
"; + ret += "
- In this case, it is obviously not necessary to declare or use"; + ret += " attribute selectors will function adequately in a down-level"; + ret += "
- 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 ('|name')"; + ret += " will guarantee that selectors will match only XML elements that"; + ret += "
"; + ret += "
"; + ret += "
The XML document defines a single, default namespace used"; + ret += " names.
"; + ret += "
- In this case, a down-level client will function as if"; + ret += " element type and attribute selectors will match against all"; + ret += "
"; + ret += "
"; + ret += "
The XML document does not use a default namespace, all"; + ret += " to the same URI).
"; + ret += "
- 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 Type selectors and Namespaces"; + ret += " selectors may be declared using an escaped colon"; + ret += " '\\:'"; + ret += " 'html\\:h1' will match"; + ret += " <html:h1>. Selectors using the qualified name"; + ret += "
- Note that selectors declared in this fashion will"; + ret += " only 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 += "
"; + ret += "

"; + ret += "

In other scenarios: when the namespace prefixes used in the XML are"; + ret += " different namespace URIs within the same document, or in"; + ret += " a CSS and XML namespace aware client.

"; + ret += "

12. Profiles

"; + ret += "

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.

"; + ret += "

Non normative examples:"; + ret += "

Selectors profile
Specification	CSS level 1
Accepts	type selectors class selectors ID selectors :link,"; + ret += " :visited and :active pseudo-classes descendant combinator"; + ret += " ::first-line and ::first-letter pseudo-elements"; + ret += "
Excludes	"; + ret += " universal selector attribute selectors :hover and"; + ret += " pseudo-classes :target pseudo-class :lang()"; + ret += " pseudo-class all UI"; + ret += " element states pseudo-classes all structural"; + ret += " pseudo-classes negation pseudo-class all"; + ret += " UI element fragments pseudo-elements ::before and ::after"; + ret += " pseudo-elements child combinators sibling combinators"; + ret += " namespaces
Extra constraints	only one class selector allowed per sequence of simple"; + ret += " selectors"; + ret += "

Selectors profile
Specification	CSS level 2
Accepts	type selectors universal selector attribute presence and"; + ret += " values selectors class selectors ID selectors :link,"; + ret += " descendant combinator child combinator adjacent"; + ret += " combinator ::first-line and ::first-letter"; + ret += " pseudo-elements ::before"; + ret += "
Excludes	"; + ret += " content selectors substring matching attribute"; + ret += " selectors :target pseudo-classes all UI element"; + ret += " states pseudo-classes all structural pseudo-classes other"; + ret += " than :first-child negation pseudo-class all UI element"; + ret += " fragments pseudo-elements general sibling combinators"; + ret += " namespaces
Extra constraints	more than one class selector per sequence of simple selectors"; + ret += "

"; + ret += "

In CSS, selectors express pattern matching rules that determine which"; + ret += "

The following selector (CSS level 2) will match all anchors a"; + ret += " with attribute name set inside a section 1 header"; + ret += " h1:"; + ret += "

h1 a[name]

"; + ret += "

All CSS declarations attached to such a selector are applied to elements"; + ret += " matching it.

"; + ret += "

Selectors profile
Specification	STTS 3
Accepts	"; + ret += " type selectors universal selectors attribute"; + ret += " selectors class"; + ret += " selectors ID selectors all structural"; + ret += " pseudo-classes "; + ret += " namespaces
Excludes	non-accepted pseudo-classes pseudo-elements
Extra constraints	some selectors and combinators are not allowed in fragment"; + ret += "

"; + ret += "

Selectors can be used in STTS 3 in two different"; + ret += "

a selection mechanism equivalent to CSS selection mechanism:"; + ret += "
fragment descriptions that appear on the right side of declarations."; + ret += "

"; + ret += "

13. Conformance and requirements

"; + ret += "

This section defines conformance with the present specification only."; + ret += "

The inability of a user agent to implement part of this specification due to"; + ret += "

All specifications reusing Selectors must contain a Profile listing the"; + ret += " subset of Selectors it accepts or excludes, and describing the constraints"; + ret += "

Invalidity is caused by a parsing error, e.g. an unrecognized token or a"; + ret += "

User agents must observe the rules for handling parsing errors:"; + ret += "

a simple selector containing an undeclared namespace prefix is invalid"; + ret += "
a selector containing an invalid simple selector, an invalid combinator"; + ret += "
a group of selectors containing an invalid selector is invalid.

"; + ret += "

Specifications reusing Selectors must define how to handle parsing"; + ret += " used is dropped.)

"; + ret += " "; + ret += "

14. Tests

"; + ret += "

This specification has a test"; + ret += " suite allowing user agents to verify their basic conformance to"; + ret += " and does not cover all possible combined cases of Selectors.

"; + ret += "

15. Acknowledgements

"; + ret += "

The CSS working group would like to thank everyone who has sent"; + ret += " comments on this specification over the years.

"; + ret += "

The working group would like to extend special thanks to Donna"; + ret += " the final editorial review.

"; + ret += "

16. References

"; + ret += "

[CSS1]"; + ret += ": Bert Bos, Håkon Wium Lie; 'Cascading"; + ret += " Style Sheets, level 1', W3C Recommendation, 17 Dec 1996, revised"; + ret += "; (http://www.w3.org/TR/REC-CSS1)"; + ret += "
[CSS21]"; + ret += ": Bert Bos, Tantek Çelik, Ian Hickson, Håkon"; + ret += " Wium Lie, editors; 'Cascading Style Sheets, level 2 revision"; + ret += " 1', W3C Working Draft, 13 June 2005"; + ret += "; (http://www.w3.org/TR/CSS21)"; + ret += "
[CWWW]"; + ret += ": Martin J. Dürst, François Yergeau,"; + ret += " Misha Wolf, Asmus Freytag, Tex Texin, editors; 'Character Model"; + ret += " for the World Wide Web', W3C Recommendation, 15 February 2005"; + ret += "; (http://www.w3.org/TR/charmod/)"; + ret += "
[FLEX]"; + ret += ": 'Flex: The Lexical Scanner"; + ret += " Generator', Version 2.3.7, ISBN 1882114213"; + ret += "
[HTML4]"; + ret += ": Dave Ragget, Arnaud Le Hors, Ian Jacobs,"; + ret += " editors; 'HTML 4.01 Specification', W3C Recommendation, 24"; + ret += "; "; + ret += " (http://www.w3.org/TR/html4/)"; + ret += "
[MATH]"; + ret += ": Patrick Ion, Robert Miner, editors; 'Mathematical"; + ret += " Markup Language (MathML) 1.01', W3C Recommendation, revision of 7"; + ret += "; (http://www.w3.org/TR/REC-MathML/)"; + ret += "
[RFC3066]"; + ret += ": H. Alvestrand; 'Tags for the"; + ret += " Identification of Languages', Request for Comments 3066, January"; + ret += "; (http://www.ietf.org/rfc/rfc3066.txt)"; + ret += "
[STTS]"; + ret += ": Daniel Glazman; 'Simple Tree Transformation"; + ret += " Sheets 3', Electricité de France, submission to the W3C,"; + ret += "; (http://www.w3.org/TR/NOTE-STTS3)"; + ret += "
[SVG]"; + ret += ": Jon Ferraiolo, 藤沢淳, Dean"; + ret += " Jackson, editors; 'Scalable Vector Graphics (SVG) 1.1"; + ret += " Specification', W3C Recommendation, 14 January 2003"; + ret += "; (http://www.w3.org/TR/SVG/)"; + ret += "
[UNICODE]: The Unicode"; + ret += " Standard, Version 4.1, The Unicode Consortium. Boston, MA,"; + ret += " Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode"; + ret += " 4.0.1 and Unicode"; + ret += " 4.1.0."; + ret += "; (http://www.unicode.org/versions/)"; + ret += "
[XML10]"; + ret += ": Tim Bray, Jean Paoli, C. M. Sperberg-McQueen,"; + ret += " Eve Maler, François Yergeau, editors; 'Extensible Markup"; + ret += " Language (XML) 1.0 (Third Edition)', W3C Recommendation, 4"; + ret += "; (http://www.w3.org/TR/REC-xml/)"; + ret += "
[XMLNAMES]"; + ret += ": Tim Bray, Dave Hollander, Andrew Layman,"; + ret += " editors; 'Namespaces in XML', W3C Recommendation, 14"; + ret += "; (http://www.w3.org/TR/REC-xml-names/)"; + ret += "
[YACC]"; + ret += ": S. C. Johnson; 'YACC — Yet another"; + ret += " compiler compiler', Technical Report, Murray Hill, 1975"; + ret += "

"; + ret += " 1"; + ret += " 2"; + $(e).html(ret); + } + +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java index 5bc16db9..82b46944 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryDemoModule.java @@ -1,103 +1,103 @@ -/* - * Copyright 2011, The gwtquery team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a copy of - * the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.plugins.Effects.Effects; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.GWT; -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.Function; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Selector; -import com.google.gwt.query.client.Selectors; -import com.google.gwt.query.client.plugins.Effects.Speed; -import com.google.gwt.user.client.Event; - -/** - * - */ -public class GwtQueryDemoModule implements EntryPoint { - - // Compile-time Selectors! - public interface Slide extends Selectors { - - // find all LI elements in DIV.slide elements - @Selector("div.slide li") - NodeList allSlideBullets(); - - // Find all DIV elements with class 'slide' - @Selector("div.slide") - NodeList allSlides(); - - // find all LI elements rooted at ctx - @Selector("li") - NodeList slideBulletsCtx(Node ctx); - } - - public void onModuleLoad() { - // Ask GWT compiler to generate our interface - final Slide s = GWT.create(Slide.class); - final GQuery slides = $(s.allSlides()); - - // we initially hide all slides and bullets - slides.hide().eq(0).as(Effects).clipAppear(); - $(s.allSlideBullets()).hide(); - - - // add onclick handler to body element - $(slides).click(new Function() { - // two state variables to note current slide being shown - // and current bullet - int curSlide = 0; - int curBullets = 0; - - // query and store all bullets of current slide - GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide))); - - public boolean f(Event e) { - // onclick, if not all bullets shown, show a bullet and increment - if (curBullets < bullets.size()) { - bullets.eq(curBullets++).as(Effects).fadeIn(Speed.SLOW); - } else { - // all bullets shown, hide them and current slide - bullets.hide(); - - // move to next slide, checking for wrap around - int lastSlide = curSlide++; - if (curSlide == slides.size()) { - curSlide = 0; - } - - // query for new set of bullets, and show next slide - curBullets = 0; - bullets = $(s.slideBulletsCtx(slides.get(curSlide))); - - // Hide the last slide and show the next when the effects finishes - slides.eq(lastSlide).as(Effects).fadeOut(new Function() { - public void f(Element e) { - slides.eq(curSlide).as(Effects).clipAppear(); - } - }); - } - return true; - } - }); - } -} +/* + * Copyright 2011, The gwtquery team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.plugins.Effects.Effects; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.client.GWT; +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.Function; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.Selector; +import com.google.gwt.query.client.Selectors; +import com.google.gwt.query.client.plugins.Effects.Speed; +import com.google.gwt.user.client.Event; + +/** + * + */ +public class GwtQueryDemoModule implements EntryPoint { + + // Compile-time Selectors! + public interface Slide extends Selectors { + + // find all LI elements in DIV.slide elements + @Selector("div.slide li") + NodeList allSlideBullets(); + + // Find all DIV elements with class 'slide' + @Selector("div.slide") + NodeList allSlides(); + + // find all LI elements rooted at ctx + @Selector("li") + NodeList slideBulletsCtx(Node ctx); + } + + public void onModuleLoad() { + // Ask GWT compiler to generate our interface + final Slide s = GWT.create(Slide.class); + final GQuery slides = $(s.allSlides()); + + // we initially hide all slides and bullets + slides.hide().eq(0).as(Effects).clipAppear(); + $(s.allSlideBullets()).hide(); + + + // add onclick handler to body element + $(slides).click(new Function() { + // two state variables to note current slide being shown + // and current bullet + int curSlide = 0; + int curBullets = 0; + + // query and store all bullets of current slide + GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide))); + + public boolean f(Event e) { + // onclick, if not all bullets shown, show a bullet and increment + if (curBullets < bullets.size()) { + bullets.eq(curBullets++).as(Effects).fadeIn(Speed.SLOW); + } else { + // all bullets shown, hide them and current slide + bullets.hide(); + + // move to next slide, checking for wrap around + int lastSlide = curSlide++; + if (curSlide == slides.size()) { + curSlide = 0; + } + + // query for new set of bullets, and show next slide + curBullets = 0; + bullets = $(s.slideBulletsCtx(slides.get(curSlide))); + + // Hide the last slide and show the next when the effects finishes + slides.eq(lastSlide).as(Effects).fadeOut(new Function() { + public void f(Element e) { + slides.eq(curSlide).as(Effects).clipAppear(); + } + }); + } + return true; + } + }); + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java index 8f5157ad..563f29e7 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java @@ -1,123 +1,123 @@ -/* - * Copyright 2011, The gwtquery team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a copy of - * the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.$$; -import static com.google.gwt.query.client.GQuery.lazy; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style.Position; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.css.CSS; -import com.google.gwt.query.client.css.Length; -import com.google.gwt.query.client.css.RGBColor; -import com.google.gwt.query.client.plugins.Effects; -import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; -import com.google.gwt.user.client.Event; - -public class GwtQueryEffectsModule implements EntryPoint { - - public void onModuleLoad() { - $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)) - .hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), - lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done()); - - $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() { - public boolean f(Event e) { - $("div.outer > div").as(Effects.Effects). - animate($$("left: '+=100'"), 400, Easing.LINEAR). - animate($$("top: '+=100'"), 400, Easing.LINEAR). - animate($$("left: '-=100'"), 400, Easing.LINEAR). - animate($$("top: '-=100'"), 400, Easing.LINEAR); - return true; - } - }); - $(".note").click(lazy().fadeOut().done()); - $(".note").append(" Hello"); - - final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects); - final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects); - - $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() { - public void f(Element e) { - $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'"); - } - }, new Function() { - public void f(Element e) { - $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'"); - } - }); - - $("#b1").toggle(new Function() { - public void f(Element e) { - $(".a").toggle(); - } - }, new Function() { - public void f(Element e) { - a.fadeOut(); - } - }, new Function() { - public void f(Element e) { - a.fadeIn(); - } - }, new Function() { - public void f(Element e) { - a.slideUp(); - } - }, new Function() { - public void f(Element e) { - a.slideDown(); - } - }, new Function() { - public void f(Element e) { - a.slideLeft(); - } - }, new Function() { - public void f(Element e) { - a.slideRight(); - } - }, new Function() { - public void f(Element e) { - a.animate("left: '+=300', width: 'hide'"); - } - }, new Function() { - public void f(Element e) { - a.animate("left: '-=300', width: 'show'"); - } - }); - - $("#b2").toggle(new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipUp(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipDown(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipDisappear(); - } - }, new Function() { - public void f(Element e) { - b.as(Effects.Effects).clipAppear(); - } - }); - - } -} +/* + * Copyright 2011, The gwtquery team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.GQuery.$$; +import static com.google.gwt.query.client.GQuery.lazy; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.Style.Position; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.css.CSS; +import com.google.gwt.query.client.css.Length; +import com.google.gwt.query.client.css.RGBColor; +import com.google.gwt.query.client.plugins.Effects; +import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; +import com.google.gwt.user.client.Event; + +public class GwtQueryEffectsModule implements EntryPoint { + + public void onModuleLoad() { + $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)) + .hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), + lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done()); + + $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() { + public boolean f(Event e) { + $("div.outer > div").as(Effects.Effects). + animate($$("left: '+=100'"), 400, Easing.LINEAR). + animate($$("top: '+=100'"), 400, Easing.LINEAR). + animate($$("left: '-=100'"), 400, Easing.LINEAR). + animate($$("top: '-=100'"), 400, Easing.LINEAR); + return true; + } + }); + $(".note").click(lazy().fadeOut().done()); + $(".note").append(" Hello"); + + final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects); + final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects); + + $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() { + public void f(Element e) { + $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'"); + } + }, new Function() { + public void f(Element e) { + $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'"); + } + }); + + $("#b1").toggle(new Function() { + public void f(Element e) { + $(".a").toggle(); + } + }, new Function() { + public void f(Element e) { + a.fadeOut(); + } + }, new Function() { + public void f(Element e) { + a.fadeIn(); + } + }, new Function() { + public void f(Element e) { + a.slideUp(); + } + }, new Function() { + public void f(Element e) { + a.slideDown(); + } + }, new Function() { + public void f(Element e) { + a.slideLeft(); + } + }, new Function() { + public void f(Element e) { + a.slideRight(); + } + }, new Function() { + public void f(Element e) { + a.animate("left: '+=300', width: 'hide'"); + } + }, new Function() { + public void f(Element e) { + a.animate("left: '-=300', width: 'show'"); + } + }); + + $("#b2").toggle(new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipUp(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipDown(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipDisappear(); + } + }, new Function() { + public void f(Element e) { + b.as(Effects.Effects).clipAppear(); + } + }); + + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java index 130ae116..95f55410 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java @@ -1,46 +1,46 @@ -/* - * Copyright 2011, The gwtquery team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a copy of - * the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.dom.client.Element; -import com.google.gwt.query.client.Function; -import com.google.gwt.query.client.plugins.Effects; - -/** - * @author Manolo Carrasco - */ -public class GwtQueryImageZoom implements EntryPoint { - - public void onModuleLoad() { - // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka - // http://www.sohtanaka.com/web-design/examples/image-zoom/ - $("ul.thumb li").hover(new Function() { - public void f(Element e) { - $(e).css("z-index", "10").find("img").addClass("hover") - .as(Effects.Effects).stop() - .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200); - }} , new Function() { - public void f(Element e) { - $(e).css("z-index", "0").find("img").removeClass("hover") - .as(Effects.Effects).stop() - .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600); - }}); - - } -} +/* + * Copyright 2011, The gwtquery team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package gwtquery.samples.client; + +import static com.google.gwt.query.client.GQuery.$; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.dom.client.Element; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.plugins.Effects; + +/** + * @author Manolo Carrasco + */ +public class GwtQueryImageZoom implements EntryPoint { + + public void onModuleLoad() { + // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka + // http://www.sohtanaka.com/web-design/examples/image-zoom/ + $("ul.thumb li").hover(new Function() { + public void f(Element e) { + $(e).css("z-index", "10").find("img").addClass("hover") + .as(Effects.Effects).stop() + .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200); + }} , new Function() { + public void f(Element e) { + $(e).css("z-index", "0").find("img").removeClass("hover") + .as(Effects.Effects).stop() + .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600); + }}); + + } +} diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java index 581d34ae..0d35c10e 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java @@ -1,80 +1,80 @@ -/* - * Copyright 2011, The gwtquery team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a copy of - * the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations under - * the License. - */ -package gwtquery.samples.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.document; -import static com.google.gwt.query.client.GQuery.lazy; -import static com.google.gwt.query.client.plugins.Widgets.Widgets; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.GWT; -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style.Cursor; -import com.google.gwt.event.dom.client.ClickEvent; -import com.google.gwt.event.dom.client.ClickHandler; -import com.google.gwt.query.client.GQuery; -import com.google.gwt.query.client.Selector; -import com.google.gwt.query.client.Selectors; -import com.google.gwt.query.client.css.CSS; -import com.google.gwt.query.client.css.RGBColor; -import com.google.gwt.query.client.plugins.widgets.WidgetInitializer; -import com.google.gwt.user.client.Window; -import com.google.gwt.user.client.ui.Button; -import com.google.gwt.user.client.ui.Label; - -public class GwtQuerySampleModule implements EntryPoint { - - public interface Sample extends Selectors { - @Selector(".note") - GQuery allNotes(); - } - - public void onModuleLoad() { - // Use compiled selectors - Sample s = GWT.create(Sample.class); - - // Just a simple usage of dom manipulation, events, and lazy usage - s.allNotes().text("Hello Google I/O"). - css(CSS.CURSOR.with(Cursor.POINTER)). - toggle( - lazy().css(CSS.COLOR.with(RGBColor.RED)).done(), - lazy().css(CSS.COLOR.with(null)).done() - ); - // Cascade effects - $("

Cascade Efects

").appendTo(document).hide().fadeIn(5000).fadeOut(3000); - - // Widgets - $(".btn").as(Widgets).button(new WidgetInitializer - -

- -

- - + + + +GQuery Effects Sample + + + + +

Animation, queue and delay methods

This example shows you how using gwtquery to make animation

+ +

+ + diff --git a/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html index 9624dd03..fe55faa2 100644 --- a/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html +++ b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html @@ -1,51 +1,51 @@ - - - -GQuery Effects Sample - - - - -

Animate css color properties

This example shows you how using gwtquery to perform animation on -color css properties (backgroundColor, color, corderColor...). Have a look at the java code

- -

BANG !

- - -

GwtQuery

- - + + + +GQuery Effects Sample + + + + +

Animate css color properties

This example shows you how using gwtquery to perform animation on +color css properties (backgroundColor, color, corderColor...). Have a look at the java code

+ +

BANG !

+ + +

GwtQuery

+ + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html index ac758024..3cfced81 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html @@ -1,176 +1,176 @@ - - - - - GwtQuery Benchmarks - - - -

- GwtQuery benchmarks -

About

Loading Javascript frameworks, please wait ...

- -

- - - - - - + + + + + GwtQuery Benchmarks + + + +

+ GwtQuery benchmarks +

About

Loading Javascript frameworks, please wait ...

+ +

+ + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html index 211e3e0f..c9a78113 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryDemo.html @@ -1,50 +1,50 @@ - - - GQuery Demo - - - - -

- Short example of how to do progressively enhance DIV, UL, LI elements into - powerpoint-like slides -

- -

- Slide 1 -

jQuery is
such a
Cool Library

- Slide 2 -

Now GWT
has a
jQuery-like API Too!
GwtQuery Rocks!

- - - - \ No newline at end of file + + + GQuery Demo + + + + +

+ Short example of how to do progressively enhance DIV, UL, LI elements into + powerpoint-like slides +

+ +

+ Slide 1 +

jQuery is
such a
Cool Library

+ Slide 2 +

Now GWT
has a
jQuery-like API Too!
GwtQuery Rocks!

+ + + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html index e1bb5861..b0a2d8d4 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html @@ -1,65 +1,65 @@ - - - - - GQuery Demo - - - - -

- Click or DblClick on these notes -

Foo bar baz

-
-
- - -
-
-

-Span 1 -Span 2 -Span 3 -

-
-

Div 1

Div 2

Div 3

Div 4

- - - \ No newline at end of file + + + + + GQuery Demo + + + + +

+ Click or DblClick on these notes +

Foo bar baz

+
+
+ + +
+
+

+Span 1 +Span 2 +Span 3 +

+
+

Div 1

Div 2

Div 3

Div 4

+ + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html index 021f6ef5..857e9fd3 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffectsMin.html @@ -1,65 +1,65 @@ - - - - - GQuery Demo - - - - -

- Click or DblClick on these notes -

Foo bar baz

-
-
- - -
-
-

-Span 1 -Span 2 -Span 3 -

-
-

Div 1

Div 2

Div 3

Div 4

- - - \ No newline at end of file + + + + + GQuery Demo + + + + +

+ Click or DblClick on these notes +

Foo bar baz

+
+
+ + +
+
+

+Span 1 +Span 2 +Span 3 +

+
+

Div 1

Div 2

Div 3

Div 4

+ + + diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html index 9c01206d..659baad8 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html @@ -6,11 +6,11 @@ - - -

Slide Effects Sample

This page lists and shows all slide effects available in GwtQuery

- - - - - - - - - - - - - - - - - - -

- SlideUp - - Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh. - - - -	- SlideLeft - - Lorem - ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - ultricies nulla condimentum diam viverra vitae hendrerit lorem - tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a - nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. - Morbi in diam nibh. - - - -
- SlideDown - - Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh. - - - -	- SlideRight - - Lorem - ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - ultricies nulla condimentum diam viverra vitae hendrerit lorem - tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a - nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. - Morbi in diam nibh. - - - -
- SlideToogle - - Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Vestibulum ultricies - nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed - vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam - venenatis dictum sem, eget euismod dui laoreet non. Morbi in - diam nibh. - -

- - + + + +GQuery Effects Sample + + + + +

Slide Effects Sample

This page lists and shows all slide effects available in GwtQuery

+ + + + + + + + + + + + + + + + + + +

+ SlideUp + + Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh. + + + +	+ SlideLeft + + Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + ultricies nulla condimentum diam viverra vitae hendrerit lorem + tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a + nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. + Morbi in diam nibh. + + + +
+ SlideDown + + Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh. + + + +	+ SlideRight + + Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + ultricies nulla condimentum diam viverra vitae hendrerit lorem + tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a + nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. + Morbi in diam nibh. + + + +
+ SlideToogle + + Lorem ipsum dolor + sit amet, consectetur adipiscing elit. Vestibulum ultricies + nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed + vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam + venenatis dictum sem, eget euismod dui laoreet non. Morbi in + diam nibh. + +

+ + diff --git a/samples/src/main/java/gwtquery/samples/public/html/dojobench.html b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html index 4f4e94db..6979a121 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/dojobench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/dojobench.html @@ -1,13 +1,13 @@ - - - Dojo - - - - - - + + + Dojo + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html index fc1dab7a..4e65be0c 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/domassistantbench.html @@ -1,13 +1,13 @@ - - - DomAssistant - - - - - - + + + DomAssistant + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html index 913ae711..dd32d1bd 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/gwtbench.html @@ -4,7 +4,7 @@ + diff --git a/samples/src/main/java/gwtquery/samples/public/html/iframebench.html b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html index 78962fe2..79e717dd 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/iframebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/iframebench.html @@ -1,42 +1,42 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html index 45238eaa..9ad083f2 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/jquerybench.html @@ -1,13 +1,13 @@ - - - JQuery - - - - - - + + + JQuery + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html index 448e031b..78855778 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/prototypebench.html @@ -1,13 +1,13 @@ - - - Prototype - - - - - - + + + Prototype + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html index acc7c326..6b2be22e 100644 --- a/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html +++ b/samples/src/main/java/gwtquery/samples/public/html/sizzlebench.html @@ -1,13 +1,13 @@ - - - Sizzle - - - - - - + + + Sizzle + + + + + + -- cgit v1.2.3

Selectors

W3C Working Draft 15 December 2005

Abstract

Status of this document

1.1. Dependencies

1.2. Terminology

1.3. Changes from CSS2

2. Selectors

6.3.2. Substring matching attribute"; - ret += " selectors

The link pseudo-classes: :link and :visited

The user action pseudo-classes"; - ret += " :hover, :active, and :focus

:empty pseudo-class

6.6.7. The negation pseudo-class

8.3.1. Adjacent sibling combinator"; - ret += "

8.3.2. General sibling combinator"; - ret += "

13. Conformance and requirements

14. Tests

15. Acknowledgements

Selectors

W3C Working Draft 15 December 2005

Abstract

Status of this document

1.1. Dependencies

1.2. Terminology

1.3. Changes from CSS2

2. Selectors

6.3.2. Substring matching attribute"; + ret += " selectors

The link pseudo-classes: :link and :visited

The user action pseudo-classes"; + ret += " :hover, :active, and :focus

:empty pseudo-class

6.6.7. The negation pseudo-class

8.3.1. Adjacent sibling combinator"; + ret += "

8.3.2. General sibling combinator"; + ret += "

13. Conformance and requirements

14. Tests

15. Acknowledgements

GwtQuery Rocks !

Animation, queue and delay methods

Animation, queue and delay methods

Animate css color properties

Animate css color properties

- GwtQuery benchmarks -

+ GwtQuery benchmarks +

Slide Effects Sample