CSS Basic Selectors Tutorial
Tags: css, beginners, tutorial, webdev
Published: 2022-07-06 18:48:12

Selectors target HTML elements that we want to style with CSS. By associating our declarations with one (or many!) elements in our HTML document.

The 4 basic selectors are `element`, `.class`, `#id` & `*` (universal).

## Element selectors
An element selector will select an HTML element by name.

To begin, let’s say we have a paragraph of text on our HTML page, like so:
![Page Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5amd72gcqy544ix559ca.png)

Using CSS we can select the `p` element, and style it as 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, with a simple CSS rule like so:
![Page Color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzxfn5gw7lvxtunuv4po.png)

Note that this rule will target all `p` tags on our page. So if we have multiple paragraphs they’d all be changed to red.

When we want to style specific elements, we use `classes` & `id`’s.

## Classes & ID’s
Every HTML element can have `class` or `id` attributes applied. We use these attributes to target the element specifically.

And as we’ll see, `classes` and `id`'s are both used in a similar manner, but there’s an important difference between the two:

The same class value is repeatable across many elements.

- An `id` may only be used once.
- So we use `classes` when we need to select an element with 2 or more specific `class` names.

In our CSS, we prefix with the period `.` symbol to denote a `class`, and for `id`’s we use the hash `#` symbol.

Let’s see an example of a class selector:
![Class Id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzm955to0vkorss5yf2k.png)
And an example using an `id`:
![ID Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vi1zhll0gzjl79ugqzk.png)
The end result here is the same, our "New York" text becomes red.

The thing to remember is that id selectors are rigid and don't allow for reuse. A general rule of thumb when considering using an id is to first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

## The Universal Selector
An asterisk `*` symbol will select _all_ elements. The following will set the background color of all elements on the page:
![Background Color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hchjzmk4sy6sp75zlbjb.png)

This could also style all elements inside a `div`, like so:
![Background color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udsb5ofcpd3al3mcsyfe.png)

You’ll often see the use of universal selectors as a trick to clear any default browser margins & padding:
![Default Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s0v6w3633ojncl4lv8o.png)

This isn't considered good practice in production code, as it adds unnecessary weight.

## Connecting Selectors
So we’ve seen how to use a `class` or an `id` to target a given HTML element for styling with CSS.

Let’s take a look at how we can connect multiple selectors, for even more specific styling!

### Targeting a specific element with a class or id
As we've seen, we can select all elements with a specific `class` or `id` name and apply our style rules accordingly.

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`:
![Class City](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwqtafc6vdrfjzfdll8s.png)

Using an `id`:
![ID City](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcn7kwmkkdxx3x77b4ag.png)

### Targeting multiple classes
As we’ve now seen, we can select an element with a specific `class` using `.` followed by the `class` name. But 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:
![Multiple Classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0utyieondpcozrh4dvs8.png)

### Targeting with combined classes and ids
Using the same method, you can select elements by combining a `class` and an `id`.

For example:
![Select Class & ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe2c1hyp2fkq7ket6c5f.png)

### Grouping selectors
We can also combine selectors to apply the same declarations to multiple selectors.

We do this by separating with a comma.

For example:
![Grouping Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a77q3njwun96rmy2z4gp.png)

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

For increased readability in our CSS, we could format our declarations like so:
![CSS Readability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy2ycuq2a5uzgybi3ujc.png)

## Using the Document Hierarchy
We can get even more specific by selecting elements according to how they sit in the [document hierarchy](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure).

It’s quite common to have a `span` tag nested inside of a `p` tag. We could choose to target just the nested `span`, without applying the style to any `span` tags that are not nested in a `p` tag:
![Document Hierarchy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3mur8fv6lefwtoyuklj.png)

Note: the space is necessary between the two elements `p` and `span`!

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

If we wish to ensure that it’s only selected at the first level of nesting. We could use the `>` symbol, like so:
![CSS Selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/807jqhz5tjclysj5wzqb.png)

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.

Only direct children will have the style applied:
![CSS Direct Children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9re8jz0m363c0c18143r.png)

We can also select adjacent siblings, that is an element only if it’s preceded by a specific element.

We do so using the `+` operator:

For example:
![CSS Color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gdbqxx7i1gosh20lgdr.png)

This will assign the color red to all `span` elements that are _immediately_ preceded by a `p` element:
![Span Element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arnwooxmnerehf2s6iiv.png)

We can also use the `~` operator, as a general sibling selector. This selects all preceding elements — not only the first as with `+` :
![CSS Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27iidbqwq6mkdndbly1a.png)

Resulting in:
![CSS Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21mk8beqp1oy7r5lvmlx.png)

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)