Style Selectors

A CSS Selector is just a way to point to something on your webpage so you can style it. It tells your website, “Hey, I want to style this specific thing.”

The thing is a HTML element which can be selected using one of its many attributes. Including its HTML tag, a class or it’s unique ID.

For example:

• p for “all paragraphs.”
• .class-name for “all elements with this class.”
• #unique-id for “the one element with this ID.”

Some selectors are super simple, and some can be more advanced — like only targeting paragraphs inside a certain section.

In this article, we’ll show you what selectors are and how to use them when styling things with GenerateBlocks.

Before we dive deeper, let’s look at a simple example of a CSS rule to help explain what a selector is:

.special-text {
  color: blue;
  font-size: 16px;
}

A CSS rule has two main parts:

1. The Selector
   • This is the part that says which element on the page you want to style.
   • In our example, .special-text is the selector. It means “any element with the class special-text.”
2. The Declaration
   • Inside the curly braces { }, we list the style properties we want to apply to the element.
   • In this example, color: blue; and font-size: 16px; are declarations, meaning we’re telling the browser to make the text blue and the font size 16 pixels.

So, when you put them together, the browser knows to find all elements with the class special-text and make the text blue with a font size of 16px.

GenerateBlocks Selector basics

Each GenerateBlocks block added to a post is automatically assigned a unique CSS class, for example:

.gb-element-0d3db716

This class serves as the block’s main selector, and it’s selected by default. It’s used to apply all the style properties you set for that block.

You can see this main selector in the block’s Styles panel:

GenerateBlocks dynamically generates the CSS by combining the selector with the styles you apply. This of course happens behind the scenes, but for transparency here is an example of what the CSS could look like:

.gb-element-0d3db716 {
  background-colour: var(--base);
  padding: 1rem;   
}

Selectors for hover & focus, links and icons

GenerateBlocks Free provides options to set more specific styles, which may include:

• hover & focus states of the current block
• links & hovered links within the block
• icons & hovered icons within the block

To style states, links, or icons, use the shortcut option or select them from the MORE options list beneath the main selector, as shown in the examples of a Container Block and a Text Block below.

The chosen selector

Once chosen, the selector shown in the block’s settings will update to match.

For example, if you select the Icon, the selector will change to display as follows:

Here we can see the Icon shortcut has been highlighted and the selector string has been updated.

.gb-text-eac3496b .gb-shape svg

You will note that the shortcut says Icon whereas in the Selector we display the actual css selector components.

Any style property values you now set will get applied to that selector.

Editing styles and Editing & Deleting Selectors.

You can edit the styles of any existing selector simply by choosing that selector again. There are also options beside each selector.

selector options are as follows:

1. Edit the Selector string itself, this is a Pro only option.
   in doing so you will be updating the selector string used in the blocks CSS.
2. Delete the Selector.
   This will simply clear the styles from any of the predefined selectors.
   In GenerateBlocks Pro, this option allows you to permanently delete any custom selectors.

Selectors and Responsive Style Controls

In the same way you can apply styles to a block or Global Style under any of the responsive display conditions, this also applies to selectors.

For any chosen selector you can switch between the responsive views and set styles for that specific view.

GenerateBlocks Pro Selectors

GenerateBlocks Pro unlocks the full potential of this feature by letting you build your own custom selectors.

In the More Options tab, you’ll see the + NEW selector button. Click it to open the panel shown below and start creating a custom selector.

The selector builder panel is split into several parts:

1. SELECTOR field
   This free form field allows you to add components to your main selector.
2. Compound Selector Toggle
   This toggle controls whether the SELECTOR field values are combined with the main selector. When enabled, an ampersand (&) is added before the first component, indicating a compound selector.
3. Interactions, Links & Pseudo Elements
   A series of shortcut options to add one commonly used component to the SELECTOR.
4. Cancel & Create
   Cancel the operation or commit to creating the selector.

Custom Selector basics

All custom selectors must begin with the main selector, which is either the block’s unique class or the Global Style class. For example, a container block’s unique class might look like this:

.gb-element-9901dac8

GenerateBlocks automatically adds the main selector at the start of the selector string.

You can build custom selectors by adding “components” in the SELECTOR field, which are positioned after the main selector.

You also have the option to compound the main selector with the first component. This is required, for example, when applying hover styles.

For more information on the terminology used here, check the Further Reading section below. For now, let’s look at some practical examples.

Example selectors

In our examples, we’ll use a modified version of our Card pattern to show how to create custom selectors and apply styles.

Our card example for visual reference:

Line one of test

Line two of test

Card Button

And the list view of our card example:

• Container ( .gb-element-9901dac8 )
• Image
• “Lorem ipsum …”
• “Lorem ipsum …”
• Button

Example 1 – Styling multiple paragraph tags inside the Container

Instead of applying styles directly to each paragraph (Text Block) inside, we can use selectors to target all <p> tags within the card container.

To do this we need to create a selector that starts with our container block, that will look something like this:

.gb-element-9901dac8 p

The steps to creating the necessary selector are:

1. select the Container Block
2. in the selector more options choose the +NEW selector
3. in the SELECTOR field add: p
   • the Compound Select option will be disabled.
4. Click Create
5. Add Styles and see them apply to the P tags inside the container.

Any Paragraphs that are now placed inside that Container will attract those styles.

Example 2 – change paragraph styles when the container is hovered over

In the next example, we’ll show how to set different styles for our nested <p> tags when the card container is hovered. This requires a slightly more complex selector, which will look something like this:

.gb-element-9901dac8:hover p

Notice how there is no space between the .gb-element-9901dac8 and the :hover – this is because it’s a compound selector. As we want to target the p when the parent element is being hovered over.

To achieve this we:

1. select the Container Block
2. in the selector more options choose the +NEW selector
3. in the SELECTOR field type: :hover p
4. check the Compound Selector option
   • this joins our components to the main selector.
5. Add Styles and watch them apply to the P tags inside the container when it is hovered over.

You can use both of the examples to build any kind of CSS rules, for more information on working with selectors see the further reading section below.

Pro Global Styles and Selectors

You won’t be surprised, but perhaps excited to hear that the Selector Builder works with Pro Global Styles. So anything you can do on a local block style you can do in a global style.

This allows you to develop any kind of styles for your site in a way that best suits your workflow.

.gbp-container 

.gbp-container a

.gbp-accordion-item.is-open

.gb-accordion-item.is-open > a.post-link

.gbp-button--primary:hover

.card.has-fancy-link > a.post-link