Version:

    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.

    DX8 knowledge base icon

    Frequently asked questions

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.