CSS Selector Cheat Sheet - Complete Reference Guide for CSS Selectors

CSS selectors are fundamental to web development, allowing you to target specific HTML elements for styling. This comprehensive cheat sheet provides a complete reference for all CSS selector types, from basic element selectors to advanced pseudo-classes and combinators. Whether you're a beginner learning CSS or an experienced developer looking for a quick reference, this tool will help you master CSS selectors.

What are CSS Selectors?

CSS selectors are patterns used to select and style HTML elements. They define which elements on a webpage should receive specific styling rules. Understanding selectors is crucial for effective CSS development, as they determine how your styles are applied to your HTML structure.

Types of CSS Selectors

1. Basic Selectors

Basic selectors are the foundation of CSS styling:

Universal Selector (*): Selects all elements on the page
Type Selector: Selects all elements of a specific HTML tag
Class Selector (.class): Selects elements with a specific class attribute
ID Selector (#id): Selects a single element with a specific ID attribute

2. Combinators

Combinators define relationships between elements:

Descendant (A B): Selects B elements inside A elements
Child (A > B): Selects B elements that are direct children of A
Adjacent Sibling (A + B): Selects B elements immediately following A
General Sibling (A ~ B): Selects B elements that are siblings of A

3. Pseudo-classes

Pseudo-classes select elements based on their state or position:

:hover: Selects elements when hovered over
:focus: Selects elements that have focus
:first-child: Selects the first child element
:last-child: Selects the last child element
:nth-child(n): Selects the nth child element

4. Pseudo-elements

Pseudo-elements allow you to style specific parts of elements:

::before: Inserts content before an element
::after: Inserts content after an element
::first-line: Styles the first line of text
::first-letter: Styles the first letter of text

5. Attribute Selectors

Attribute selectors target elements based on their attributes:

[attribute]: Selects elements with the specified attribute
[attribute="value"]: Selects elements with a specific attribute value
[attribute^="value"]: Selects elements where attribute starts with value
[attribute$="value"]: Selects elements where attribute ends with value
[attribute*="value"]: Selects elements where attribute contains value

CSS Specificity

CSS specificity determines which styles are applied when multiple rules target the same element. Understanding specificity is crucial for debugging CSS conflicts and writing maintainable code.

Specificity Hierarchy (from highest to lowest):

Inline styles (1,0,0,0): Styles applied directly to HTML elements
IDs (0,1,0,0): ID selectors have high specificity
Classes, attributes, pseudo-classes (0,0,1,0): Medium specificity
Elements and pseudo-elements (0,0,0,1): Lowest specificity

Best Practices for CSS Selectors

Use classes over IDs: Classes are reusable and have lower specificity
Keep specificity low: Lower specificity makes CSS more maintainable
Avoid !important: Use it sparingly and only when absolutely necessary
Use semantic selectors: Choose selectors that reflect the content's meaning
Be specific but not overly specific: Target elements precisely without creating overly complex selectors

Common Use Cases

Here are some practical examples of when to use different selector types:

Styling navigation menus: Use descendant selectors like nav ul li
Form styling: Use attribute selectors like input[type="text"]
Interactive elements: Use pseudo-classes like button:hover
Layout components: Use class selectors like .container
Typography effects: Use pseudo-elements like p::first-letter

Frequently Asked Questions

What's the difference between classes and IDs in CSS?

Classes (.class) can be used on multiple elements and are reusable, while IDs (#id) should be unique to a single element on a page. Classes have lower specificity (0,0,1,0) compared to IDs (0,1,0,0), making them better for styling as they're easier to override when needed.

How do I select every other element in a list?

Use the :nth-child() pseudo-class. For example, li:nth-child(even) selects every even-numbered list item, while li:nth-child(odd) selects odd-numbered items. You can also use formulas like li:nth-child(2n+1) for more complex patterns.

What's the difference between > and space in CSS selectors?

The child combinator (>) selects only direct children, while the descendant combinator (space) selects all descendants at any level. For example, div > p selects paragraphs that are direct children of divs, while div p selects all paragraphs inside divs, regardless of nesting level.

How can I select elements that don't have a specific class?

Use the :not() pseudo-class. For example, div:not(.special) selects all div elements that don't have the "special" class. You can also combine it with other selectors: input:not([type="submit"]) selects all input elements except submit buttons.

What are pseudo-elements and how are they different from pseudo-classes?

Pseudo-elements (::before, ::after) create virtual elements that don't exist in your HTML, allowing you to insert content or style specific parts of elements. Pseudo-classes (:hover, :focus) select existing elements based on their state or position. Pseudo-elements use double colons (::) while pseudo-classes use single colons (:).

How do I calculate CSS specificity?

CSS specificity is calculated using four categories: inline styles (1000), IDs (100), classes/attributes/pseudo-classes (10), and elements/pseudo-elements (1). Count each type in your selector and add them up. For example, #header .nav li:hover has specificity 111 (1 ID + 1 class + 1 element + 1 pseudo-class).