Match maker

Given a CSS query, output the unindented html needed that will produce a match. For example, a.foo>b#bar should produce <a class=‘foo’><b id=‘bar’></b></a>

The html should have full tags, not self closing ones. The query follows the following grammar:

query   ::= element (">" element)*
element ::= name [id] class*
id      ::= "#" name
class   ::= "." name
name    ::= [a-z0-9]+

For the test cases you should expect at most 9 levels of nesting elements.