Using CSS selectors

Using CSS selectors

CSS selectors allow you to target and style a specific state (pseudo-class), part (pseudo-element) or child of an element. You can also use them to target specific browsers using a prefix.

For example:

• Use the :hover (pseudo-class) selector to change the style of an element when the mouse hovers over it 
• Use the :before (pseudo-element) selector to add content before an element
• Use the :first-child (pseudo-element) selector to style the first child of an element

Quick guide - Apply CSS properties to the :hover selector

To apply CSS properties to a selector:

1. Navigate to the Style builder. This is available when you edit Base styles or Custom styles. 
2. Within the Style editor, click on the Style tree button. This will say Default on it
3. The menu that opens is called the Style tree
4. Click on the blue + Icon and then click on :hover in the next menu
5. The menu will close and :hover will now be in the Style tree
6. Click on :hover
7. The Style tree will close, the form will be blank and the Style tree button will now be labeled :hover
8. Click on the Properties button to add CSS properties to the :hover selector.

To apply CSS properties to a different selector, follow the steps above and choose a different selector than :hover.

To apply CSS properties to a different selector, follow the steps above and choose a different selector than :hover.