Version:

    Pseudo elements and classes

    There are selectors called pseudo classes and pseudo elements.

    • Pseudo classes allow you to style a specific state of an element. For example, the :hover pseudo class allows you to style the hover state of an element.
    • Pseudo elements allow you to style a specific part of an element. For example, the :before pseudo element allows you to add content before an element and style it. A common use for this is to add an icon before a link. 

    There are many types of pseudo class and pseudo element. Site Studio provides a menu for quickly adding pseudo classes and elements to your style. It also provides an option to add a custom pseudo selector which you can enter into a text field.

    Using the selector menu

    To add a selector from the selector menu:

    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
    5. The menu that opens is called the Selector menu
    6. Click on one of the pseudo selectors:
      1. :hover - Style the elements hover state
      2. :active - Style the elements active state
      3. :focus - Style the element when it's in focus
      4. :before - Add content before the element
      5. :after - Add content after the element
      6. :first-child - Style the first child of an element
      7. :last-child - Style the last child of an element
      8. :nth-child - Style a specific child or children of an element
    7. The menu will close and the chosen Pseudo selector will be added to the Style tree
    8. Click on the Pseudo selector in the Style tree to return to the form and begin adding CSS properties to it.

    Adding custom pseudo selectors

    There are many CSS selectors you can use. The Selector menu only lists the most common selectors. To use other selectors, you can manually add them to the Selector menu. 

     To add a Custom pseudo 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
    5. The menu that opens is called the Selector menu
    6. Click on Custom pseudo
    7. A third level to the menu will open
    8. Enter the selector in the Custom pseudo field. This must start with a colon :
    9. Click Add
    10. The menu will close and the Custom pseudo selector will be added to the Style tree
    11. Click on it to return to the form and begin adding CSS properties to it.
    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.