---
title: "Using modifier classes and ID's"
date: "2017-11-12T07:42:06+00:00"
summary: "Enhance your Drupal styling with modifier classes and IDs. Learn how to apply conditional styles, use the style tree, and create dynamic, JavaScript-driven design elements for more flexible and interactive websites."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-modifier-classes-and-ids"
id: "1ed76987-58b4-42bc-8920-3e43f1fb692e"
---

Use Modifiers to apply styles to an element when a specific class, id or attribute is present.These are most commonly added with JavaScript. For example, .is-active is a class that's added to a Drupal menu link when the link is the active page. In this example, you can add a Modifier called .is-active to your menu link style to apply specific styling when the menu "is active".

Important

Modifiersonly apply when something adds the class, id or attribute to the element. This most often requires JavaScript.

Add a modifier using the style tree
-----------------------------------

To add a modifier to a style:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Default** button
3.  Within the Style tree, click on the **\+ icon**on the selector you want to add a child to
4.  In the menu, click on **Modifier**
5.  Enter your modifier name in the **Custom modifier field.** Use (.) for class (#) for id or ( \[ attribute name \] ) for attribute.
6.  Click **Add**
7.  The Selector menu will close and the Modifier will be in the Style tree
8.  Click on the Modifier to apply CSS properties to it.

![72800f16-creating-modifier.gif](https://acquia.widen.net/content/03253e46-4396-45c4-819f-9c802fbee5ff/web/72800f16-creating-modifier.gif?animate=true)