Style Selectors

Global Styles themselves are a collection of CSS selectors.

When you create a Global Style, you’re creating a new CSS class selector, like this: .my-new-style

This is your main selector. By default, any styles you configure will be applied to this selector.

However, you can configure more selectors inside of your Global Style.

A great example of this is if you want to add styles to your element when it is hovered. This is the “Hover” selector.

By default, we expose the “Hover” selector right below your Global Style name.

When you click this “Hover” selector, you’ll see it appended to your Global Style name.

Now all of the styling you add will be applied only when the user hovers over the element this style is applied to.

We also expose a “Links” option if a Container or Headline block is selected while editing the Global Style. This will change the selector to: .test-style a

This will then apply your styling to all links inside of this Global Style.

If you have a Headline or Button block selected, and you have an icon set, you will also see an “Icon” selector you can click. This will change the selector to: .test-style .gb-icon svg

This will then apply your styling to all icons inside of this Global Style.

More Selectors

By clicking the “More” button, you open our selector builder. This is an advanced area where you can build your own custom selectors.

By default, we’ll show you some more shortcuts you can click on to start editing some popular selectors right away.

If a selector has styles applied to it, you’ll see an orange dot next to their name.

All custom selectors that you build will display in this list.

To create a new selector, click the “New” button.

You can see here we have a text field with a “Compound selector” toggle under it.

Regular selector

Anything you type into this field will be appended to your main selector after a space. For example, if we typed h2 into this field, the result would be .test-style h2

This will target all h2 elements inside an element with this Global Style.

Compound selector

By toggling the “Compound selector” toggle, we can remove this space. Here are some examples of a compound selector:

1. :hover – The hover selector compounds the main selector: .test-style:hover
2. :before – The before pseudo selector compounds the main selector: .test-style:before
3. :hover h2 – This will target all h2 elements inside our Global Style when it is hovered.

When we click the “Compound selector” toggle, you’ll see our text field starts with a & character. This is so our system understands that you do not want a space to appear after the main selector.

If your text field does not start with the & symbol, there will be a space between the main selector and your custom selector.

For example, if we had this in our text field: :hover h2
The resulting selector would look like this: .test-style :hover h2 (not the space after our main selector)