InfoparkDailyCAREER TOOLS

CSS · Lesson 2 of 7

Selectors

Element, class, id, descendant and pseudo-class selectors.

  • p — every <p>.
  • .card — elements with class="card" (reusable).
  • #top — the element with id="top" (unique).
  • nav a — links inside nav (descendant).
  • a:hover, input:focus, li:first-child — pseudo-classes for state and position.
  • h1, h2 — group selectors with a comma.

Prefer classes for styling. They are reusable and keep specificity low.

Try it yourself

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

  • . for class, # for id.
  • Space = descendant.
  • Pseudo-classes target states like :hover.

Quick check

Which selector targets elements with class="btn"?

Practice task

Style every second list item differently using :nth-child(2n), and make links change colour on hover and focus.

Interview corner

How is specificity calculated?

Roughly: inline styles > ids > classes/attributes/pseudo-classes > elements. More specific selectors win regardless of order.

Why avoid styling with ids?

Ids have high specificity, making styles hard to override and not reusable.

Further reading

Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.

Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.