CSSSelectors1 min read

Mastery of CSS Selectors

A selector tells the browser which elements a style is for. Learn every common kind, from p and .class to :has() and :not(), by typing them and watching what they pick.

Try it
<div class="card">
<h2 class="title">Weekend trip</h2>
<p>Pack light.</p>
<p class="note">Bring a jacket.</p>
<ul>
<li>Tent</li>
<li class="done">Map</li>
<li>Snacks</li>
</ul>
<button id="go">Let's go</button>
</div>

No elements match.

Start the course38 short steps in your browser

What you will learn

  1. 01

    The basics

    • Universal selector
    • Type selectors
    • Class selectors
    • ID selectors
    • Multiple selectors
    • Practice: 5 exercises
  2. 02

    Relationships

    • Descendant selectors
    • Child selectors
    • Adjacent sibling selectors
    • General sibling selectors
  3. 03

    Attributes

    • Attribute selectors: has, equals, starts with, ends with, contains, contains a word
    • Practice: 5 exercises
  4. 04

    Position and logic

    • :first-child and :last-child
    • :nth-child(): a number, odd and even
    • :has()
    • :not()

Preview

Frequently asked questions

Who is this course for?

Anyone who writes or reads CSS: front-end and back-end developers, QA engineers and designers. The same selectors are also used in test automation, web scraping and in JavaScript with querySelector.

Do I need any prior knowledge?

No. It starts from the simplest selector, and experienced developers can move quickly through the first steps.

How long does it take?

The course is a series of short steps you go through at your own pace. Most people finish it in 30 minutes to an hour.

How does it work?

Each step shows a small piece of HTML and a task. You type a selector, the elements it picks light up right away, and you move on when it matches the goal. You learn by trying, not by memorizing.

Start the course

Join our Supporters