What is a CSS Selector?

A CSS selector is a pattern used to select and style HTML elements. Selectors are the foundation of CSS and allow you to target specific elements on your page to apply styles. From simple element selectors to complex attribute and pseudo-class combinations, CSS selectors provide powerful ways to style your web pages precisely.

How to Use This Reference

Browse through the different selector categories above to explore syntax, examples, and browser support for each type of selector. Use the specificity calculator to understand how specific your selectors are — this is crucial for debugging CSS issues and understanding the cascade. Each selector includes a practical example showing how it works with real HTML and CSS code. Reference this tool while developing to master CSS selector patterns.

Understanding Specificity

Specificity determines which CSS rule takes precedence when multiple rules apply to the same element. It's calculated as a three-digit score (a,b,c) where: a = number of ID selectors, b = number of class selectors and pseudo-classes, c = number of element selectors. A selector with higher specificity will always override one with lower specificity, regardless of order. Mastering specificity is key to avoiding CSS conflicts.

Frequently Asked Questions

What's the difference between a class and ID selector?

Class selectors (.class) have a specificity of 0,1,0 and can be used multiple times on a page, making them reusable and flexible. ID selectors (#id) have a specificity of 1,0,0 and should only be used once per page per unique ID value. IDs have much higher specificity, so use classes for styling and reserve IDs for unique page elements or JavaScript targeting.

How do pseudo-classes differ from pseudo-elements?

Pseudo-classes (starting with 🙂 target specific states or positions of elements, like :hover for mouse hover or :nth-child(2n) for every second child. Pseudo-elements (starting with ::) create virtual elements that don't exist in the HTML, like ::before and ::after for adding content before and after an element. Pseudo-classes have specificity 0,1,0 while pseudo-elements have 0,0,1.

What does the > combinator do differently than a space?

A space combinator selects all descendants of an element at any depth, no matter how nested. The > child combinator selects only direct children of the parent. For example, div p selects all p elements anywhere inside div, while div > p selects only p elements that are immediate children of div.

Can I combine multiple selectors in one rule?

Yes! Use a comma to apply the same styles to multiple selectors, like h1, h2, h3 { color: blue; }. You can also chain selectors to create more specific rules, like div.container > p.highlight:hover, which combines element, class, child combinator, and pseudo-class selectors into a powerful targeting pattern.

Why doesn't my selector work in older browsers?

Newer selectors like :nth-child, :not, and attribute selectors aren't supported in Internet Explorer 8 and below. Each selector in this reference includes browser support information. For maximum compatibility, stick to basic selectors (element, class, ID) and simple combinators (>, +). Always check browser support for advanced selectors if supporting legacy browsers.

How do I select elements by attribute value?

Attribute selectors like [attr=value] select elements with specific attributes. For partial matches, use [attr^=value] for starts-with, [attr$=value] for ends-with, and [attr*=value] for contains-anywhere. These are very useful for styling form elements by type or selecting links based on href patterns.