Child selectors is a unique feature introduced in the 2.3.0 version that allows you to style any child css selector of an element and even for custom css classes.
Child selectors can be added from both the styling tab for each element or global CSS classes options found in page settings. We will be focusing on adding a child selector from the styling tab. In order to add a child selector, you will need to edit the element, go to styling tab and press the “Add child selector icon”
When adding a child selector, you will need to fill out two text:
- Selector nice name – This is just a name that will help you easily find the affected elements
- CSS selector – This is the CSS selector that will be styled. In the CSS selector you can enter a CSS class( .myClass ), an element id ( #myId ) and even use CSS helpers like “+ .myClass” or “~ .myClass”. More about CSS helpers can be read at https://www.w3schools.com/cssref/css_selectors.asp
After adding your selector, you will have the ability to choose the state of the parent selector in relation to your child selector. For example, you can style a child element only when you hover on a parent element. This is a powerful feature that will give you the freedom to style and animate anything based on a parent. You can even group two parent element states like “:hover” and “:active”.
A final feature of the child selector is that you can nest unlimited number of childs by simply adding a new child to your existing child selectors.
