I need to specify individualized CSS rules for several modules (same kind of modules). How can I differentiate among them. The HTML code that is rendered only uses CSS classes, but not id. How can I add such “function” in code?
There you can see a slider in a separate full-width conatiner, and then another full-width-container with four modules: a) a full-width text module, then an icon box module with 7 elements, then a divider-with-text 1/4 width, and finally a carousel module 3/4 width.
A. CSS per element:
I want to have the seventh icon-box element to be centered.
I want the slider to be closer to the next full-width container (the gap is too much for my needs, and what you see is the default spacing, with NO bottom nor upper margins set).
I want some of the other icon-box elements to have special background or margins/paddings/fonts.
I guess if I have a different id# (not class) for any element, I can easily change the CSS for that element.
B:(Something different from the title)
How do I change the effect in icon-box, so on mouse hover, the icon flips AND changes color, instead of only changing color?