Code Snippet - How to Add CSS Class to Jade

Table of Contents

1. Introduction
2. Example Code
3. The HTML Code
4. Conclusion

Introduction

The following is an example of how to conditionally add a CSS class to an HTML element in Jade.

Example Code

Append the CSS class active when a variable is equal to

1. The variable data.Value is coming from the Node.js server side.

input(type='submit' value='button' name="number")(class= data.Value === 1 ? "active" : "")

The HTML Code

The actual HTML code will generate like the following:

input name="pageNumber" type="submit" value="1"

Conclusion

Using ternary expressions in Jade (Pug) templates makes it easy to conditionally add CSS classes to HTML elements based on server-side variables.