---
title: "Using child selectors"
date: "2017-11-12T07:12:22+00:00"
summary: "Learn to effectively use child selectors in Site Studio to target and style specific elements within containers. Enhance your layout custom styles and create more precise, hierarchical CSS for your Drupal site."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-child-selectors"
id: "b6c2cc2c-7ecf-440a-bac0-564b5bc8c492"
---

Use child selectors to target and style children of an element. For example, when creating an Unordered list style you will add a child **li** to style the list items

Important

Create Layout custom styles and use child selectors to target and style elements within containers. For example, apply a child **p** to a Layout custom style to target all paragraphs within a container.

Adding a child selector to the style tree
-----------------------------------------

To add a child 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"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Default** button
3.  Within the Style tree, click on the **\+ icon** on the selector you want to add a child to
4.  In the menu, click on **Child selector**
5.  Enter an Element or .class in the **Child selector** field
6.  Click **Add**
7.  The Selector menu will close and the Child selector will be in the Style tree.

![30cc6bdd-creating-child-selector.gif](https://acquia.widen.net/content/5zzzspzwd0/web/30cc6bdd-creating-child-selector.gif?animate=true&v=af127c6f-0a02-4f27-9956-ad9554a1e767)

Important

By default, child selectors are added as Descendant selectors. This means that all children that match your child element will be styled. You can change the type of child selector by applying a Combinator to it. For more, see [Using combinators.](/drupal-starter-kits/add-ons/site-studio/using-combinators "Using combinators")