CSS Selectors: Type, Class, ID, Universal and Grouping Selectors

A selector tells the browser which elements a rule applies to. This lesson covers the basic selectors you will use every day.

Type selectors#

A type (element) selector matches every element of that type:

p {
  color: darkgreen;
}

<h2>Heading</h2>
<p>First paragraph.</p>
<p>Second paragraph.</p>

Class selectors#

A class selector starts with a dot and matches every element with that class:

.highlight {
  background: #fff3a0;
}

<p>A normal paragraph.</p>
<p class="highlight">A highlighted paragraph.</p>
<p>Some <span class="highlight">highlighted words</span> in a sentence.</p>

Classes are the workhorse of CSS: reusable, and you choose which elements get them.

Elements with several classes#

An element can have several classes; each class rule applies:

.btn {
  padding: 8px 16px;
  border: 1px solid #888;
  border-radius: 6px;
}
.primary {
  background: #2f5fe0;
  color: white;
  border-color: #2f5fe0;
}

<button class="btn">Cancel</button>
<button class="btn primary">Save</button>

Matching several classes at once#

Write class selectors with no space to match elements that have all of them:

.btn.primary { font-weight: bold; }   /* only elements with both classes */

Element and class together#

p.note matches only <p> elements with the class note:

p.note {
  border-left: 4px solid orange;
  padding-left: 8px;
}

<p class="note">A paragraph with the note class.</p>
<div class="note">A div with the note class (not matched).</div>

ID selectors#

An ID selector starts with # and matches the one element with that id:

#site-title {
  font-size: 28px;
  letter-spacing: 1px;
}

<h1 id="site-title">Laviyx Learn</h1>

ID selectors have very high specificity (priority), so they are hard to override with other rules. Most developers style with classes and keep ids for links and JavaScript. You will learn why in Cascade, Specificity and Inheritance.

The universal selector#

* matches every element. Its most common use is setting box-sizing everywhere:

*,
*::before,
*::after {
  box-sizing: border-box;
}

You will see this in almost every modern stylesheet; Width, Height and box-sizing explains it.

Grouping#

A comma-separated list applies the same declarations to every selector in it:

h1, h2, .page-title {
  font-family: Georgia, serif;
}

Summary#

More selectors are covered next: Combinators, Attribute Selectors, Pseudo-classes and Pseudo-elements.

Practice#

<ul>
  <li class="done">Buy milk</li>
  <li id="urgent">Pay electricity bill</li>
  <li>Call grandma</li>
</ul>

li { color: #333; }
.done { color: #999; text-decoration: line-through; }
#urgent { color: red; font-weight: bold; }

<ul>
  <li class="done">Buy milk</li>
  <li id="urgent">Pay electricity bill</li>
  <li>Call grandma</li>
</ul>

Key takeaway#