DEV Community

Cover image for CSS Basic Selectors Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Basic Selectors Tutorial

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

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

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
And an example using an id:
ID Selector
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

This could also style all elements inside a div, like so:
Background color

You’ll often see the use of universal selectors as a trick to clear any default browser margins & padding:
Default Browser

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

Using an id:
ID City

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

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

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

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

Using the Document Hierarchy

We can get even more specific by selecting elements according to how they sit in the document hierarchy.

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

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

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

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

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

We can also use the ~ operator, as a general sibling selector. This selects all preceding elements — not only the first as with + :
CSS Operator

Resulting in:
CSS Results

If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

🌎 Let's Connect

Discussion (0)