Class: HTML::Selector

Inherits:
Object show all
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 (the id 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 has string 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 value b specifies its index, starting with 1.

  • :nth-child(an+b) – Match the element if it is the b-th child (element) in each group of a child elements of its parent element.

  • :nth-child(-an+b) – Match the element if it is the first child (element) in each group of a child elements, up to the first b 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.

See www.w3.org/TR/css3-selectors/

Defined Under Namespace

Classes: InvalidSelectorError

Class Method Summary collapse

Instance Method Summary collapse

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.

Raises:

  • (ArgumentError) 


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

:call-seq:

Selector.for_class(cls) => selector

Creates a new selector for the given class name.



216
217
218
 
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 216

def for_class(cls)
  self.new([".?", cls])
end

.for_id(id) ⇒ Object

:call-seq:

Selector.for_id(id) => selector

Creates a new selector for the given id.



225
226
227
 
# File 'actionview/lib/action_view/vendor/html-scanner/html/selector.rb', line 225

def for_id(id)
  self.new(["#?", id])
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

Returns 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