Geek Answers Handbook

Using CSS selectors in HTML templates

After accidentally using the CSS selector in an HTML template, I began to wonder if there was a template language or extension for what this syntax would allow and if it would be useful. Therefore, instead of writing this:

<div id="mydiv"> <div class="first column">1</div> <div class="second column">2</div> </div>

We could write it like this:

 <div#mydiv> <div.first.column>1</div> <div.second.column>2</div> </div>

Is there something similar?

+4
source share
3 answers

Perhaps you mean something like Jade ?

This is an HTML preprocessor.

Following:

 doctype 5 html(lang="en") head title= pageTitle script(type='text/javascript') if (foo) { bar() } body h1 Jade - node template engine #container if youAreUsingJade p You are amazing else p Get on it!

Will be translated into:

 <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar() } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> </html>

Also, this is not exactly what you are asking for, but you might like Zen Coding . This is a plugin for high speed HTML coding. GIF shows what it does:

zen coding animated gif

Primarily:

  • Enter pseudo-html.
  • Click the shortcut.
  • Get full HTML.
  • ?????
  • Profit!

You should check your editor if it supports this. FWIW, I use this in VIM, and it's awesome.

+5
source

There is a tool that uses a similar (albeit not identical) syntax called Zen Coding . You enter this in your editor with Zen encoding enabled:

 div#page>div.logo+ul#navigation>li*5>a

... and expand it to:

 <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

This is different from what you describe in that it does not require a preprocessor to run the template, it is just an editor's assistant to compile the final HTML. It can satisfy your needs or not.

+2
source

Perhaps haml will suit your needs? He looks very similar.

+1
source

More articles:


All Articles