CSS: Basic Selectors

We left off with the questions:

• What if we want certain div elements to have a different background colour or border?
• What if we only want one of our p elements to have a font size of 12px?

The answer to those two questions is selectors. A selector is basically how we determine which element the styles will be applied.

1. Universal

[*]: Selects all elements.

* {
  color: red;
}

2. Element

[selector]: Selects all elements that matches the name.

div {
  background-color: red;
}

h1 {
  color: blue;
}

3. Id

[#id]: Selects the element whose id matches the selector. The selector starts with a pound symbol (#) followed by the element's id.

<h1 id="special-heading">Heading 1</h1>

#special-heading {
  color: red;
}

4. Class

[.class]: Selects all elements whose class attribute matches the selector. The element can have more than one class. The selector starts with a period (.) followed by one of the element's classes.

<h1 class="red bold">Red and Bold</h1>
<h1 class="blue bold">Blue and Bold</h1>
<h1 class="bold">Bold</h1>
<h1 class="blue">Blue</h1>

.red {
  color: red;
}

.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

5. Attribute

[[attr=value]]: Selects the elements whose attribute-value pair matches the selector.

<input type="email" name="email" />
<input type="submit" />

[name="email"] {
  background: blue;
}

[type="submit"] {
  background: red;
}

---

6. Descendant

[selector selector]: The descendant selector is used when you want apply styling to descendants of an element.

<div class="container">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>
<div class="container-2">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>

.container h2 {
  color: blue;
}

.container p {
  color: red;
}

div .container-footer p {
  font-size: 8px;
}

Demo

7. Direct Descendant

[selector > selector]: The direct descendant selector is similar to the regular descendant except styling is only applied to direct descendants.

<section>
  <p>Paragraph</p>
  <div>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div>
      <p>Paragraph 4</p>
    </div>
  </div>
</section>

section > p {
  color: blue; 
}

section > div > p {
  color: red;
}

Demo

8. Sibling

[selector ~ selector]: Sibling selectors applies the styling to sibling elements that matches the selector following the previous selector.

<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>

p ~ .red {
  color: red;
}

h1 ~ .red ~ p {
  color: pink;
}

Demo

9. Adjacent Sibling

[selector + selector]: Direct Sibling selectors are similar to the sibling selector but it only applies the style to the next sibling element if it matches the selector.

<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>

h1 + .red {
  color: red;
}

h1 + .red + span {
  color: pink;
}

Demo

---

10. Multiple Selectors

[selector, selector]: Combine selectors.

#special-heading,
.red,
h1 ~ div > p,
ul > li > p + span {
  color: red;
}

---

Now that we know more about the basic selectors, we'll talk about the box model in the next post.

Comments

[Desiré 👩‍🎓👩‍🏫]

Loving it, so well explained. Thanks, Karl!

[Jose Luis Ramos T.]

Siguiendote a hora. Muy útil. gracias.