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.

     

    Apply-hover-selector.gif

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

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket