Introduction to CSS Selectors

Published in

Level Up Coding

4 min readFeb 2, 2020

Selectors are one of the core features of CSS and one of the first things to learn for beginners. We work with selectors a lot and also write many combinations to apply our CSS rules as the project code gets bigger.

As an introduction to selectors, in this article, I will share and explain the 5 main CSS Selectors that we use in programming.

What is a Selector?

Selectors are being used to target one or more HTML elements to apply our CSS rules. There are different kinds of selectors that we use in CSS and here are the 5 main selectors:

Element selector
Id selector
Class selector
Attribute selector
Universal selector

You can also watch the video version below:

Note: CSS files must be imported first to HTML so the selectors & rules can be applied to elements. You can find the 3 ways of adding CSS to HTML here.

Suppose that we have 4 elements in our HTML page as 2 <h1> and 2 <p> tags:

<body>
  <h1> Headline 1 </h1>
  <h1> Headline 2 </h1>  <p> Paragraph 1 </p>
  <p> Paragraph 2 </p>
</body>

Now let’s see how the selectors above affect our code one by one.

Element Selector:

The element selector targets HTML elements based on their tag name.

For example, to target the <p> tags only, we can use an element selector. Simply, I just need to write the element name and define the rules:

p {
  color: red;
  font-size: 20px;
}

The element selector above selects all the <p> tags in our page and applies the rules of color & font-size.

Other elements won’t be affected, however, if I want to target the <h1> tags too, this time I need to add h1 as selector name as well:

h1 {
  color: blue;
  font-size: 30px;
}

Id Selector:

The next selector type is the id selector. It basically selects an element with a specified id. To give an id to an HTML element we need to use the id attribute and then give a name, or a number.

<h1 id="first-headline"> Headline 1 </h1>

For selecting elements with an id, we write the name of the id and put a hash in front of it:

#first-headline {
  color: purple;
  font-size: 30px;
}

The hash with a name means that it is an id selector and without the hash, we can’t target elements with id’s.

Class Selector:

There is another selector type and is maybe the most used one in daily programming, which is the class selector. A class selector targets one or multiple elements at once with a specifically given class attribute and regardless of their tag names.

<h1 class="my-first-class"> Headline 1 </h1>

We define a class selector like we define an id, but we must put a period character instead of a hash:

.my-first-class {
  color: green;
}

We can also add multiple classes to an element:

<h1 class="my-first-class small-font italic"> Headline 1 </h1>

Attribute Selector

Another type of selector in CSS is the attribute selector. The attribute selector targets elements with a specified attribute and a value. This type of selector can be useful in input fields, for example.

<body>
  <input type="text" />
  <input type="number" />
</body>

Suppose that we have 2 different input fields, one type for text and another for numbers only, we can give different styles based on their attribute types.

So when I need to write rules only for number inputs for example, I need to define an attribute selector (after the name of the tag inside the brackets by writing the name of the attribute and its value) like below:

input[type=number] {
  background: gray;
}

The rules will be applied only for number-input fields.

Universal Selector

The last important selector I’d like to mention is the universal (*) selector. The universal selector targets all of the elements on the page at once and applies all of them to the same rules.

To define the universal selector, we use only the asterisk character in order to select all of the elements.

* {
  font-size: 20px;
}

So these are the 5 basic selectors that we use in CSS. We can also combine selectors and apply the same rules in many different ways. In my next article, you’re going to learn how to combine these CSS selectors.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!