<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Class: HTML::Selector</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="../.././rdoc-style.css" type="text/css" media="screen" />
<script type="text/javascript">
// <![CDATA[
function popupCode( url ) {
window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
}
function toggleCode( id ) {
if ( document.getElementById )
elem = document.getElementById( id );
else if ( document.all )
elem = eval( "document.all." + id );
else
return false;
elemStyle = elem.style;
if ( elemStyle.display != "block" ) {
elemStyle.display = "block"
} else {
elemStyle.display = "none"
}
return true;
}
// Make codeblocks hidden by default
document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
// ]]>
</script>
</head>
<body>
<div id="classHeader">
<table class="header-table">
<tr class="top-aligned-row">
<td><strong>Class</strong></td>
<td class="class-name-in-header">HTML::Selector</td>
</tr>
<tr class="top-aligned-row">
<td><strong>In:</strong></td>
<td>
<a href="../../files/lib/action_controller/vendor/html-scanner/html/selector_rb.html">
lib/action_controller/vendor/html-scanner/html/selector.rb
</a>
<br />
</td>
</tr>
<tr class="top-aligned-row">
<td><strong>Parent:</strong></td>
<td>
<a href="../Object.html">
Object
</a>
</td>
</tr>
</table>
</div>
<!-- banner header -->
<div id="bodyContent">
<div id="contextContent">
<div id="description">
<p>
Selects HTML elements using CSS 2 selectors.
</p>
<p>
The <tt><a href="Selector.html">Selector</a></tt> class uses CSS selector
expressions to <a href="Selector.html#M000397">match</a> and <a
href="Selector.html#M000398">select</a> HTML elements.
</p>
<p>
For example:
</p>
<pre>
selector = HTML::Selector.new "form.login[action=/login]"
</pre>
<p>
creates a <a href="Selector.html#M000396">new</a> selector that matches any
<tt>form</tt> element with the class <tt>login</tt> and an attribute
<tt>action</tt> with the value <tt>/login</tt>.
</p>
<h3>Matching Elements</h3>
<p>
Use the <a href="Selector.html#M000397">match</a> method to determine if an
element matches the selector.
</p>
<p>
For simple selectors, the method returns an array with that element, or
<tt>nil</tt> if the element does not <a
href="Selector.html#M000397">match</a>. For complex selectors (see below)
the method returns an array with all matched elements, of <tt>nil</tt> if
no <a href="Selector.html#M000397">match</a> found.
</p>
<p>
For example:
</p>
<pre>
if selector.match(element)
puts "Element is a login form"
end
</pre>
<h3>Selecting Elements</h3>
<p>
Use the <a href="Selector.html#M000398">select</a> method to <a
href="Selector.html#M000398">select</a> all matching elements starting with
one element and going through all children in depth-first order.
</p>
<p>
This method returns an array of all matching elements, an empty array if no
<a href="Selector.html#M000397">match</a> is found
</p>
<p>
For example:
</p>
<pre>
selector = HTML::Selector.new "input[type=text]"
matches = selector.select(element)
matches.each do |match|
puts "Found text field with name #{match.attributes['name']}"
end
</pre>
<h3>Expressions</h3>
<p>
Selectors can <a href="Selector.html#M000397">match</a> elements using any
of the following criteria:
</p>
<ul>
<li><tt>name</tt> — Match an element based on its name (tag name). For
example, <tt>p</tt> to <a href="Selector.html#M000397">match</a> a
paragraph. You can use <tt>*</tt> to <a
href="Selector.html#M000397">match</a> any element.
</li>
<li><tt>#id</tt> — Match an element based on its identifier (the
<tt>id</tt> attribute). For example, <tt>#page</tt>.
</li>
<li><tt>.class</tt> — Match an element based on its class name, all class
names if more than one specified.
</li>
<li><tt>[attr]</tt> — Match an element that has the specified attribute.
</li>
<li><tt>[attr=value]</tt> — Match an element that has the specified
attribute and value. (More operators are supported see below)
</li>
<li><tt>:pseudo-class</tt> — Match an element based on a pseudo class,
such as <tt>:nth-child</tt> and <tt>:empty</tt>.
</li>
<li><tt>:not(expr)</tt> — Match an element that does not <a
href="Selector.html#M000397">match</a> the negation expression.
</li>
</ul>
<p>
When using a combination of the above, the element name comes first
followed by identifier, class names, attributes, pseudo classes and
negation in any order. Do not separate these parts with spaces! Space
separation is used for descendant selectors.
</p>
<p>
For example:
</p>
<pre>
selector = HTML::Selector.new "form.login[action=/login]"
</pre>
<p>
The matched element must be of type <tt>form</tt> and have the class
<tt>login</tt>. It may have other classes, but the class <tt>login</tt> is
required to <a href="Selector.html#M000397">match</a>. It must also have an
attribute called <tt>action</tt> with the value <tt>/login</tt>.
</p>
<p>
This selector will <a href="Selector.html#M000397">match</a> the following
element:
</p>
<pre>
<form class="login form" method="post" action="/login">
</pre>
<p>
but will not <a href="Selector.html#M000397">match</a> the element:
</p>
<pre>
<form method="post" action="/logout">
</pre>
<h3>Attribute Values</h3>
<p>
Several operators are supported for matching attributes:
</p>
<ul>
<li><tt>name</tt> — The element must have an attribute with that name.
</li>
<li><tt>name=value</tt> — The element must have an attribute with that
name and value.
</li>
<li><tt>name^=value</tt> — The attribute value must start with the
specified value.
</li>
<li><tt>name$=value</tt> — The attribute value must end with the
specified value.
</li>
<li><tt>name*=value</tt> — The attribute value must contain the specified
value.
</li>
<li><tt>name~=word</tt> — The attribute value must contain the specified
word (space separated).
</li>
<li><tt>name|=word</tt> — The attribute value must start with specified
word.
</li>
</ul>
<p>
For example, the following two selectors <a
href="Selector.html#M000397">match</a> the same element:
</p>
<pre>
#my_id
[id=my_id]
</pre>
<p>
and so do the following two selectors:
</p>
<pre>
.my_class
[class~=my_class]
</pre>
<h3>Alternatives, siblings, children</h3>
<p>
Complex selectors use a combination of expressions to <a
href="Selector.html#M000397">match</a> elements:
</p>
<ul>
<li><tt>expr1 expr2</tt> — Match any element against the second
expression if it has some parent element that matches the first expression.
</li>
<li><tt>expr1 > expr2</tt> — Match any element against the second
expression if it is the child of an element that matches the first
expression.
</li>
<li><tt>expr1 + expr2</tt> — Match any element against the second
expression if it immediately follows an element that matches the first
expression.
</li>
<li><tt>expr1 ~ expr2</tt> — Match any element against the second
expression that comes after an element that matches the first expression.
</li>
<li><tt>expr1, expr2</tt> — Match any element against the first
expression, or against the second expression.
</li>
</ul>
<p>
Since children and sibling selectors may <a
href="Selector.html#M000397">match</a> more than one element given the
first element, the <a href="Selector.html#M000397">match</a> method may
return more than one <a href="Selector.html#M000397">match</a>.
</p>
<h3>Pseudo classes</h3>
<p>
Pseudo classes were introduced in CSS 3. They are most often used to <a
href="Selector.html#M000398">select</a> elements in a given position:
</p>
<ul>
<li><tt>:root</tt> — Match the element only if it is the root element (no
parent element).
</li>
<li><tt>:empty</tt> — Match the element only if it has no child elements,
and no text content.
</li>
<li><tt>:only-child</tt> — Match the element if it is the only child
(element) of its parent element.
</li>
<li><tt>:only-of-type</tt> — Match the element if it is the only child
(element) of its parent element and its type.
</li>
<li><tt>:first-child</tt> — Match the element if it is the first child
(element) of its parent element.
</li>
<li><tt>:first-of-type</tt> — Match the element if it is the first child
(element) of its parent element of its type.
</li>
<li><tt>:last-child</tt> — Match the element if it is the last child
(element) of its parent element.
</li>
<li><tt>:last-of-type</tt> — Match the element if it is the last child
(element) of its parent element of its type.
</li>
<li><tt>:nth-child(b)</tt> — Match the element if it is the b-th child
(element) of its parent element. The value <tt>b</tt> specifies its index,
starting with 1.
</li>
<li><tt>:nth-child(an+b)</tt> — Match the element if it is the b-th child
(element) in each group of <tt>a</tt> child elements of its parent element.
</li>
<li><tt>:nth-child(-an+b)</tt> — Match the element if it is the first
child (element) in each group of <tt>a</tt> child elements, up to the first
<tt>b</tt> child elements of its parent element.
</li>
<li><tt>:nth-child(odd)</tt> — Match element in the odd position (i.e.
first, third). Same as <tt>:nth-child(2n+1)</tt>.
</li>
<li><tt>:nth-child(even)</tt> — Match element in the even position (i.e.
second, fourth). Same as <tt>:nth-child(2n+2)</tt>.
</li>
<li><tt>:nth-of-type(..)</tt> — As above, but only counts elements of its
type.
</li>
<li><tt>:nth-last-child(..)</tt> — As above, but counts from the last
child.
</li>
<li><tt>:nth-last-of-type(..)</tt> — As above, but counts from the last
child and only elements of its type.
</li>
<li><tt>:not(selector)</tt> — Match the element only if the element does
not <a href="Selector.html#M000397">match</a> the simple selector.
</li>
</ul>
<p>
As you can see, <tt>:nth-child<tt> pseudo class and its variant
can get quite tricky and the CSS specification doesn‘t do a much
better job explaining it. But after reading the examples and trying a few
combinations, it‘s easy to figure out.
</p>
<p>
For example:
</p>
<pre>
table tr:nth-child(odd)
</pre>
<p>
Selects every second row in the table starting with the first one.
</p>
<pre>
div p:nth-child(4)
</pre>
<p>
Selects the fourth paragraph in the <tt>div</tt>, but not if the
<tt>div</tt> contains other elements, since those are also counted.
</p>
<pre>
div p:nth-of-type(4)
</pre>
<p>
Selects the fourth paragraph in the <tt>div</tt>, counting only paragraphs,
and ignoring all other elements.
</p>
<pre>
div p:nth-of-type(-n+4)
</pre>
<p>
Selects the first four paragraphs, ignoring all others.
</p>
<p>
And you can always <a href="Selector.html#M000398">select</a> an element
that matches one set of rules but not another using <tt>:not</tt>. For
example:
</p>
<pre>
p:not(.post)
</pre>
<p>
Matches all paragraphs that do not have the class <tt>.post</tt>.
</p>
<h3>Substitution Values</h3>
<p>
You can use substitution with identifiers, class names and element values.
A substitution takes the form of a question mark (<tt>?</tt>) and uses the
next value in the argument list following the CSS expression.
</p>
<p>
The substitution value may be a string or a regular expression. All other
values are converted to strings.
</p>
<p>
For example:
</p>
<pre>
selector = HTML::Selector.new "#?", /^\d+$/
</pre>
<p>
matches any element whose identifier consists of one or more digits.
</p>
<p>
See <a
href="http://www.w3.org/TR/css3-selectors">www.w3.org/TR/css3-selectors</a>/
</p>
</div>
</div>
<div id="method-list">
<h3 class="section-bar">Methods</h3>
<div class="name-list">
<a href="#M000402">attribute_match</a>
<a href="#M000394">for_class</a>
<a href="#M000395">for_id</a>
<a href="#M000397">match</a>
<a href="#M000396">new</a>
<a href="#M000400">next_element</a>
<a href="#M000405">next_selector</a>
<a href="#M000403">nth_child</a>
<a href="#M000404">only_child</a>
<a href="#M000398">select</a>
<a href="#M000399">select_first</a>
<a href="#M000401">simple_selector</a>
</div>
</div>
</div>
<!-- if includes -->
<div id="section">
<!-- if method_list -->
<div id="methods">
<h3 class="section-bar">Public Class methods</h3>
<div id="method-M000394" class="method-detail">
<a name="M000394"></a>
<div class="method-heading">
<a href="Selector.src/M000394.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000394.html');return false;">
<span class="method-name">Selector.for_class(cls) => selector<br />
</span>
</a>
</div>
<div class="method-description">
<p>
Creates a <a href="Selector.html#M000396">new</a> selector for the given
class name.
</p>
</div>
</div>
<div id="method-M000395" class="method-detail">
<a name="M000395"></a>
<div class="method-heading">
<a href="Selector.src/M000395.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000395.html');return false;">
<span class="method-name">Selector.for_id(id) => selector<br />
</span>
</a>
</div>
<div class="method-description">
<p>
Creates a <a href="Selector.html#M000396">new</a> selector for the given
id.
</p>
</div>
</div>
<div id="method-M000396" class="method-detail">
<a name="M000396"></a>
<div class="method-heading">
<a href="Selector.src/M000396.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000396.html');return false;">
<span class="method-name">Selector.new(string, [values ...]) => selector<br />
</span>
</a>
</div>
<div class="method-description">
<p>
Creates a <a href="Selector.html#M000396">new</a> selector from a CSS 2
selector expression.
</p>
<p>
The first argument is the selector expression. All other arguments are used
for value substitution.
</p>
<p>
Throws InvalidSelectorError is the selector expression is invalid.
</p>
</div>
</div>
<h3 class="section-bar">Public Instance methods</h3>
<div id="method-M000397" class="method-detail">
<a name="M000397"></a>
<div class="method-heading">
<a href="Selector.src/M000397.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000397.html');return false;">
<span class="method-name">match(element, first?) => array or nil<br />
</span>
</a>
</div>
<div class="method-description">
<p>
Matches an element against the selector.
</p>
<p>
For a simple selector this method returns an array with the element if the
element matches, nil otherwise.
</p>
<p>
For a complex selector (sibling and descendant) this method returns an
array with all matching elements, nil if no <a
href="Selector.html#M000397">match</a> is found.
</p>
<p>
Use +first_only=true+ if you are only interested in the first element.
</p>
<p>
For example:
</p>
<pre>
if selector.match(element)
puts "Element is a login form"
end
</pre>
</div>
</div>
<div id="method-M000400" class="method-detail">
<a name="M000400"></a>
<div class="method-heading">
<a href="Selector.src/M000400.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000400.html');return false;">
<span class="method-name">next_element</span><span class="method-args">(element, name = nil)</span>
</a>
</div>
<div class="method-description">
<p>
Return the next element after this one. Skips sibling text nodes.
</p>
<p>
With the <tt>name</tt> argument, returns the next element with that name,
skipping other sibling elements.
</p>
</div>
</div>
<div id="method-M000398" class="method-detail">
<a name="M000398"></a>
<div class="method-heading">
<a href="Selector.src/M000398.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000398.html');return false;">
<span class="method-name">select(root) => array<br />
</span>
</a>
</div>
<div class="method-description">
<p>
Selects and returns an array with all matching elements, beginning with one
node and traversing through all children depth-first. Returns an empty
array if no <a href="Selector.html#M000397">match</a> is found.
</p>
<p>
The root node may be any element in the document, or the document itself.
</p>
<p>
For example:
</p>
<pre>
selector = HTML::Selector.new "input[type=text]"
matches = selector.select(element)
matches.each do |match|
puts "Found text field with name #{match.attributes['name']}"
end
</pre>
</div>
</div>
<div id="method-M000399" class="method-detail">
<a name="M000399"></a>
<div class="method-heading">
<a href="Selector.src/M000399.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000399.html');return false;">
<span class="method-name">select_first</span><span class="method-args">(root)</span>
</a>
</div>
<div class="method-description">
<p>
Similar to <a href="Selector.html#M000398">select</a> but returns the first
matching element. Returns <tt>nil</tt> if no element matches the selector.
</p>
</div>
</div>
<h3 class="section-bar">Protected Instance methods</h3>
<div id="method-M000402" class="method-detail">
<a name="M000402"></a>
<div class="method-heading">
<a href="Selector.src/M000402.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000402.html');return false;">
<span class="method-name">attribute_match</span><span class="method-args">(equality, value)</span>
</a>
</div>
<div class="method-description">
<p>
Create a regular expression to <a href="Selector.html#M000397">match</a> an
attribute value based on the equality operator (=, ^=, |=, etc).
</p>
</div>
</div>
<div id="method-M000405" class="method-detail">
<a name="M000405"></a>
<div class="method-heading">
<a href="Selector.src/M000405.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000405.html');return false;">
<span class="method-name">next_selector</span><span class="method-args">(statement, values)</span>
</a>
</div>
<div class="method-description">
<p>
Called to create a dependent selector (sibling, descendant, etc). Passes
the remainder of the statement that will be reduced to zero eventually, and
array of substitution values.
</p>
<p>
This method is called from four places, so it helps to put it here for
reuse. The only logic deals with the need to detect comma separators
(alternate) and apply them to the selector group of the top selector.
</p>
</div>
</div>
<div id="method-M000403" class="method-detail">
<a name="M000403"></a>
<div class="method-heading">
<a href="Selector.src/M000403.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000403.html');return false;">
<span class="method-name">nth_child</span><span class="method-args">(a, b, of_type, reverse)</span>
</a>
</div>
<div class="method-description">
<p>
Returns a lambda that can <a href="Selector.html#M000397">match</a> an
element against the nth-child pseudo class, given the following arguments:
</p>
<ul>
<li><tt>a</tt> — Value of a part.
</li>
<li><tt>b</tt> — Value of b part.
</li>
<li><tt>of_type</tt> — True to test only elements of this type (of-type).
</li>
<li><tt>reverse</tt> — True to count in reverse order (last-).
</li>
</ul>
</div>
</div>
<div id="method-M000404" class="method-detail">
<a name="M000404"></a>
<div class="method-heading">
<a href="Selector.src/M000404.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000404.html');return false;">
<span class="method-name">only_child</span><span class="method-args">(of_type)</span>
</a>
</div>
<div class="method-description">
<p>
Creates a only child lambda. Pass +of-type+ to only look at elements of its
type.
</p>
</div>
</div>
<div id="method-M000401" class="method-detail">
<a name="M000401"></a>
<div class="method-heading">
<a href="Selector.src/M000401.html" target="Code" class="method-signature"
onclick="popupCode('Selector.src/M000401.html');return false;">
<span class="method-name">simple_selector</span><span class="method-args">(statement, values, can_negate = true)</span>
</a>
</div>
<div class="method-description">
<p>
Creates a simple selector given the statement and array of substitution
values.
</p>
<p>
Returns a hash with the values <tt>tag_name</tt>, <tt>attributes</tt>,
<tt>pseudo</tt> (classes) and <tt>negation</tt>.
</p>
<p>
Called the first time with <tt>can_negate</tt> true to allow negation.
Called a second time with false since negation cannot be negated.
</p>
</div>
</div>
</div>
</div>
<div id="validator-badges">
<p><small><a href="http://validator.w3.org/check/referer">[Validate]</a></small></p>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
8b99df826c3b6cf56a1caaae5f931d50
>
files
>
1050
