Basic selectors

Selectors are the way that we choose what we are styling, and there are a lot of ways to select things in CSS.

The common selectors

The most common selectors are:

• Element
• Class
• ID

Element selectors

Element selectors are the most general of all selectors, which has it’s plusses and minuses, both of which we’ll be talking about as we go through this course.

For now, the main thing to worry about is how to write one, which is the write the HTML element you are trying to select, but without the < and >.

So, if you wanted to select a <p>, you would use the p selector. A <header> or <main>, or <footer> would be header, main, and footer, respectively.

Let’s use some of these!

We need to style a few things in our page, like the color of our headings and links.

Classes

We can add classes to elements by using a class attribute, followed by a string of text.

<header class="page-header"> ... </header>

<main>
  <!-- other content-->

  <article>
    <header class="article-header"> ... </header>
    <!-- other content-->
     <footer class="article-footer"> ... </footer>
  </article>
</main>

<footer class="page-footer"> ... </footer>

To select an element with a class on it, we use a . to replace class=, so we would write .page-header and .article-title for those two elements above.

.page-header { ... }

.article-header { ... }

One reason classes are popular is that we can reuse them on different elements. A common example would be for a button component, where we might want different elements to look the same:

<a class="button" href="/another-page">Learn more</a>
<button class="button">Log in</button>

.button {
  /* selects both the link and button above */
  background: #c04d06;
  color: #efefef;
}

They’re also useful when you have a change you want to make to some elements, instead of every element. For example, you might want to change the size or color on only some of your paragraphs, or create a list that is different from other lists.

Where could we use a class in our project?

There is at least one very good use case for a class in our project, can you spot it?

ID selectors

We can add IDs to elements by using an ID attribute, followed by a string of text.

<main id="main-content">
  <!-- lots of content -->
</main>

To select an element with a class on it, we use a # to replace id=, so we would write #main-content for the element above.

#main-content {
  /* some nice styles */
}

Unlike classes, we can only have one element on a given page that uses that ID.

That is one of the reasons you don’t see them used for styling very often, along with the higher specificity (which we’ll talk about in the next lesson).

Anchor links

One of the use cases for IDs is creating anchor links, which are when we link to specific parts in a page.

For example, you can click the links in the On this page section. Those are using anchor links, which have an href with the elements ID, like this:

<ul>
  <li>
    <a href="#element-selectors">Element selectors</a>
  </li>
  <li>
    <a href="#classes">Classes</a>
  </li>
  <li>
    <a href="#id-selectors">ID selectors</a>
  </li>
</ul>

The universal selector

There is a selector that we can use to select every single element, and it is a *.

* {
  margin: 0;
}

There are a few use cases for it, but other than the few we’ll see in this course (like the one above), I’d suggest avoiding declaring things on the * selector.