Exit to Dashboard
75% complete

Selectors and Specificity

15 minutes

CSS Selectors and Specificity

Types of Selectors

Element Selectors


css
p { color: blue; }

Class Selectors


css
.highlight { background: yellow; }

ID Selectors


css
#header { font-size: 24px; }

Specificity Rules

CSS specificity determines which styles apply when there are conflicts:

  • Inline styles (highest)

  • IDs

  • Classes, attributes, pseudo-classes

  • Elements, pseudo-elements (lowest)
  • Best Practices

  • Prefer classes over IDs for styling

  • Avoid inline styles

  • Keep specificity low for maintainability
  • Next Lesson