CSS Selectors

The Basics: Element, ID, and Class

Element Selector

Select all instances of a given element

<div>
  <p>You say yes</p>
  <p>I say no</p>
</div>

<div>
  <p>You say goodbye</p>
  <p>I say hello </p>
</div>

div{
  background: purple;
}

p {
  color: yellow;
}

ID Selector

Selects an element with a given ID.  Only one per page!

<div>
  <p>You say yes</p>
  <p>I say no</p>
</div>

<div>
  <p>You say goodbye</p>
  <p id="special">I say hello </p>
</div>

div{
  background: purple;
}

#special {
  color: yellow;
}

Class Selector

Selects all elements with a given class

<div>
  <p class="highlight">You say yes</p>
  <p>I say no</p>
</div>

<div>
  <p class="highlight">You say goodbye</p>
  <p>I say hello </p>
</div>

div{
  background: purple;
}

.highlight {
  background: yellow;
}