Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's an elegant way to conditionally add a class to an HTML element in a view?

People also ask

How do I add a class to an element in HTML?

To add a class to an element rather than replacing its existing classes, use the += operator instead. Note, it is important to prefix the new classname with space; otherwise, one of the existing classes of an element is lost.

How do I add a conditional class?

To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.

How do you apply a class style rule to an element?

It is needed to stylize HTML elements – including changing colors, fonts, or the size of a text. If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size.


I use the first way, but with a slightly more succinct syntax:

<div class="<%= 'ok' if @status == 'success' %>">

Though usually you should represent success with boolean true or a numeric record ID, and failure with boolean false or nil. This way you can just test your variable:

<div class="<%= 'ok' if @success %>">

A second form using the ternary ?: operator is useful if you want to choose between two classes:

<div class="<%= @success ? 'good' : 'bad' %>">

Finally, you can use Rail's record tag helpers such as div_for, which will automagically set your ID and class based on the record you give it. Given a Person with id 47:

# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>

Avoiding logic in the views

The problem with the standard approach is that it requires logic in the form of if statements or ternaries in the view. If you have multiple conditional CSS classes mixed with default classes, then you need to put that logic into a string interpolation or ERB tag.

Here's an updated approach that avoids putting any logic into the views:

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string method

The class_string helper takes a hash with key/value pairs consisting of CSS class name strings and boolean values. The result of the method is a string of classes where the boolean value evaluated to true.

Sample Usage

class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"

Other Use Cases

This helper can be used within ERB tags or with Rails helpers such as link_to.

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

<% div_for @person, class: class_string(ok: @success) do %>
<% end %>

<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>

Either/Or Classes

For use cases where a ternary would be necessary (e.g. @success ? 'good' : 'bad'), pass an array where the first element is the class for true and the other is for false

<div class="<%= [:good, :bad] => @success %>">

Inspired by React

This technique is inspired by an add-on called classNames (formerly known as classSet) from Facebook’s React front-end framework.

Using in your Rails projects

As of now, the class_names function does not exist in Rails, but this article shows you how to add or implement it into your projects.


class_names (Rails 6.1+)

Rails 6.1 introduces a class_names view helper to make it easier to conditionally apply class names in views.

Before:

<div class="<%= item.for_sale? ? 'active' : '' %>">

After:

<div class="<%= class_names(active: item.for_sale?) %>">

More examples:

class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"

Sources:

  • Link to the corresponding PR.
  • Link to the class_names docs.

You can also use the content_for helper, especially if the DOM is located in a layout and you want to set the css class depending on the partial loaded.

On the layout:

%div{class: content_for?(:css_class) ? yield(:css_class) : ''}

On the partial:

- content_for :css_class do
    my_specific_class

That is it.