HTML::Selector

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.
• :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.

  table tr:nth-child(odd)

  div p:nth-child(4)

  div p:nth-of-type(4)

  div p:nth-of-type(-n+4)

  p:not(.post)

  selector = HTML::Selector.new "#?", /^\d+$/