Skip to main content
All CollectionsDivi 5Options Groups
Understanding the CSS ID & Classes in Divi 5
Understanding the CSS ID & Classes in Divi 5

Learn how to properly use the CSS IDs and Classes to ensures your site is easier to style, maintain, and debug.

Updated over a month ago

The CSS ID and Classes options allow you to assign unique identifiers or reusable labels to modules, making it easier to apply custom CSS. These features are especially helpful when styling elements through a child theme’s stylesheet or targeting specific modules with unique functionality.

Where to Find the CSS ID & Classes Options

  1. Open the Module Settings: Click the gear icon or the module itself to access the settings.

  2. Navigate to the Advanced Tab: Locate the CSS ID & Classes option group.

CSS ID & Classes Settings

  1. CSS ID: Assign a unique identifier to the module. Use this when you need to target a single, specific module in your custom jQuery.

  2. CSS Classes: Assign one or more class names to the module. Classes are reusable and allow you to apply the same styling or behavior to multiple elements across your site.

    • Multiple classes can be added by separating them with spaces.

Best Practices for Using CSS IDs and Classes

  • Use IDs for Specificity: Apply CSS IDs only when you need to target a single module uniquely. Avoid reusing the same ID across multiple elements.

  • Classes for Reusability: Use CSS classes for shared styles or behaviors across multiple modules.

  • Keep Names Descriptive: Use meaningful, functional names that describe the purpose or role of the element.

  • Avoid Inline CSS: Always add CSS rules to your child theme’s stylesheet or Divi’s Custom CSS area for scalability and ease of maintenance.

Valid and Invalid Examples of CSS IDs and Classes

Valid CSS Class Names

btn-primary – Functional and reusable for primary buttons.

feature-highlight – Descriptive, indicating a design feature.

header-navigation – Identifies its purpose as the header navigation.

Invalid CSS Class Names

123class – Class names cannot start with a number.

btn primary – Spaces are not allowed; use a hyphen instead (e.g., btn-primary).

#header – A class name cannot include a # symbol, as it’s reserved for IDs.

.btn-primary - Do not include the dot (.) in front of the class name

Valid CSS ID Names

main-header – Identifies the primary header element.

cta-button-home – Specifies a unique call-to-action button on the homepage.

footer-copyright – Refers to the footer’s copyright section.

Invalid CSS ID Names

123id – IDs cannot start with a number.

main header – Spaces are not allowed; use a hyphen or underscore.

@cta-button – Special characters (e.g., @, #, &) are not allowed in IDs.

Key Takeaways

  • CSS Classes: Reuse them across multiple modules for consistent styling.

  • CSS IDs: Use them for single, unique elements that require distinct styles.

  • Avoid Invalid Names: Follow naming conventions to prevent errors in your stylesheet.

  • Plan Ahead: Descriptive, functional names help keep your CSS manageable and scalable.

Properly naming and using CSS IDs and Classes ensures your site is easier to style, maintain, and debug.

Did this answer your question?