Style Selectors
Webflow's Style Selectors panel displays a complete list of classes, combo classes, and tags you've created or edited in your site. It's a quick way to rename or even clean up any styles you aren’t using anymore with a single click. You'll find the Style Selectors in the right panel. Just click the tab or press G to open it.
Video transcript
Style Selectors in Webflow give you control over how elements look in different states and contexts — hover, focus, active, visited, placeholder, and more. They're accessed through the selector field at the top of the Style panel.
When you select an element and click the selector field, you'll see options for adding a state. For example, selecting hover on a button lets you define styles that only apply when the user's cursor is over that button. Webflow generates the correct CSS pseudo-class (:hover, :focus, etc.) automatically based on the state you select.
Style Selectors also let you target child elements within a class using combo selectors. For example, you might have a card class and want to style the heading inside the card differently when the card itself is hovered. Webflow's selector system supports this kind of nested targeting.
Understanding and using Style Selectors well is what separates a static design from one that feels interactive and responsive to the user. Hover states on links and buttons, focus states on form fields, and placeholder styles for inputs are all set through this system.
