The Combo Input

To get a feel for how the Combo Input works, try typing the following string. As you type, you'll see a live preview on the right.

article > header, nav, footer

The Combo Input will recognise valid html elements, and any css classes in your stylesheets will be considered valid utility classes. There are also a few combinators that you can use:

1. SPACE - Putting a space between identifiers will nest the second element inside the first.
2. COMMA (,) - Separating identifiers with a comma will keep them at the same level.
3. GREATER THAN (>) - Using a > between identifiers will create a bookmark which comma separated identifiers will then use.
4. SEMI-COLON (;) - You can return to root at any time using a semi-colon. This will also reset any existing bookmarks.

Try this more complex input:

header nav a; section article > header, p, footer; footer address

As you can see, it's very easy to construct complex components, and the bookmark and semi-colon approach makes it super intuitive to know where you are.

But this isn't all the Combo Input can do. The really fun stuff is coming up. First, we need to address some terminology.