Overview.bs

<h1>Non-element Selectors Module Level 1</h1>

<pre class='metadata'>
Group: csswg
Shortname: selectors-nonelement
Level: 1
Status: ED
Work Status: Exploring
ED: http://dev.w3.org/csswg/selectors-nonelement/
TR: http://www.w3.org/TR/selectors-nonelement-1/
Previous version: http://www.w3.org/TR/2014/WD-selectors-nonelement-1-20140603/
Editor: Jirka Kosek, Invited Expert, jirka@kosek.cz
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
Abstract: Non-element Selectors extends [[!SELECTORS4]] and allow selecting other kinds of document nodes than elements. This is useful when selectors are used as a general document query language.
Abstract: Non-element Selectors are not intended to be used in CSS, but only as a separate query language in other host environments.
Link Defaults: css-namespaces (dfn) namespace prefix, selectors (dfn) originating element/pseudo-element
</pre>

<h2 id="intro">
Introduction</h2>

	Selectors are a very popular mechanism for selecting things in HTML and XML content.
	They are not used only in CSS [[CSS3SYN]]
	but also as a standalone query language in libraries like <a href="http://jquery.com/">jQuery</a>,
	in newer standardized browser APIs like [[SELECTORS-API]]
	and in other Web standards like <a href="http://www.w3.org/TR/its20/">ITS 2.0</a>.

	The [[SELECTORS4]] specification only defines selectors for selecting element nodes from the document,
	but some uses of Selectors would like to select other types of nodes as well.
	This specification extends [[SELECTORS4]] with additional selectors
	that can be used for selecting non-element nodes in a document tree.

	Note: Currently the draft only defines means for selecting and matching attribute nodes,
	but other kinds of nodes, such as comments or processing instructions, might be supported in the future.

<h2 id="non-element-selectors">
Non-element Selectors</h2>

<h3 id="attribute-node-selectors">
Attribute node selector</h3>

	An <dfn export>attribute node selector</dfn> represents an attribute node in a document tree.
	Its syntax is:

	<pre class='prod'>
		<dfn selector>::attr()</dfn> = ::attr( <<namespace-attr>>? )
		<dfn>&lt;namespace-attr></dfn> = [ <<na-prefix>>? '|' ]? <<na-name>>
		<dfn>&lt;na-prefix></dfn> = <<ident>> | '*'
		<dfn>&lt;na-name></dfn> = <<ident>> | '*'
	</pre>

	No whitespace is allowed between the tokens of <<namespace-attr>>.

	<<namespace-attr>> is divided into two halves:
	an optional prefix preceding a '|' character,
	and an attribute name following it.

	If the <<na-prefix>> is provided as an <<ident>>,
	it must match a declared <a>namespace prefix</a>,
	in which case the selector only matches attributes in that namespace;
	if it doesn't match a declared <a>namespace prefix</a>,
	the selector matches nothing.
	If the <<na-prefix>> is provided as a '*' character,
	the selector matches attributes in any namespace.
	If the <<na-prefix>> is omitted,
	the selector only matches attributes in no namespace.

	If the <<na-name>> is an <<ident>>,
	the selector matches attributes with that name.
	If the <<na-name>> is a '*' character,
	the selector matches attributes with any name.

	If the <<namespace-attr>> is omitted entirely,
	the selector matches any attribute in any namespace.

	The selector matches an attribute node with the given namespace and name on the <a>originating element</a>,
	if such an attribute exists.

	The selector uses <a>pseudo-element</a> syntax.

	<div class="example">
		The following ITS rules use an attribute node selector
		to switch off translatability of <code>title</code> attribute on <code>abbr</code> elements.

		<pre>
			&lt;rules xmlns="http://www.w3.org/2005/11/its"
			       version="2.0"
			       queryLanguage="css">
			  &lt;translateRule selector="abbr::attr(title)" translate="no"/>
			&lt;/rules>
		</pre>
	</div>

	Although entirely valid in Selectors used in the scope of CSS,
	<a>attribute node selectors</a> never generate boxes.