¶ CSS Selectors in Silex
The Selector Manager in Silex allows you to efficiently manage and apply complex CSS selectors within your project. It enhances the style management capabilities of the editor, making it easier to work with classes, IDs, tag names, and advanced CSS relationships like pseudo-classes and attribute selectors.
Technicly, this is a grapesjs plugin, pre-installed in silex, here is the source code of this plugin
¶ Accessing the Selector Manager
To open the Advanced Selector Manager, select any element in your project and navigate to the Styles panel. You will find an enhanced interface that provides better control over CSS selectors.
¶ Key Features
¶ 1. View All Applied Selectors
- When selecting an element, the Advanced Selector Manager lists all the CSS selectors that affect it.
- This includes direct styles, inherited styles, and styles applied via media queries.
¶ 2. Modify Selectors Efficiently
- Rename a class: Change the name of a CSS class applied to elements throughout the design.
- Add or remove selectors: Apply multiple selectors to a single element.
- Edit tag names: Convert an element from one tag type (
<div>,<section>,<article>, etc.) to another. - Manage attribute selectors: Add
[data-*]and other custom attributes for styling.
¶ 3. Work with Nested and Pseudo-Selectors
- Apply styles to elements based on their position in the hierarchy (e.g.,
div > .button). - Use pseudo-classes (
:hover,:focus,:nth-child(n)) to style interactions. - Define negation and combination rules (
:not(),:has(), etc.).
¶ 4. Apply Breakpoint-Specific Styles
- The plugin supports media queries (
@mediarules) to define styles at different screen sizes. - Easily see which styles are active at different breakpoints.
- Modify responsive styles directly from the selector interface.
¶ Getting started with the Selector Manager
¶ 1. Select an Element
Click on an element in the canvas to open the Advanced Selector Manager.
¶ 2. Add or Modify Selectors
- Click on the Selector Field to edit an existing selector or add a new one.
- Start typing a class name to select an existing class or create a new one.
- Use the dropdown menu to switch between ID selectors, tag selectors, and attribute selectors.
¶ 3. Organize and Rename Selectors
- Click the rename button (✏️) next to a class or ID to change its name across all elements.
- Drag and drop selectors to reorder priority if necessary.
¶ 4. Manage Pseudo-Classes and Advanced Selectors
- Click the “+” button to add pseudo-classes like
:hover,:focus, and:first-child. - Use the Advanced Mode to create nested selectors (
parent > childrelationships).
¶ 5. Adjust Styles at Different Breakpoints
- Switch between mobile, tablet, and desktop views to modify selectors at specific breakpoints.
- Use the Breakpoint Selector to see which styles are active at different screen sizes.
¶ Use the selector manager
¶ 1. Main Selector (tags row at the top)
This row shows the parts of the selector that directly identify the element.
-
Tag name (e.g.
div,button)- You can add or remove it from the selector.
- This does not change the real HTML tag of the element, only whether the selector uses it.
-
ID (e.g.
#main-button-2-2)- The element still has its ID in the DOM.
- You can choose to include or exclude it in the selector.
-
Class (e.g.
.btn,.primary)- Adding/removing a class here also adds/removes it from the actual element in your page.
- Renaming a class updates it everywhere in the project.
¶ 2. Pseudo-Class selector
This control lets you style the element in a particular state, e.g.
➡ Changing or removing the pseudo-class here does not change the CSS. It only tells the editor which variant of the selector you are currently styling.
¶ 3. Related Selector and Operators
You can extend the selector with:
- Combinators (
>,+,~, space) - Another selector (classes, IDs, tags, etc.)
- Functional pseudo-classes that act like operators:
:not():has():is():where()
➡ Adding/removing parts here never changes your DOM or CSS classes.
It only lets you target different situations (e.g. .parent > .child, .btn:not(.disabled)).
¶ Current Selector drop down
The Current Selector Display is the control panel at the bottom of the Selector Manager.
It shows which CSS selector you are currently editing and gives you a list of all the existing selectors for the current selection.
- Use the dropdown to switch between all selectors applied to the current element
- Example: selecting a button might show
.btn.btn.primarybutton:hover
- Choose one to edit its styles directly
¶ Toolbar Actions
| Icon | Action | Description |
|---|---|---|
| ✏️ | Edit Selector | Opens an input where you can directly rename or refine the selector (.item → .item.active, etc.) |
| 📋 | Copy Styles | Copies all CSS properties defined in this selector to the clipboard |
| 📥 | Paste Styles | Applies the last copied styles to the current selector |
| 🧹 | Clear Styles | Removes all styles from the selector but keeps the selector itself |
| ❓ | Help | Opens documentation about the selector manager |
¶ Best Practices
✔ Use classes instead of IDs for styling whenever possible to keep your design flexible.
✔ Use :not() and :has() carefully to avoid performance issues with complex selectors.
¶ Troubleshooting
¶ “My styles are not applying”
- Ensure that another selector isn’t overriding your styles (check the selector priority in the Style Manager).
- Check if the style is applied inside a media query that isn't currently active.
¶ “I renamed a class, but some elements still use the old one”
- Some elements might have inline styles or protected classes. Check if they are editable.
¶ “A pseudo-class (:hover, :focus) isn't working”
- Some pseudo-classes may not be visible in the editor. Try previewing your page to test interactions.
¶ Conclusion
The Advanced Selector Manager provides a powerful way to control styles in Silex. Whether you are refining styles, managing breakpoints, or creating complex CSS rules, this tool helps you keep everything organized and efficient.
Ready to enhance your workflow? Start experimenting with selectors now!
This page is focused on usability rather than installation, ensuring that users can easily apply the Advanced Selector Manager in their projects. Let me know if you want any refinements! 🚀