Overview.bs

<h1>Non-element Selectors</h1>

<pre class='metadata'>
Group: csswg
Shortname: selectors-nonelement
Level: 1
Status: ED
ED: http://dev.w3.org/csswg/selectors-nonelement/
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 then 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.
</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-selector">
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( [ <<qualified-name>> | '*' | <<qname_prefix>> '|*' ] )</pre>

	Where <dfn>&lt;qualified-name></dfn> is a <a
	spec=css-namespaces>CSS qualified name</a> which allows
	wildcard prefixes and must conform to <code>wqname</code>
	production given in [[!CSS3NAMESPACE]]. <dfn>&lt;qname_prefix></dfn> must conform
	to <code>qname_prefix</code> production given in [[!CSS3NAMESPACE]].

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

	The selector matches an attribute node with the given qualified name,
	if such an attribute exists on the <a spec=selectors>originating element</a>.

	If '<code>*</code>' is used inside <code>::attr()</code> the
	selector matches all attribute nodes on the <a
	spec=selectors>originating element</a>.

	If '<code>prefix|*</code>' is used inside
	<code>::attr()</code> the selector matches all attribute nodes
	in a namespace bound to the <code>prefix</coce> on the <a
	spec=selectors>originating element</a>.


	<div class="example">
		For example,
		the selector ''::attr(title)'' selects all the <code>title</code> attributes in the document.
	</div>

	<div class="example">
		The following ITS rules use 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.