---
title: "Using CSS selectors"
date: "2017-11-12T06:55:02+00:00"
summary: "Learn how to effectively use CSS selectors to target specific elements, states, and parts of your web page. Discover techniques for styling hover effects, adding content, and customizing child elements to enhance your site's interactivity and design."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-css-selectors"
id: "1ca1e6d4-83d3-4392-b44d-cf7c46a509ff"
---

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](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating 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.

![b426c72d-applying-css-hover.gif](https://acquia.widen.net/content/772396a3-88c9-4040-b23f-986da1ebf28e/web/b426c72d-applying-css-hover.gif?animate=true)

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