CSS Selectors List

What Are CSS Selectors?

A CSS selector tells the browser which HTML element or group of elements should receive a style rule. Selectors can target elements by tag name, class, ID, attribute, state, position, relationship, or generated parts.

selector {
  property: value;
}

.card {
  padding: 1rem;
  border: 1px solid #dee2e6;
}

CSS Selectors List in Table Format

Most Used CSS Selectors for Beginners

Beginners should first master the selectors used in almost every project.

• element selectors like p, h1, and button.
• .class selectors for reusable component styling.
• #id selectors for unique anchors or special cases.
• Descendant selectors like .article p.
• Child selectors like .nav > li.
• Pseudo-classes like :hover, :focus, and :disabled.
• Attribute selectors like [type="email"].

CSS Selectors and Specificity

Different selectors have different specificity weights. Higher specificity can override lower specificity when rules target the same property.

CSS Selector Examples

/* Select all paragraphs */
p {
  line-height: 1.6;
}

/* Select elements with class */
.card {
  padding: 1rem;
}

/* Select direct child links */
.nav > a {
  text-decoration: none;
}

/* Select focused inputs */
input:focus {
  outline: 3px solid #0d6efd;
}

/* Select cards that contain images */
.card:has(img) {
  display: grid;
}

/* Add decorative icon */
.external-link::after {
  content: " ↗";
}

CSS Selectors and Accessibility

• Use :focus and :focus-visible for keyboard-friendly focus styles.
• Do not remove outlines without accessible replacements.
• Use :disabled, :invalid, and :required to style form states clearly.
• Do not rely only on :hover because touch users may not experience hover.
• Use pseudo-elements only for decorative content, not essential text.
• Keep selectors simple so accessibility states are easy to maintain.

CSS Selectors and SEO

CSS selectors do not directly create rankings, but clean selector architecture improves maintainability, accessibility, responsive design, page quality, and long-term site health.

• Simple selectors reduce style conflicts.
• Accessible states improve usability.
• Maintainable CSS supports content updates.
• Reliable styling prevents broken layouts.
• Semantic HTML plus clean selectors improves page clarity.

Common CSS Selector Mistakes

• Using overly complex descendant selectors.
• Using IDs for styling when classes are easier to reuse.
• Relying only on :hover for important interactions.
• Using pseudo-elements for meaningful content instead of decoration.
• Creating selectors with high specificity that are hard to override.
• Using universal selectors carelessly in large pages.
• Confusing pseudo-classes with pseudo-elements.

CSS Selector Best Practices

• Prefer class selectors for component styling.
• Keep selectors short and readable.
• Avoid deeply nested selectors.
• Use IDs mostly for anchors, labels, and JavaScript hooks, not reusable styling.
• Use :where() for low-specificity base styles.
• Use :focus-visible for accessible keyboard focus indicators.
• Use attribute selectors for form states and data attributes when useful.
• Use pseudo-elements for decorative UI only.
• Check specificity before adding !important.

Key Takeaways

• CSS selectors target HTML elements for styling.
• Common selectors include element, class, ID, attribute, combinator, pseudo-class, and pseudo-element selectors.
• Class selectors are usually best for reusable component styling.
• Pseudo-classes style states like hover, focus, checked, disabled, valid, and invalid.
• Pseudo-elements style generated or partial content like before, after, marker, and selection.
• Simple, low-specificity selectors are easier to maintain.