Overview.src.html

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

<p>Selectors are very popular selection mechanism for 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 a newer standardized browser
APIs like [[SELECTORS-API]] or in another Web standards like <a
href="http://www.w3.org/TR/its20/">ITS 2.0</a>. [[SELECTORS4]] are
able to select just element nodes from the document tree which is
limiting for some use-cases. This specification extends [[SELECTORS4]]
with additional selectors that can be used for selecting other kinds
of nodes in a document tree. Currently the draft only defines means for
selecting and matching attribute nodes, but in future, based on
feedback, other kinds of nodes like comments or processing
instructions might be supported.</p>

<h2 id="syntax">Non-element Selector Syntax and Structure</h2>

<p>Syntax and structure is the same as in [[SELECTORS4]] with the following exception:</p>

<ul>
<li>A <a href="../selectors/Overview.html#simple" spec='SELECTORS4'>simple selector</a> can be also <a>attribute node selector</a>.
</ul>

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

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

<p>A <dfn>attribute node selector</dfn> represents an attribute node
in a document tree. It's written using <code>::attr(<a
href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
name</a>)</code> syntax [[!CSS3NAMESPACE]].</p>

<div class="example">
<p>Example:
<p>The following selector represents <code>title</code> attributes in the document tree:
<pre>::attr(title)</pre>
</div>

<h4 id="ans-nmsp">
Attribute node selector and namespaces</h4>

  <p>Attribute node selectors allow an optional namespace component: a namespace
  prefix that has been previously <a href="#nsdecl">declared</a> may be
  prepended to the attribute name separated by the namespace separator
  &quot;vertical bar&quot; (U+007C, <code>|</code>). (See, e.g.,
  [[XML-NAMES]] for the use of namespaces in XML.)

  <p>The namespace component may be left empty (no prefix before the
  namespace separator) to indicate that the selector is only to
  represent attributes with no namespace.

  <p>An asterisk may be used for the namespace prefix, indicating that
  the selector represents attributes in any namespace (including attributes
  with no namespace).

  <p>An attribute node selector containing a namespace prefix that has not been
  previously <a href="#nsdecl">declared</a> for namespaced selectors is
  an <a href="#conformance">invalid</a> selector.

  <p>In a namespace-aware client, the name part of attribute node
  selectors (the part after the namespace separator, if it is present)
  will only match against the <a
  href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a>
  of the attribute's <a
  href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
  name</a>.

  <p>In summary:

  <dl>
    <dt><code>ns|A</code>
    <dd>attributes with name A in namespace ns
    <dt><code>*|A</code>
    <dd>attributes with name A in any namespace, including those without a
    namespace
    <dt><code>|A</code>
    <dd>attributes with name A without a namespace
    <dt><code>A</code>
    <dd>attributes with name A without a namespace
  </dl>

  <div class="example">
   <p>Examples:

   <p>Following examples assume that prefix <code>xlink</code> is
   bound to the <code>http://www.w3.org/1999/xlink</code> namespace
   (XLink namespace).

   <pre>
   xlink:title /* title attribute in XLink namespace */
   title       /* title attribute in no namespace, for example title as used in HTML language */
   *|title     /* any title attribute */</pre>

  </div>