CSS Selector Builder
Compose a selector from tag, id, classes, attributes and pseudo-classes, then chain elements together with combinators.
Element
Generated selector
Selector will appear here…How it works
CSS selectors target elements using a combination of the tag name, an id, one or more classes, attribute conditions like [type="text"], and pseudo-classes such as :hover or :nth-child().
Use "Chain another element" to build multi-part selectors, connecting each new element to the previous one with a combinator: a space for any descendant, > for a direct child, + for the next sibling, or ~ for any following sibling.
Examples
Class + pseudo-class
A hovered element with a specific class.
a.nav-link:hover
Direct child
List items that are direct children of a nav's list.
nav > ul > li
Attribute selector
Inputs of a specific type.
[type="email"]
nth-child pattern
Every other table row, for zebra striping.
tr:nth-child(2n)