Class: HTML::Selector
- Defined in:
- actionview/lib/action_view/vendor/html-scanner/html/selector.rb
Overview
Selects HTML elements using CSS 2 selectors.
The Selector
class uses CSS selector expressions to match and select HTML elements.
For example:
selector = HTML::Selector.new "form.login[action=/login]"
creates a new selector that matches any form
element with the class login
and an attribute action
with the value /login
.
Matching Elements
Use the #match method to determine if an element matches the selector.
For simple selectors, the method returns an array with that element, or nil
if the element does not match. For complex selectors (see below) the method returns an array with all matched elements, of nil
if no match found.
For example:
if selector.match(element)
puts "Element is a login form"
end
Selecting Elements
Use the #select method to select all matching elements starting with one element and going through all children in depth-first order.
This method returns an array of all matching elements, an empty array if no match is found
For example:
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
Expressions
Selectors can match elements using any of the following criteria:
-
name
– Match an element based on its name (tag name). For example,p
to match a paragraph. You can use*
to match any element. -
#id
– Match an element based on its identifier (theid
attribute). For example,#page
. -
.class
– Match an element based on its class name, all class names if more than one specified. -
[attr]
– Match an element that has the specified attribute. -
[attr=value]
– Match an element that has the specified attribute and value. (More operators are supported see below) -
:pseudo-class
– Match an element based on a pseudo class, such as:nth-child
and:empty
. -
:not(expr)
– Match an element that does not match the negation expression.
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.
For example:
selector = HTML::Selector.new "form.login[action=/login]"
The matched element must be of type form
and have the class login
. It may have other classes, but the class login
is required to match. It must also have an attribute called action
with the value /login
.
This selector will match the following element:
<form class="login form" method="post" action="/login">
but will not match the element:
<form method="post" action="/logout">
Attribute Values
Several operators are supported for matching attributes:
-
name
– The element must have an attribute with that name. -
name=value
– The element must have an attribute with that name and value. -
name^=value
– The attribute value must start with the specified value. -
name$=value
– The attribute value must end with the specified value. -
name*=value
– The attribute value must contain the specified value. -
name~=word
– The attribute value must contain the specified word (space separated). -
name|=word
– The attribute value must start with specified word.
For example, the following two selectors match the same element:
#my_id
[id=my_id]
and so do the following two selectors:
.my_class
[class~=my_class]
Alternatives, siblings, children
Complex selectors use a combination of expressions to match elements:
-
expr1 expr2
– Match any element against the second expression if it has some parent element that matches the first expression. -
expr1 > expr2
– Match any element against the second expression if it is the child of an element that matches the first expression. -
expr1 + expr2
– Match any element against the second expression if it immediately follows an element that matches the first expression. -
expr1 ~ expr2
– Match any element against the second expression that comes after an element that matches the first expression. -
expr1, expr2
– Match any element against the first expression, or against the second expression.
Since children and sibling selectors may match more than one element given the first element, the #match method may return more than one match.
Pseudo classes
Pseudo classes were introduced in CSS 3. They are most often used to select elements in a given position:
-
:root
– Match the element only if it is the root element (no parent element). -
:empty
– Match the element only if it has no child elements, and no text content. -
:content(string)
– Match the element only if it hasstring
as its text content (ignoring leading and trailing whitespace). -
:only-child
– Match the element if it is the only child (element) of its parent element. -
:only-of-type
– Match the element if it is the only child (element) of its parent element and its type. -
:first-child
– Match the element if it is the first child (element) of its parent element. -
:first-of-type
– Match the element if it is the first child (element) of its parent element of its type. -
:last-child
– Match the element if it is the last child (element) of its parent element. -
:last-of-type
– Match the element if it is the last child (element) of its parent element of its type. -
:nth-child(b)
– Match the element if it is the b-th child (element) of its parent element. The valueb
specifies its index, starting with 1. -
:nth-child(an+b)
– Match the element if it is the b-th child (element) in each group ofa
child elements of its parent element. -
:nth-child(-an+b)
– Match the element if it is the first child (element) in each group ofa
child elements, up to the firstb
child elements of its parent element. -
:nth-child(odd)
– Match element in the odd position (i.e. first, third). Same as:nth-child(2n+1)
. -
:nth-child(even)
– Match element in the even position (i.e. second, fourth). Same as:nth-child(2n+2)
. -
:nth-of-type(..)
– As above, but only counts elements of its type. -
:nth-last-child(..)
– As above, but counts from the last child. -
:nth-last-of-type(..)
– As above, but counts from the last child and only elements of its type. -
:not(selector)
– Match the element only if the element does not match the simple selector.
As you can see, :nth-child
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.
For example:
table tr:nth-child(odd)
Selects every second row in the table starting with the first one.
div p:nth-child(4)
Selects the fourth paragraph in the div
, but not if the div
contains other elements, since those are also counted.
div p:nth-of-type(4)
Selects the fourth paragraph in the div
, counting only paragraphs, and ignoring all other elements.
div p:nth-of-type(-n+4)
Selects the first four paragraphs, ignoring all others.
And you can always select an element that matches one set of rules but not another using :not
. For example:
p:not(.post)
Matches all paragraphs that do not have the class .post
.
Substitution Values
You can use substitution with identifiers, class names and element values. A substitution takes the form of a question mark (?
) and uses the next value in the argument list following the CSS expression.
The substitution value may be a string or a regular expression. All other values are converted to strings.
For example:
selector = HTML::Selector.new "#?", /^\d+$/
matches any element whose identifier consists of one or more digits.
Defined Under Namespace
Classes: InvalidSelectorError
Class Method Summary collapse
-
.for_class(cls) ⇒ Object
:call-seq: Selector.for_class(cls) => selector.
-
.for_id(id) ⇒ Object
:call-seq: Selector.for_id(id) => selector.
Instance Method Summary collapse
-
#initialize(selector, *values) ⇒ Selector
constructor
:call-seq: Selector.new(string, [values …]) => selector.
-
#match(element, first_only = false) ⇒ Object
:call-seq: match(element, first?) => array or nil.
-
#next_element(element, name = nil) ⇒ Object
Return the next element after this one.
-
#select(root) ⇒ Object
:call-seq: select(root) => array.
-
#select_first(root) ⇒ Object
Similar to #select but returns the first matching element.
-
#to_s ⇒ Object
:nodoc:.
Constructor Details
#initialize(selector, *values) ⇒ Selector
:call-seq:
Selector.new(string, [values ...]) => selector
Creates a new selector from a CSS 2 selector expression.
The first argument is the selector expression. All other arguments are used for value substitution.
Throws InvalidSelectorError is the selector expression is invalid.
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 241 def initialize(selector, *values) raise ArgumentError, "CSS expression cannot be empty" if selector.empty? @source = "" values = values[0] if values.size == 1 && values[0].is_a?(Array) # We need a copy to determine if we failed to parse, and also # preserve the original pass by-ref statement. statement = selector.strip.dup # Create a simple selector, along with negation. simple_selector(statement, values).each { |name, value| instance_variable_set("@#{name}", value) } @alternates = [] @depends = nil # Alternative selector. if statement.sub!(/^\s*,\s*/, "") second = Selector.new(statement, values) @alternates << second # If there are alternate selectors, we group them in the top selector. if alternates = second.instance_variable_get(:@alternates) second.instance_variable_set(:@alternates, []) @alternates.concat alternates end @source << " , " << second.to_s # Sibling selector: create a dependency into second selector that will # match element immediately following this one. elsif statement.sub!(/^\s*\+\s*/, "") second = next_selector(statement, values) @depends = lambda do |element, first| if element = next_element(element) second.match(element, first) end end @source << " + " << second.to_s # Adjacent selector: create a dependency into second selector that will # match all elements following this one. elsif statement.sub!(/^\s*~\s*/, "") second = next_selector(statement, values) @depends = lambda do |element, first| matches = [] while element = next_element(element) if subset = second.match(element, first) if first && !subset.empty? matches << subset.first break else matches.concat subset end end end matches.empty? ? nil : matches end @source << " ~ " << second.to_s # Child selector: create a dependency into second selector that will # match a child element of this one. elsif statement.sub!(/^\s*>\s*/, "") second = next_selector(statement, values) @depends = lambda do |element, first| matches = [] element.children.each do |child| if child.tag? && subset = second.match(child, first) if first && !subset.empty? matches << subset.first break else matches.concat subset end end end matches.empty? ? nil : matches end @source << " > " << second.to_s # Descendant selector: create a dependency into second selector that # will match all descendant elements of this one. Note, elsif statement =~ /^\s+\S+/ && statement != selector second = next_selector(statement, values) @depends = lambda do |element, first| matches = [] stack = element.children.reverse while node = stack.pop next unless node.tag? if subset = second.match(node, first) if first && !subset.empty? matches << subset.first break else matches.concat subset end elsif children = node.children stack.concat children.reverse end end matches.empty? ? nil : matches end @source << " " << second.to_s else # The last selector is where we check that we parsed # all the parts. unless statement.empty? || statement.strip.empty? raise ArgumentError, "Invalid selector: #{statement}" end end end |
Class Method Details
.for_class(cls) ⇒ Object
216 217 218 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 216 def for_class(cls) self.new([".?", cls]) end |
Instance Method Details
#match(element, first_only = false) ⇒ Object
:call-seq:
match(element, first?) => array or nil
Matches an element against the selector.
For a simple selector this method returns an array with the element if the element matches, nil otherwise.
For a complex selector (sibling and descendant) this method returns an array with all matching elements, nil if no match is found.
Use first_only=true if you are only interested in the first element.
For example:
if selector.match(element)
puts "Element is a login form"
end
365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 365 def match(element, first_only = false) # Match element if no element name or element name same as element name if matched = (!@tag_name || @tag_name == element.name) # No match if one of the attribute matches failed for attr in @attributes if element.attributes[attr[0]] !~ attr[1] matched = false break end end end # Pseudo class matches (nth-child, empty, etc). if matched for pseudo in @pseudo unless pseudo.call(element) matched = false break end end end # Negation. Same rules as above, but we fail if a match is made. if matched && @negation for negation in @negation if negation[:tag_name] == element.name matched = false else for attr in negation[:attributes] if element.attributes[attr[0]] =~ attr[1] matched = false break end end end if matched for pseudo in negation[:pseudo] if pseudo.call(element) matched = false break end end end break unless matched end end # If element matched but depends on another element (child, # sibling, etc), apply the dependent matches instead. if matched && @depends matches = @depends.call(element, first_only) else matches = matched ? [element] : nil end # If this selector is part of the group, try all the alternative # selectors (unless first_only). if !first_only || !matches @alternates.each do |alternate| break if matches && first_only if subset = alternate.match(element, first_only) if matches matches.concat subset else matches = subset end end end end matches end |
#next_element(element, name = nil) ⇒ Object
Return the next element after this one. Skips sibling text nodes.
With the name
argument, returns the next element with that name, skipping other sibling elements.
495 496 497 498 499 500 501 502 503 504 505 506 507 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 495 def next_element(element, name = nil) if siblings = element.parent.children found = false siblings.each do |node| if node.equal?(element) found = true elsif found && node.tag? return node if (name.nil? || node.name == name) end end end nil end |
#select(root) ⇒ Object
:call-seq:
select(root) => array
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 match is found.
The root node may be any element in the document, or the document itself.
For example:
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
455 456 457 458 459 460 461 462 463 464 465 466 467 468 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 455 def select(root) matches = [] stack = [root] while node = stack.pop if node.tag? && subset = match(node, false) subset.each do |match| matches << match unless matches.any? { |item| item.equal?(match) } end elsif children = node.children stack.concat children.reverse end end matches end |
#select_first(root) ⇒ Object
Similar to #select but returns the first matching element. Returns nil
if no element matches the selector.
473 474 475 476 477 478 479 480 481 482 483 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 473 def select_first(root) stack = [root] while node = stack.pop if node.tag? && subset = match(node, true) return subset.first if !subset.empty? elsif children = node.children stack.concat children.reverse end end nil end |
#to_s ⇒ Object
:nodoc:
486 487 488 |
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 486 def to_s #:nodoc: @source end |