CSS Selectors

Overview

CSS selectors define the elements to which a set of CSS rules apply By default, all CSS styles of a module are applied to the module's HTML element, this is why original CSS selector is chosen. Original is just a convenient name, it equals to class of the module's element.

This is the select with the list of CSS selectors.

1. Remove all the styles under the chosen selector
2. Add a new CSS selector

CSS selector created under template and global settings is applied to .builderiusContent element.

Creating CSS selector

To create a new CSS selector we have to click on + icon (see the screenshot above) so "Add new CSS selector" modal window will appear.

We can write any CSS selector inside the input and receive the suggestion about the number of targeted elements.

If we want to target the element itself, we write the selector without a space. If we want to target children elements, we write space before the selector text.

Pro tip!

Prefix CSS selector with a space to target modules' children elements. Or do not add a space before the selector text to target module's element itself.

Editing CSS selector

In order to add/remove styles for a specific CSS selector, we should choose it first in the dropdown.

1. Edit CSS selector
2. Remove CSS selector

After CSS selector is modified, all the styles of the previous one are getting transferred to the new one.

After CSS selector is deleted, all its styles are deleted as well.

Workflow

Taking into account the scopes of CSS related settings a good strategy would be to define styles for typography on global settings level. It means that h1, h2, h3, p, blockquote etc are created in global settings. Later, we can re-style specific elements by defining the new values in template and modules' settings.

CSS selectors combined with custom @media queries allow styling of everything in any possible responsive versions of the page(s).