From 1313f0c0286cc31edf9874cedeb44f8689e7d0d0 Mon Sep 17 00:00:00 2001 From: Manuel Carrasco Moñino Date: Mon, 26 Nov 2012 16:20:48 +0100 Subject: End lines with LF instead of CRLF --- .../com/google/gwt/query/DevTestRunner.gwt.xml | 2 +- .../com/google/gwt/query/client/DevTestRunner.java | 4044 ++++++++++---------- .../com/google/gwt/query/client/MyTestCase.java | 296 +- .../java/com/google/gwt/query/public/test.html | 18 +- 4 files changed, 2180 insertions(+), 2180 deletions(-) (limited to 'devtest/src/main/java') diff --git a/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml b/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml index 537f0c47..401fde05 100644 --- a/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml +++ b/devtest/src/main/java/com/google/gwt/query/DevTestRunner.gwt.xml @@ -2,4 +2,4 @@ - + diff --git a/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java b/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java index 26b5faea..53ef8e18 100644 --- a/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java +++ b/devtest/src/main/java/com/google/gwt/query/client/DevTestRunner.java @@ -1,2022 +1,2022 @@ -/* - * 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 com.google.gwt.query.client; - -import static com.google.gwt.query.client.GQuery.$; -import static com.google.gwt.query.client.GQuery.window; - -import com.google.gwt.core.client.EntryPoint; -import com.google.gwt.core.client.Scheduler; -import com.google.gwt.core.client.Scheduler.RepeatingCommand; -import com.google.gwt.query.client.js.JsUtils; - -/** - * This module is thought to emulate a test environment similar to - * GWTTestCase, but running it in development mode. - * - * The main goal of it is to execute tests in a faster way, because you just - * push reload in your browser after changing any code. - * - * @author manolo - * - */ -public class DevTestRunner extends MyTestCase implements EntryPoint { - - public void onModuleLoad() { - try { - gwtSetUp(); - // Replace this with the method to run - testSomething(); - } catch (Exception ex) { - ex.printStackTrace(); - $(e).html("").after("
ERROR: " + ex.getMessage() + "
"); - } - } - - public void testSomething() { - // Copy and paste any test from the gquery suite - } - - /** - * Runs jquery code via jsni. - * - * Example: - * System.out.println(evalJQuery("$('div').size()")); - */ - private native T evalJQuery(String command) /*-{ - command = command.replace(/\$/g, "$wnd.$"); - try { - return "" + eval(command); - } catch(e) { - $wnd.alert(command + " " + e); - return ""; - } - }-*/; - - /** - * Loads jquery and schedule the execution of the method testCompare() - * which should have code to test something in both in jquery and gquery. - * - * Put this method in onModuleLoad, and replace below the method to execute - * after jquery is available - */ - public void runTestJQuery() { - JsUtils.loadScript("jquery-1.6.2.js", "jq"); - Scheduler.get().scheduleFixedDelay(new RepeatingCommand() { - private int cont = 0; - private native boolean loaded(String func) /*-{ - return eval("$wnd." + func) ? true : false; - }-*/; - public boolean execute() { - if (cont++ > 10 || JsUtils.hasProperty(window, "$")) { - - // Replace with the method to run - testJQueryCompare(); - return false; - } - return true; - } - }, 100); - } - - public void testJQueryCompare() { - $(e).html("

Content 1

"); - GQuery g = $("#child"); - Properties prop1; - - prop1 = GQuery.$$("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'"); - g.css(prop1); - validateCurCSSBoth("#child", prop1.keys()); - } - - public void validateSizesBoth(String html) { - $(e).html(html); - String gqw = "" + $(".outer").width(); - String jqw = evalJQuery("$('.outer').width()"); - String gqh = "" + $(".outer").height(); - String jqh = evalJQuery("$('.outer').height()"); - - System.out.println(".outer size: GQuery: " + gqw + "x" + gqh + " jQuery: " + jqw + "x" + jqh); - assertEquals(gqw, jqw); - assertEquals(gqh, jqh); - } - - public void validateCssBoth(String selector, boolean force, String... props) { - for (String prop: props) { - String gs = $(selector).css(prop, force); - String js = evalJQuery("$.css($('" + selector + "').get(0), '" + prop + "', " + force + ")"); - System.out.println(selector + " prop:" + prop + " force:" + force + " gQuery:" + gs + " jQuery:" + js); - assertEquals(gs.replaceAll("px", ""), js.replaceAll("px", "")); - } - } - - public void validateCurCSSBoth(String selector, String... props) { - for (String prop: props) { - String gs = Double.toString($(selector).cur(prop, true)).replaceFirst("\\.\\d+$", ""); - String js = evalJQuery("$.curCSS($('" + selector + "').get(0), '" + prop + "', true)"); - gs = gs.replaceAll("px$", ""); - js = js.replaceAll("px$", ""); - System.out.println(selector + " prop:" + prop + " gQuery:" + gs + " jQuery:" + js); - assertEquals(gs, js); - } - } - - // This method is used to initialize a huge html String, because - // java 1.5 has a limitation in the size of static strings. - private String getTestContent() { - String ret = ""; - ret += "
"; - ret += "
"; - ret += "

W3C

"; - ret += "

Selectors

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

W3C Working Draft 15 December 2005

"; - ret += "
"; - ret += "
This version:
"; - ret += "
"; - ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
"; - ret += "
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 += "
"; - 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 += "
"; - 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 += "

Table of contents

"; - ret += " "; - 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 += "

    "; - ret += "
  • the list of basic definitions (selector, group of selectors,"; - ret += " of simple selectors, and the term 'simple selector' is now used for"; - ret += "
  • "; - ret += "
  • an optional namespace component is now allowed in type element"; - ret += " selectors, the universal selector and attribute selectors"; - ret += "
  • "; - ret += "
  • a new combinator has been"; - ret += "
  • "; - ret += "
  • new simple selectors including substring matching attribute"; - ret += " selectors, and new pseudo-classes"; - ret += "
  • "; - ret += "
  • new pseudo-elements, and introduction of the '::' convention"; - ret += "
  • "; - ret += "
  • the grammar has been rewritten
  • "; - ret += "
  • profiles to be added to specifications integrating Selectors"; - ret += " and defining the set of selectors which is actually supported by"; - ret += "
  • "; - ret += "
  • Selectors are now a CSS3 Module and an independent"; - ret += "
  • "; - ret += "
  • the specification now has its own test suite
  • "; - ret += "
"; - 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 += "
PatternMeaningDescribed in sectionFirst defined in CSS level
*any elementUniversal"; - ret += " selector2
Ean element of type EType selector1
E[foo]an E element with a 'foo' attributeAttribute"; - ret += " selectors2
E[foo='bar']an E element whose 'foo' attribute value is exactly"; - ret += " Attribute"; - ret += " selectors2
E[foo~='bar']an E element whose 'foo' attribute value is a list of"; - ret += " Attribute"; - ret += " selectors2
E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; - ret += " Attribute"; - ret += " selectors3
E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; - ret += " Attribute"; - ret += " selectors3
E[foo*='bar']an E element whose 'foo' attribute value contains the"; - ret += " Attribute"; - ret += " selectors3
E[hreflang|='en']an E element whose 'hreflang' attribute has a"; - ret += " Attribute"; - ret += " selectors2
E:rootan E element, root of the documentStructural"; - ret += " pseudo-classes3
E:nth-child(n)an E element, the n-th child of its parentStructural"; - ret += " pseudo-classes3
E:nth-last-child(n)an E element, the n-th child of its parent, counting"; - ret += " Structural"; - ret += " pseudo-classes3
E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; - ret += " pseudo-classes3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; - ret += " Structural"; - ret += " pseudo-classes3
E:first-childan E element, first child of its parentStructural"; - ret += " pseudo-classes2
E:last-childan E element, last child of its parentStructural"; - ret += " pseudo-classes3
E:first-of-typean E element, first sibling of its typeStructural"; - ret += " pseudo-classes3
E:last-of-typean E element, last sibling of its typeStructural"; - ret += " pseudo-classes3
E:only-childan E element, only child of its parentStructural"; - ret += " pseudo-classes3
E:only-of-typean E element, only sibling of its typeStructural"; - ret += " pseudo-classes3
E:emptyan E element that has no children (including text"; - ret += " Structural"; - ret += " pseudo-classes3
E:link
E:visited
an E element being the source anchor of a hyperlink of"; - ret += " The link"; - ret += " pseudo-classes1
E:active
E:hover
E:focus
an E element during certain user actionsThe user"; - ret += " action pseudo-classes1 and 2
E:targetan E element being the target of the referring URIThe target"; - ret += " pseudo-class3
E:lang(fr)an element of type E in language 'fr' (the document"; - ret += " The :lang()"; - ret += " pseudo-class2
E:enabled
E:disabled
a user interface element E which is enabled or"; - ret += " The UI element states"; - ret += " pseudo-classes3
E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; - ret += " The UI element states"; - ret += " pseudo-classes3
E::first-linethe first formatted line of an E elementThe ::first-line"; - ret += " pseudo-element1
E::first-letterthe first formatted letter of an E elementThe ::first-letter"; - ret += " pseudo-element1
E::selectionthe portion of an E element that is currently"; - ret += " The UI element"; - ret += " fragments pseudo-elements3
E::beforegenerated content before an E elementThe ::before"; - ret += " pseudo-element2
E::aftergenerated content after an E elementThe ::after"; - ret += " pseudo-element2
E.warningan E element whose class is"; - ret += " Class"; - ret += " selectors1
E#myidan E element with ID equal to 'myid'.ID"; - ret += " selectors1
E:not(s)an E element that does not match simple selector sNegation"; - ret += " pseudo-class3
E Fan F element descendant of an E elementDescendant"; - ret += " combinator1
E > Fan F element child of an E elementChild"; - ret += " combinator2
E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; - ret += " 2
E ~ Fan F element preceded by an E elementGeneral 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

Example:

"; - ret += "

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

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

Examples:

"; - ret += "
    "; - ret += "
  • *[hreflang|=en] and [hreflang|=en] are"; - ret += "
  • "; - ret += "
  • *.warning and .warning are equivalent,"; - ret += "
  • "; - ret += "
  • *#myid and #myid are equivalent.
  • "; - ret += "
"; - ret += "
"; - 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 += "
"; - ret += "
ns|*
"; - ret += "
all elements in namespace ns
"; - ret += "
*|*
"; - ret += "
all elements
"; - ret += "
|*
"; - ret += "
all elements without any declared namespace
"; - ret += "
*
"; - ret += "
if no default namespace has been specified, this is equivalent to *|*."; - ret += "
"; - 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 += "
"; - ret += "
[att]"; - ret += "
Represents an element with the att attribute, whatever the"; - ret += "
"; - ret += "
[att=val]
"; - ret += "
Represents an element with the att attribute whose value is"; - ret += "
"; - ret += "
[att~=val]
"; - ret += "
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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "
[att^=val]
"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - ret += "
[att$=val]"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - ret += "
[att*=val]"; - ret += "
Represents an element with the att attribute whose value"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

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

"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
    "; - ret += "
  • The :link pseudo-class applies to links that have"; - ret += "
  • "; - ret += "
  • The :visited pseudo-class applies once the link has"; - ret += "
  • "; - 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 += "
"; - ret += "

Example:

"; - ret += "

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

"; - ret += "
a.external:visited
"; - ret += "
"; - 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 += "
    "; - 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 += "
  • "; - ret += "
  • The :active pseudo-class applies while an element"; - ret += "
  • "; - ret += "
  • The :focus pseudo-class applies while an element"; - ret += "
  • "; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

Example:

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

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

"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

Example:

"; - ret += "

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

"; - ret += "
tr > td:last-of-type
"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

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

"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "

is

"; - 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 += "
"; - 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 += "
"; - ret += "

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

"; - ret += "
"; - 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 += "
"; - ret += "

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

"; - 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 += "
"; - ret += "

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

"; - ret += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - 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 += "
"; - ret += "

9. Calculating a selector's specificity

"; - ret += "

A selector's specificity is calculated as follows:

"; - ret += "
    "; - ret += "
  • count the number of ID selectors in the selector (= a)
  • "; - ret += "
  • count the number of class selectors, attributes selectors, and"; - ret += "
  • "; - ret += "
  • count the number of element names in the selector (= c)
  • "; - ret += "
  • ignore pseudo-elements
  • "; - ret += "
"; - 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 += "
"; - ret += "

Examples:

"; - ret += "
*               /* a=0 b=0 c=0 -> specificity =   0 */";
-    ret += "      
"; - 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 += "
    "; - ret += "
  • *: 0 or more"; - ret += "
  • +: 1 or more"; - ret += "
  • ?: 0 or 1"; - ret += "
  • |: separates alternatives"; - ret += "
  • [ ]: grouping
  • "; - ret += "
"; - 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 += "
  1. "; - ret += "

    The XML document does not use namespaces.

    "; - ret += "
      "; - ret += "
    • In this case, it is obviously not necessary to declare or use"; - ret += " attribute selectors will function adequately in a down-level"; - ret += "
    • "; - 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 += "
  2. "; - ret += "
  3. "; - ret += "

    The XML document defines a single, default namespace used"; - ret += " names.

    "; - ret += "
      "; - 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 += "
  4. "; - ret += "
  5. "; - ret += "

    The XML document does not use a default namespace, all"; - ret += " to the same URI).

    "; - ret += "
      "; - 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 += "
    • "; - 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 += "
  6. "; - 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 += "

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationCSS level 1
Acceptstype 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 constraintsonly one class selector allowed per sequence of simple"; - ret += " selectors"; - ret += "
"; - ret += "

"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationCSS level 2
Acceptstype 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 constraintsmore 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 += "
"; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += " "; - ret += "
Selectors profile
SpecificationSTTS 3
Accepts"; - ret += "

type selectors
universal selectors
attribute"; - ret += " selectors
class"; - ret += " selectors
ID selectors
all structural"; - ret += " pseudo-classes
"; - ret += "

namespaces

Excludesnon-accepted pseudo-classes
pseudo-elements
Extra constraintssome selectors and combinators are not allowed in fragment"; - ret += "
"; - ret += "

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

    "; - ret += "
  1. a selection mechanism equivalent to CSS selection mechanism:"; - ret += "
  2. fragment descriptions that appear on the right side of declarations."; - ret += "
  3. "; - ret += "
"; - 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 += "

    "; - ret += "
  • a simple selector containing an undeclared namespace prefix is invalid"; - ret += "
  • "; - ret += "
  • a selector containing an invalid simple selector, an invalid combinator"; - ret += "
  • "; - ret += "
  • a group of selectors containing an invalid selector is invalid.
  • "; - ret += "
"; - 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 += "
"; - 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]
"; - ret += "
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 += "
"; - 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"; - ret += ""; - return 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 com.google.gwt.query.client; + +import static com.google.gwt.query.client.GQuery.$; +import static com.google.gwt.query.client.GQuery.window; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.client.Scheduler; +import com.google.gwt.core.client.Scheduler.RepeatingCommand; +import com.google.gwt.query.client.js.JsUtils; + +/** + * This module is thought to emulate a test environment similar to + * GWTTestCase, but running it in development mode. + * + * The main goal of it is to execute tests in a faster way, because you just + * push reload in your browser after changing any code. + * + * @author manolo + * + */ +public class DevTestRunner extends MyTestCase implements EntryPoint { + + public void onModuleLoad() { + try { + gwtSetUp(); + // Replace this with the method to run + testSomething(); + } catch (Exception ex) { + ex.printStackTrace(); + $(e).html("").after("
ERROR: " + ex.getMessage() + "
"); + } + } + + public void testSomething() { + // Copy and paste any test from the gquery suite + } + + /** + * Runs jquery code via jsni. + * + * Example: + * System.out.println(evalJQuery("$('div').size()")); + */ + private native T evalJQuery(String command) /*-{ + command = command.replace(/\$/g, "$wnd.$"); + try { + return "" + eval(command); + } catch(e) { + $wnd.alert(command + " " + e); + return ""; + } + }-*/; + + /** + * Loads jquery and schedule the execution of the method testCompare() + * which should have code to test something in both in jquery and gquery. + * + * Put this method in onModuleLoad, and replace below the method to execute + * after jquery is available + */ + public void runTestJQuery() { + JsUtils.loadScript("jquery-1.6.2.js", "jq"); + Scheduler.get().scheduleFixedDelay(new RepeatingCommand() { + private int cont = 0; + private native boolean loaded(String func) /*-{ + return eval("$wnd." + func) ? true : false; + }-*/; + public boolean execute() { + if (cont++ > 10 || JsUtils.hasProperty(window, "$")) { + + // Replace with the method to run + testJQueryCompare(); + return false; + } + return true; + } + }, 100); + } + + public void testJQueryCompare() { + $(e).html("

Content 1

"); + GQuery g = $("#child"); + Properties prop1; + + prop1 = GQuery.$$("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'"); + g.css(prop1); + validateCurCSSBoth("#child", prop1.keys()); + } + + public void validateSizesBoth(String html) { + $(e).html(html); + String gqw = "" + $(".outer").width(); + String jqw = evalJQuery("$('.outer').width()"); + String gqh = "" + $(".outer").height(); + String jqh = evalJQuery("$('.outer').height()"); + + System.out.println(".outer size: GQuery: " + gqw + "x" + gqh + " jQuery: " + jqw + "x" + jqh); + assertEquals(gqw, jqw); + assertEquals(gqh, jqh); + } + + public void validateCssBoth(String selector, boolean force, String... props) { + for (String prop: props) { + String gs = $(selector).css(prop, force); + String js = evalJQuery("$.css($('" + selector + "').get(0), '" + prop + "', " + force + ")"); + System.out.println(selector + " prop:" + prop + " force:" + force + " gQuery:" + gs + " jQuery:" + js); + assertEquals(gs.replaceAll("px", ""), js.replaceAll("px", "")); + } + } + + public void validateCurCSSBoth(String selector, String... props) { + for (String prop: props) { + String gs = Double.toString($(selector).cur(prop, true)).replaceFirst("\\.\\d+$", ""); + String js = evalJQuery("$.curCSS($('" + selector + "').get(0), '" + prop + "', true)"); + gs = gs.replaceAll("px$", ""); + js = js.replaceAll("px$", ""); + System.out.println(selector + " prop:" + prop + " gQuery:" + gs + " jQuery:" + js); + assertEquals(gs, js); + } + } + + // This method is used to initialize a huge html String, because + // java 1.5 has a limitation in the size of static strings. + private String getTestContent() { + String ret = ""; + ret += "
"; + ret += "
"; + ret += "

W3C

"; + ret += "

Selectors

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

W3C Working Draft 15 December 2005

"; + ret += "
"; + ret += "
This version:
"; + ret += "
"; + ret += " http://www.w3.org/TR/2005/WD-css3-selectors-20051215
"; + ret += "
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 += "
"; + 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 += "
"; + 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 += "

Table of contents

"; + ret += " "; + 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 += "

    "; + ret += "
  • the list of basic definitions (selector, group of selectors,"; + ret += " of simple selectors, and the term 'simple selector' is now used for"; + ret += "
  • "; + ret += "
  • an optional namespace component is now allowed in type element"; + ret += " selectors, the universal selector and attribute selectors"; + ret += "
  • "; + ret += "
  • a new combinator has been"; + ret += "
  • "; + ret += "
  • new simple selectors including substring matching attribute"; + ret += " selectors, and new pseudo-classes"; + ret += "
  • "; + ret += "
  • new pseudo-elements, and introduction of the '::' convention"; + ret += "
  • "; + ret += "
  • the grammar has been rewritten
  • "; + ret += "
  • profiles to be added to specifications integrating Selectors"; + ret += " and defining the set of selectors which is actually supported by"; + ret += "
  • "; + ret += "
  • Selectors are now a CSS3 Module and an independent"; + ret += "
  • "; + ret += "
  • the specification now has its own test suite
  • "; + ret += "
"; + 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 += "
PatternMeaningDescribed in sectionFirst defined in CSS level
*any elementUniversal"; + ret += " selector2
Ean element of type EType selector1
E[foo]an E element with a 'foo' attributeAttribute"; + ret += " selectors2
E[foo='bar']an E element whose 'foo' attribute value is exactly"; + ret += " Attribute"; + ret += " selectors2
E[foo~='bar']an E element whose 'foo' attribute value is a list of"; + ret += " Attribute"; + ret += " selectors2
E[foo^='bar']an E element whose 'foo' attribute value begins exactly"; + ret += " Attribute"; + ret += " selectors3
E[foo$='bar']an E element whose 'foo' attribute value ends exactly"; + ret += " Attribute"; + ret += " selectors3
E[foo*='bar']an E element whose 'foo' attribute value contains the"; + ret += " Attribute"; + ret += " selectors3
E[hreflang|='en']an E element whose 'hreflang' attribute has a"; + ret += " Attribute"; + ret += " selectors2
E:rootan E element, root of the documentStructural"; + ret += " pseudo-classes3
E:nth-child(n)an E element, the n-th child of its parentStructural"; + ret += " pseudo-classes3
E:nth-last-child(n)an E element, the n-th child of its parent, counting"; + ret += " Structural"; + ret += " pseudo-classes3
E:nth-of-type(n)an E element, the n-th sibling of its typeStructural"; + ret += " pseudo-classes3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting"; + ret += " Structural"; + ret += " pseudo-classes3
E:first-childan E element, first child of its parentStructural"; + ret += " pseudo-classes2
E:last-childan E element, last child of its parentStructural"; + ret += " pseudo-classes3
E:first-of-typean E element, first sibling of its typeStructural"; + ret += " pseudo-classes3
E:last-of-typean E element, last sibling of its typeStructural"; + ret += " pseudo-classes3
E:only-childan E element, only child of its parentStructural"; + ret += " pseudo-classes3
E:only-of-typean E element, only sibling of its typeStructural"; + ret += " pseudo-classes3
E:emptyan E element that has no children (including text"; + ret += " Structural"; + ret += " pseudo-classes3
E:link
E:visited
an E element being the source anchor of a hyperlink of"; + ret += " The link"; + ret += " pseudo-classes1
E:active
E:hover
E:focus
an E element during certain user actionsThe user"; + ret += " action pseudo-classes1 and 2
E:targetan E element being the target of the referring URIThe target"; + ret += " pseudo-class3
E:lang(fr)an element of type E in language 'fr' (the document"; + ret += " The :lang()"; + ret += " pseudo-class2
E:enabled
E:disabled
a user interface element E which is enabled or"; + ret += " The UI element states"; + ret += " pseudo-classes3
E:checkeda user interface element E which is checked (for instance a radio-button or checkbox)"; + ret += " The UI element states"; + ret += " pseudo-classes3
E::first-linethe first formatted line of an E elementThe ::first-line"; + ret += " pseudo-element1
E::first-letterthe first formatted letter of an E elementThe ::first-letter"; + ret += " pseudo-element1
E::selectionthe portion of an E element that is currently"; + ret += " The UI element"; + ret += " fragments pseudo-elements3
E::beforegenerated content before an E elementThe ::before"; + ret += " pseudo-element2
E::aftergenerated content after an E elementThe ::after"; + ret += " pseudo-element2
E.warningan E element whose class is"; + ret += " Class"; + ret += " selectors1
E#myidan E element with ID equal to 'myid'.ID"; + ret += " selectors1
E:not(s)an E element that does not match simple selector sNegation"; + ret += " pseudo-class3
E Fan F element descendant of an E elementDescendant"; + ret += " combinator1
E > Fan F element child of an E elementChild"; + ret += " combinator2
E + Fan F element immediately preceded by an E elementAdjacent sibling combinator"; + ret += " 2
E ~ Fan F element preceded by an E elementGeneral 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

Example:

"; + ret += "

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

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

Examples:

"; + ret += "
    "; + ret += "
  • *[hreflang|=en] and [hreflang|=en] are"; + ret += "
  • "; + ret += "
  • *.warning and .warning are equivalent,"; + ret += "
  • "; + ret += "
  • *#myid and #myid are equivalent.
  • "; + ret += "
"; + ret += "
"; + 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 += "
"; + ret += "
ns|*
"; + ret += "
all elements in namespace ns
"; + ret += "
*|*
"; + ret += "
all elements
"; + ret += "
|*
"; + ret += "
all elements without any declared namespace
"; + ret += "
*
"; + ret += "
if no default namespace has been specified, this is equivalent to *|*."; + ret += "
"; + 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 += "
"; + ret += "
[att]"; + ret += "
Represents an element with the att attribute, whatever the"; + ret += "
"; + ret += "
[att=val]
"; + ret += "
Represents an element with the att attribute whose value is"; + ret += "
"; + ret += "
[att~=val]
"; + ret += "
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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "
[att^=val]
"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + ret += "
[att$=val]"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + ret += "
[att*=val]"; + ret += "
Represents an element with the att attribute whose value"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

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

"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
    "; + ret += "
  • The :link pseudo-class applies to links that have"; + ret += "
  • "; + ret += "
  • The :visited pseudo-class applies once the link has"; + ret += "
  • "; + 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 += "
"; + ret += "

Example:

"; + ret += "

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

"; + ret += "
a.external:visited
"; + ret += "
"; + 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 += "
    "; + 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 += "
  • "; + ret += "
  • The :active pseudo-class applies while an element"; + ret += "
  • "; + ret += "
  • The :focus pseudo-class applies while an element"; + ret += "
  • "; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

Example:

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

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

"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

Example:

"; + ret += "

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

"; + ret += "
tr > td:last-of-type
"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

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

"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "

is

"; + 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 += "
"; + 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 += "
"; + ret += "

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

"; + ret += "
"; + 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 += "
"; + ret += "

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

"; + 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 += "
"; + ret += "

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

"; + ret += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + 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 += "
"; + ret += "

9. Calculating a selector's specificity

"; + ret += "

A selector's specificity is calculated as follows:

"; + ret += "
    "; + ret += "
  • count the number of ID selectors in the selector (= a)
  • "; + ret += "
  • count the number of class selectors, attributes selectors, and"; + ret += "
  • "; + ret += "
  • count the number of element names in the selector (= c)
  • "; + ret += "
  • ignore pseudo-elements
  • "; + ret += "
"; + 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 += "
"; + ret += "

Examples:

"; + ret += "
*               /* a=0 b=0 c=0 -> specificity =   0 */";
+    ret += "      
"; + 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 += "
    "; + ret += "
  • *: 0 or more"; + ret += "
  • +: 1 or more"; + ret += "
  • ?: 0 or 1"; + ret += "
  • |: separates alternatives"; + ret += "
  • [ ]: grouping
  • "; + ret += "
"; + 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 += "
  1. "; + ret += "

    The XML document does not use namespaces.

    "; + ret += "
      "; + ret += "
    • In this case, it is obviously not necessary to declare or use"; + ret += " attribute selectors will function adequately in a down-level"; + ret += "
    • "; + 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 += "
  2. "; + ret += "
  3. "; + ret += "

    The XML document defines a single, default namespace used"; + ret += " names.

    "; + ret += "
      "; + 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 += "
  4. "; + ret += "
  5. "; + ret += "

    The XML document does not use a default namespace, all"; + ret += " to the same URI).

    "; + ret += "
      "; + 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 += "
    • "; + 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 += "
  6. "; + 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 += "

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationCSS level 1
Acceptstype 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 constraintsonly one class selector allowed per sequence of simple"; + ret += " selectors"; + ret += "
"; + ret += "

"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationCSS level 2
Acceptstype 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 constraintsmore 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 += "
"; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += " "; + ret += "
Selectors profile
SpecificationSTTS 3
Accepts"; + ret += "

type selectors
universal selectors
attribute"; + ret += " selectors
class"; + ret += " selectors
ID selectors
all structural"; + ret += " pseudo-classes
"; + ret += "

namespaces

Excludesnon-accepted pseudo-classes
pseudo-elements
Extra constraintssome selectors and combinators are not allowed in fragment"; + ret += "
"; + ret += "

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

    "; + ret += "
  1. a selection mechanism equivalent to CSS selection mechanism:"; + ret += "
  2. fragment descriptions that appear on the right side of declarations."; + ret += "
  3. "; + ret += "
"; + 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 += "

    "; + ret += "
  • a simple selector containing an undeclared namespace prefix is invalid"; + ret += "
  • "; + ret += "
  • a selector containing an invalid simple selector, an invalid combinator"; + ret += "
  • "; + ret += "
  • a group of selectors containing an invalid selector is invalid.
  • "; + ret += "
"; + 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 += "
"; + 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]
"; + ret += "
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 += "
"; + 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"; + ret += ""; + return ret; + } + +} diff --git a/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java b/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java index 8ea94ea1..3c335039 100644 --- a/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java +++ b/devtest/src/main/java/com/google/gwt/query/client/MyTestCase.java @@ -1,148 +1,148 @@ -/* - * 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 com.google.gwt.query.client; - -import com.google.gwt.dom.client.Element; -import com.google.gwt.user.client.Timer; -import com.google.gwt.user.client.ui.HTML; -import com.google.gwt.user.client.ui.RootPanel; -import static com.google.gwt.query.client.GQuery.*; - -/** - * Just a simple class to emulate JUnit TestCase. - */ -public class MyTestCase { - - static Element e = null; - static HTML testPanel = null; - - public static void assertEquals(Object a, Object b) { - check(a.equals(b), "assertEquals: expected=" + a + " actual=" + b); - } - - public static void assertFalse(boolean b) { - check(!b, "assertTrue: actual should be false but is true"); - } - - public static void assertFalse(String msg, boolean b) { - check(!b, msg); - } - - public static void assertNotNull(Object a) { - check(a != null, "assertNotNull: actual object is null"); - } - - public static void assertNull(Object a) { - check(a == null, "assertNull: actual object is not null"); - } - - public static void assertTrue(boolean b) { - check(b, "assertTrue: actual should be true but is false"); - } - - public static void assertTrue(String msg, boolean b) { - check(b, msg); - } - - public static void check(boolean condition, String message) { - if (!condition) { - RuntimeException ex = new RuntimeException(message); - ex.printStackTrace(); - throw ex; - } - } - - protected static void assertHtmlEquals(Object expected, Object actual) { - assertEquals(iExplorerFixHtml(expected), iExplorerFixHtml(actual)); - } - - protected static String iExplorerFixHtml(Object s) { - return s.toString().trim().toLowerCase().replaceAll( - "[\r\n]", "").replaceAll( - " ([\\w]+)=[\"']([^\"']+)[\"']", " $1=$2").replaceAll( - "\\s+\\$h=\"[^\"]+\"", "").replaceAll( - " added=[^ >]+", ""); - } - - public void gwtSetUp() { - if (e == null) { - testPanel = new HTML(); - RootPanel.get().add(testPanel); - e = testPanel.getElement(); - e.setId("core-tst"); - } else { - e.setInnerHTML(""); - } - } - - protected static void assertArrayContains(Object result, Object... array) { - assertArrayContains("", result, array); - } - - protected static void assertArrayContains(String message, Object result, Object... array) { - String values = ""; - boolean done = false; - for (Object o : array) { - values += o.toString() + " "; - if (result.equals(o)) { - done = true; - } - } - message = message + ", value (" + result + ") not found in: " + values; - assertTrue(message, done); - } - - private boolean testRunning = false; - - protected void delayTestFinish(int millis) { - testRunning = true; - new Timer(){ - public void run() { - assertFalse(testRunning); - } - }.schedule(millis); - } - - protected void finishTest() { - testRunning = false; - } - - protected void fail() { - check(false, "Test failure"); - } - - protected void fail(String msg) { - check(false, msg); - } - - protected void assertPosition(GQuery g, Offset min, Offset max) { - int a = Math.min(min.top, max.top); - int b = Math.max(min.top, max.top); - int v = g.offset().top; - boolean c = a <= v && v <= b; - String msg = "Top has the value " + v + ", but should be in the range: " - + a + " - " + b; - assertTrue(msg, c); - - a = Math.min(min.left, max.left); - b = Math.max(min.left, max.left); - v = g.offset().left; - c = a <= v && v <= b; - msg = "Left has the value " + v + ", but should be in the range: " + a - + " - " + b; - assertTrue(msg, c); - } -} +/* + * 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 com.google.gwt.query.client; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.user.client.Timer; +import com.google.gwt.user.client.ui.HTML; +import com.google.gwt.user.client.ui.RootPanel; +import static com.google.gwt.query.client.GQuery.*; + +/** + * Just a simple class to emulate JUnit TestCase. + */ +public class MyTestCase { + + static Element e = null; + static HTML testPanel = null; + + public static void assertEquals(Object a, Object b) { + check(a.equals(b), "assertEquals: expected=" + a + " actual=" + b); + } + + public static void assertFalse(boolean b) { + check(!b, "assertTrue: actual should be false but is true"); + } + + public static void assertFalse(String msg, boolean b) { + check(!b, msg); + } + + public static void assertNotNull(Object a) { + check(a != null, "assertNotNull: actual object is null"); + } + + public static void assertNull(Object a) { + check(a == null, "assertNull: actual object is not null"); + } + + public static void assertTrue(boolean b) { + check(b, "assertTrue: actual should be true but is false"); + } + + public static void assertTrue(String msg, boolean b) { + check(b, msg); + } + + public static void check(boolean condition, String message) { + if (!condition) { + RuntimeException ex = new RuntimeException(message); + ex.printStackTrace(); + throw ex; + } + } + + protected static void assertHtmlEquals(Object expected, Object actual) { + assertEquals(iExplorerFixHtml(expected), iExplorerFixHtml(actual)); + } + + protected static String iExplorerFixHtml(Object s) { + return s.toString().trim().toLowerCase().replaceAll( + "[\r\n]", "").replaceAll( + " ([\\w]+)=[\"']([^\"']+)[\"']", " $1=$2").replaceAll( + "\\s+\\$h=\"[^\"]+\"", "").replaceAll( + " added=[^ >]+", ""); + } + + public void gwtSetUp() { + if (e == null) { + testPanel = new HTML(); + RootPanel.get().add(testPanel); + e = testPanel.getElement(); + e.setId("core-tst"); + } else { + e.setInnerHTML(""); + } + } + + protected static void assertArrayContains(Object result, Object... array) { + assertArrayContains("", result, array); + } + + protected static void assertArrayContains(String message, Object result, Object... array) { + String values = ""; + boolean done = false; + for (Object o : array) { + values += o.toString() + " "; + if (result.equals(o)) { + done = true; + } + } + message = message + ", value (" + result + ") not found in: " + values; + assertTrue(message, done); + } + + private boolean testRunning = false; + + protected void delayTestFinish(int millis) { + testRunning = true; + new Timer(){ + public void run() { + assertFalse(testRunning); + } + }.schedule(millis); + } + + protected void finishTest() { + testRunning = false; + } + + protected void fail() { + check(false, "Test failure"); + } + + protected void fail(String msg) { + check(false, msg); + } + + protected void assertPosition(GQuery g, Offset min, Offset max) { + int a = Math.min(min.top, max.top); + int b = Math.max(min.top, max.top); + int v = g.offset().top; + boolean c = a <= v && v <= b; + String msg = "Top has the value " + v + ", but should be in the range: " + + a + " - " + b; + assertTrue(msg, c); + + a = Math.min(min.left, max.left); + b = Math.max(min.left, max.left); + v = g.offset().left; + c = a <= v && v <= b; + msg = "Left has the value " + v + ", but should be in the range: " + a + + " - " + b; + assertTrue(msg, c); + } +} diff --git a/devtest/src/main/java/com/google/gwt/query/public/test.html b/devtest/src/main/java/com/google/gwt/query/public/test.html index 42830523..1dff4d7e 100644 --- a/devtest/src/main/java/com/google/gwt/query/public/test.html +++ b/devtest/src/main/java/com/google/gwt/query/public/test.html @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + -- cgit v1.2.3