Tags

Syntax

Class
Properties
{...}{tag}:{...}
{...} {tag} {...} { ... }

Parameters

tag
a | audio | b | blockquote | br | button | code | canvas | div | em | embed | figure | h1 | h2 | h3 | h4 | h5 | h6 | hr | i | iframe | img | input | label | li | object | ol | option | p | picture | pre | q | s | section | select | small | span | strong | sub | sup | svg | table | tbody | td | textarea | tfoot | th | thead | tr | u | ul | video

HTML tag name.

<div class="t1 flex flex-center flex-wrap @/b-3-blue @/button:bg-c-red"> <a class="t1 flex flex-center w-32 h-32 m-8">1</a> <button class="t1 flex flex-center w-32 h-32 m-8">2</button> <p class="t1 flex flex-center w-32 h-32 m-8">3</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">4</h1> <div class="t1 w-full flex flex-center p-4"> <a class="t1 flex flex-center w-32 h-32 m-8">5</a> <button class="t1 flex flex-center w-32 h-32 m-8">6</button> <p class="t1 flex flex-center w-32 h-32 m-8">7</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">8</h1> </div> </div>
<div class="t1 flex flex-center flex-wrap @/../b-3-blue @/../button:bg-c-red"> <a class="t1 flex flex-center w-32 h-32 m-8">1</a> <button class="t1 flex flex-center w-32 h-32 m-8">2</button> <p class="t1 flex flex-center w-32 h-32 m-8">3</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">4</h1> <div class="t1 w-full flex flex-center p-4"> <a class="t1 flex flex-center w-32 h-32 m-8">5</a> <button class="t1 flex flex-center w-32 h-32 m-8">6</button> <p class="t1 flex flex-center w-32 h-32 m-8">7</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">8</h1> </div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Tag: a
t1 @/../a:block
.t1.\@\/\.\.\/a\:block a { display: block; }
Tag: div
t1 @/../div:block
.t1.\@\/\.\.\/div\:block div { display: block; }
Tag: h1
t1 @/../h1:block
.t1.\@\/\.\.\/h1\:block h1 { display: block; }