Home/ Questions/Q 8068433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T12:41:10+00:00

After accidentally using a CSS selector in an HTML template I started wondering if

  • 0

After accidentally using a CSS selector in an HTML template I started wondering if there is a template language or an extension to one that would allow this syntax, and whether it would be useful. So 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:

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

Does something like this exist?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe you mean something like Jade?

    It is an HTML preprocessor.

    The 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 to:

    <!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, it is not exactly what you’re asking, but you may like Zen Coding. It is a plugin to code HTML at high-speed. GIF showing what it does:

    zen coding animated gif

    It’s basically:

    1. Write pseudo-html.
    2. Hit the shortcut.
    3. Get full HTML.
    4. ?????
    5. Profit!

    You should check with your editor if it can support this. FWIW, I use this in VIM and it’s awesome.

    • 0