Selectors — class and id · ⁨Selectors — class และ id⁩

Three kinds of selector

• A selector says which elements a rule changes.
• By tag: p { ... } changes every <p>.
• That is the kind you used last lesson.

By class and by id

• By class: .note { ... } changes every element with class="note". A dot . means class.
• By id: #title { ... } changes the one element with id="title". A hash # means id.
• A class can be on many elements; an id should be on one.

<style>
  .note { color: green; }
  #title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>

Common mistakes

• A class selector starts with ., an id selector with #.
• Reuse a class on many elements; an id appears once per page.

Now you try

• Match the dot . to a class, and the hash # to an id.
• Style a class, then style an id.