Classes and ids

Markup needs classes and ids all the time, so Pug has a short syntax for them that looks like CSS selectors: a dot before a class name and a hash before an id.

A class

Add a paragraph with a class to src/index.pug:

p.note Open seven days a week.

The dot and the class name go right after the tag name, without a space:

<p class="note">Open seven days a week.</p>

Several classes

Classes are chained with dots:

p.note.important Today we close at 18:00.

Pug joins them into one class attribute separated by spaces:

<p class="note important">Today we close at 18:00.</p>

An id

A hash sets the id. It usually goes on sections that in-page links point to:

section#hours
  h2 Opening hours
  p Every day from 8:00 to 20:00.

A link a(href="#hours") anywhere on the page scrolls to this section:

<section id="hours">
  <h2>Opening hours</h2>
  <p>Every day from 8:00 to 20:00.</p>
</section>

Classes and ids can be combined in any order: section#hours.box and section.box#hours give the same result.

div by default

If a line starts right with a dot or a hash, Pug assumes the div tag. A drink card in src/index.pug:

.card
  h2.card-title Cappuccino
  p.card-price $3

You do not need to write div:

<div class="card">
  <h2 class="card-title">Cappuccino</h2>
  <p class="card-price">$3</p>
</div>

This is handy for wrappers and grids, where almost every tag is a div with classes.

Classes and CSS

Pug only writes classes into the markup; you write the styles. Link a stylesheet in the page skeleton, and rules such as .card and .note apply as usual:

doctype html
html(lang="en")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" href="style.css")
  body
    .card
      h2.card-title Cappuccino

Put the style.css file next to the finished HTML in dist/.

Common mistake

A space between the tag and the dot:

p .note Open seven days a week.

Text starts after the space, so the class turned into words of the paragraph:

<p>.note Open seven days a week.</p>

Write the class right next to the tag: p.note.