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
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: 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
|
|
|
Invalid CSS Class Names
|
|
|
|
Valid CSS ID Names
|
|
|
Invalid CSS ID Names
|
|
|
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.