CSS Fundamentals: Selectors

In this article, we’re going to learn the fundamentals of CSS Selectors. We use selectors to select the content we want to style with our CSS. By associating one (or many) CSS declarations to one (or many) elements on the page.

This article marks the beginning of a series I’m writing about CSS Fundamentals. Be sure tofollow me to keep up with my posts.

A simple selector

To begin, let’s say we have a paragraph of text on our page. In HTML it would be as follows:

<p>My paragraph</p>

Using CSS we can select this p element, and style it however we like. Let’s say we want to give the text a red color.

We’d do this by targeting the element using the p selector, a simple CSS rule to achieve this would be:

p {
  color: red;
}

Note that the above rule will target all p tags on our page. So if we have multiple paragraphs they’d all change to red.

We can select specific paragraphs using classes & id’s, which we’ll look at next.

Classes & Id’s

Every HTML element has two attributes which we commonly use when associating our styling to a specific element, they are class and id .

And as we’ll see, they are both used in a similar manner, however, there’s a fundamental difference between the two:

class
id

So we use classes when we need to select an element with 2 or more specific class names.

In our CSS, we use the . symbol to denote a class , and for id ’s we use the # symbol.

Let’s see an example using a class selector:

<p class="city">
  London
</p>.city {
  color: red;
}

And an example using an id :

<p id="city">
  London
</p>#city {
  color: red;
}

Combining multiple selectors

We’ve seen how to use a class or an id to target an HTML element, so we can style them using CSS.

Let’s now take a look at some more powerful selectors.

Targeting a specific element that has a class or id

In our previous example, we first selected all elements that had the city class and then all elements that had the city id .

You can in fact, target a specific element that has a given class or id , for this we use the element followed by . or # (to denote class or id ), followed by the class or id name.

Using a class :

<p class="city">
  London
</p>p.city {
  color: red;
}

Using an id :

<p id="city">
  London
</p>p#city {
  color: red;
}

The reason we could choose to do it this way relates to specificity. Which we will take a look at in a future article. For now, it’s good to know that elements can also be selected in this manner.

Targeting multiple classes

As we’ve now seen, you can select an element with a specific class using . followed by the class name. However, it’s often the case that an element will have 2 (or more) classes. We select such elements, by combining the class names separated with a dot, without spaces.

For example:

<p class="city london">
  London
</p>.city.london {
  color: red;
}

Combining classes and ids

Using the same method, you can select by combining a class and an id .

For example:

<p class="city" id="london">
  London
</p>.city#london {
  color: red;
}

Grouping selectors together

We can also combine selectors to apply the same declarations to multiple selectors. We do this by separating them using a comma.

For example:

<p>
  The city I live in is:
</p><span class="city">
  London
</span>p, .city {
  color: red;
}

So here we’re grouping both p and span elements together.

For increased readability in our CSS, we could optionally format our declarations like so:

p,
.city {
  color: red;
}

Using the document hierarchy

We can create even more specific selections, by combining multiple items in accordance with the document hierarchy .

Say, for example, we have a span tag nested inside of a p tag. We can choose to target only the nested span , without applying the style to the span that is not nested in a p tag:

<span>
  Greetings!
</span>
<p>
  The city I live in is:
  <span class="city">
    London
  </span>
</p>p span {
  color: red;
}

Note the space between the two elements p and span .

This selection will work regardless of how deeply our span is nested. As it’s simply selecting any span with a parent p element.

If we wish to ensure that it’s only selecting at the first level of nesting. We could use the > symbol, like so:

p > span {
  color: red;
}

So in this case, if a span is not the first child of the p element, it’s not going to have the styling applied.

And only direct children will have the style applied:

<p>
  <span>
    This is red
  </span>
  <strong>
    <span>
      This is not red
    </span>
  </strong>
</p>

We can also select adjacent siblings, which is an element only if it’s preceded by a specific element. We do so using the + operator:

For example:

p + span {
  color: red;
}

This will assign the color red to all span elements that are preceded by a p element:

<p>My paragraph</p>
<span>My red span</span>

In future articles, we’ll be looking at more advanced selectors such as attribute selectors, pseudo-class selectors & pseudo-element selectors. So stay tuned.

Conclusion

And there we go. We’ve learned all about the basic CSS selectors. Including how we select elements to style using classes & id’s, how to combine multiple selectors and how to use the document hierarchy to style elements based on their position within the document.

In the next one, we’ll be learning all about the cascade in CSS. Hope to see you there.

I hope you found this article useful. You canfollow me on Medium. I’m also on Twitter . Feel free to leave any questions in the comments below. I’ll be glad to help out.