How Do I Select for Multiple Classes Using Nokogiri and Ruby

Question

From a table element, I would like to select all rows that have the class even or the class odd.

I tried the jQuery syntax:

report.css("table.data tr[class~=odd even]").each{|line| parse_line_item(line)}

but it threw an error, any help is appreciated, thanks.

Answer 1

Use two selectors: report.css("table.data tr.odd, table.data tr.even")

The ~= operator in a CSS attribute selector checks that the value matches a space-delimited list of classes. For instance, tr[class~=odd] would match <tr class="odd"> and <tr class="odd ball">. However, in the specific case of the class attribute, the better selector is simply tr.odd.

If you use the ~= operator with a space in the value (as in tr[class~="odd even"], the selector will never match anything.

Answer 2

The CSS selector you have there is not even a syntactically valid selector:

[class~=odd even]

Values that contain whitespace must always be quoted, so the correct way to write this selector would be:

[class~="odd even"]

However, this selector actually cannot ever match anything: the [attr~=val] attribute value selector matches ...

an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces)

Since the words are separated by whitespace, this means they cannot ever contain whitespace themselves. But the word you are looking for ("odd even"), does contain whitespace, therefore it cannot ever match anything.

Presumably, what you are looking for is an OR combinator, but it doesn't exist. So, what you are looking for cannot be expressed with CSS selectors.

Well, actually, that's not true: it can be expressed with CSS selectors. You can simply use selector groups, which give you set union of the matches, which is equivalent to using an OR combinator:

table.data tr.odd, table.data tr.even

Remember: CSS is set-based, therefore order doesn't matter. In your case, order does matter, which means that CSS is really the wrong tool for the job:

report.xpath('//table[@class="data"]//tr[@class="odd" or @class="even"')

Although I must admit that I am not sure why you don't just use something like this:

report.css('table.data tr')

After all, isn't selecting all odd and all even rows the same as selecting all rows? I mean, what else have you got in there, irrational rows?