What is a CSS rule?

To easily go through this support page, you will need basic knowledge of CSS

In short, there are 2 parts in a CSS rule:

  • The selector: to indicate which part of the popup you want to style,
  • The declaration: the style you want to apply on the selected elements.

In this example, we target  <p>  elements (with the selector p ) to apply the style color: red;  on them.


Test it right now! On a popup created for this test, add a new CTA block, then add the following rule into the CSS customization box:

.wisepops-block-cta {
  transform: rotate(3deg);
}


You should immediately see the rule being applied on your button:


The goal of this article is to explain how to properly write the selectors to target various parts of your popups.

Use classes starting by wisepops

In the selector of the previous example (.wisepops-block-cta ), the leading dot indicates that wisepops-block-cta  is a class.
Wisepops provides various classes to help you select the elements to stylize.

You should not use other classes in selectors, such as bLXhPG, Block__BlockContainer-jPTcrl, etc. These are generated classes, that might change at any time. While we ensure persistence of the classes starting by wisepops, all others are for internal purpose.

Selector on block type

As seen in the previous example, you can target blocks by type. The following classes are available:

  • wisepops-block-2cta
  • wisepops-block-cta
  • wisepops-block-dismiss
  • wisepops-block-html
  • wisepops-block-iframe
  • wisepops-block-image
  • wisepops-block-like
  • wisepops-block-separator
  • wisepops-block-signup
  • wisepops-block-spacing
  • wisepops-block-text
  • wisepops-block-video

You can also target the tab with the following class:

wisepops-tab

Selector on block ID

You might need to select a unique block among other blocks of the same type. To do so, you can use its unique class, based on a unique ID. Such classes look like this: wisepops-block-id-42 . A block will keep its unique class until it is deleted, and no other block will never have the same unique class.

To find this unique class, process as following:

  • Open the preview of your popup,
  • Right-click on the block you want to target and click on "Inspect",
  • Find the class related to the block type on the selected element, or its parents,
  • The block type class should be immediately followed by the unique class

Selector on elements inside a block

You might want to select elements inside a block. For example, if you want to stylize the submit button of a signup block, you will have to use a descendant combinator in your selector:

.wisepops-block-signup button {
  text-shadow: 0 0 5px white;
}
Did this answer your question?