Understanding the CSS ID & Classes in Divi 5

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.

Divi 5 - CSS ID and Classes Option Group

Where to Find the CSS ID & Classes Options

Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the CSS ID & Classes option group.

CSS ID & Classes Settings

CSS ID: Assign a unique identifier to the module. Use this when you need to target a single, specific module in your custom jQuery.
CSS Classes: The module can be assigned one or more class names. 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: For scalability and ease of maintenance, always add CSS rules to your child theme’s stylesheet or Divi’s Custom CSS area.

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.

How to Add Additional CSS Classes to Divi Elements

Understanding the Custom CSS Options in Divi 5

The Divi Audio Module

The Divi Comments Module

The Divi Divider Module