A guide to CSS Selectors

CSS Selectors

CSS or Cascading Style Sheets is used to style HTML elements. Element styling typically involves:

Selecting the element
Applying the specific styles.

A Typical example of an HTML element could be:

<h1> hello </h1>

Here the h1 is an HTML element. Now we need to select this specific element in our CSS file, this would be done by using a selector.

A simple selector

The simplest CSS selector could be, an Element selector.

h1{
color: red;
}

The above is an example of an element selector, it would do exactly what its name says, select all specified elements on the page and apply the said styles, in this case, it would select all h1 elements and make them red.

Let’s get more specific!

Element selectors are good, but we may not need to apply the same styles to all instances of the selected element on the page, i.e. All h1 elements may not be red! There could be situations when only some h1 elements need to be red, here we use more specific Selectors.

Class selectors

A class selector looks like this:

.myColoredTag{
color: red;
}

We apply a class to an HTML element as:

<h1 class="myColoredTag"> hello </h1>

In this case, the same set of styles would be applied to all the elements having the same class name. This could be considered as one of the most used tags, as it can later help you to use various CSS frameworks, for example, bootstrap and apply framework-specific styles.

ID Selectors

An ID selector looks like this:

#myColoredTag{
color: red;
}

We can apply an ID to an HTML element as:

<h1 id="myColoredTag"> hello </h1>

Each page can have only one element with the same id, an id is thus unique.

Pseudo Classes in CSS

Before getting started with pseudo-classes, let us first understand what the word pseudo means, a simple google search gives you:

Pseudo: not genuine; spurious or sham.

A pseudo-class is basically a pseudo-state of an element that can be later targeted with CSS. They can be used to target and style those elements which cannot be targeted with normal CSS classes or Id. They are always preceded by a : Some examples could be, :visited, :hover etc.

Why do we need them, after all?

Consider the following code block:

h1:hover {
color:blue;
}

Let us discuss what this code block does, on hovering over the h1, the color of h1 changes to blue.

And this happens because we have applied a pseudo-class to it. So what the pseudo-class essentially does is that it lets us apply styles to a particular element not only in relation to the content of the document tree but also in relation to external factors. These external factors could be the hovering of a mouse when a link is clicked or visited, A form element is checked, etc.

What do they look like?

A basic pseudo-class can be defined as follows:

selector:pseudo class {
property:value;
}

It means that the pseudo-class helps in selecting certain elements when they are in a particular condition, example, when they are hovered upon.

Some Selectors, please

Pseudo-classes can be divided into two categories:

Structural Pseudo Classes
Dynamic Pseudo Classes

Let's study each one of them in detail with examples.

Dynamic Pseudo Classes

Dynamic pseudo-classes include examples such as :hover, :visited, :active etc.

active

Consider a link element:

<a href = "https://github.com/Harshita-Kanal">My GitHub</a>

This will give you a link.

Now consider the following CSS block:

a:active{
color: yellow;
}

This pseudo-class selector will select the link while it is being activated. This means when it is being clicked on or otherwise activated. For example, for the “pressed” state of a button-style link. And change its color to yellow by applying the corresponding CSS styles to the selected item.

disabled

An element is disabled if it cannot be activated, i.e. it cannot be clicked upon or typed into, selected etc. A disabled pseudo-class would help in selecting elements in that state.

Consider this as an example:

input[type = "text"]:disabled{
color: red;
}

Here all disabled input fields in the form would turn red.

visited

Whenever a link is already clicked or visited, it can be indicated by the :visited pseudo-class.

Consider this as an example:

a:visited{
color: red;
}

Here all visited links would turn red.

hover

Whenever something is hovered upon, it is indicated by this pseudo-class. It could be interpreted as a mouseover.

Consider the following CSS block:

p: hover{
color: yellow;
}

This will change the color of a p element when it is hovered upon, i.e the mouse is moved over it

Structural Pseudo Classes

Structural pseudo-classes include examples such as first-child, nth-of-type, last-child, etc.

first-child

It represents the first child among a series of siblings.

Consider the following example:

<ul>
 <li>This is selected<li>
 <li>This is not selected<li>
 <li>This is not selected<li>
</ul>

If we consider the following CSS block:

ul li:first-child{
color: red;
}

This will select the first li under the ul tag and apply the required styles to it.

last-child

It represents the last child among a series of siblings.

Consider the same example:

<ul>
 <li>This is not selected<li>
 <li>This is not selected<li>
 <li>This is selected<li>
</ul>

If we consider the following CSS block:

ul li:last-child{
color: red;
}

This will select the last li under the ul tag and apply the required styles on it.

nth-of-type

It represents elements of a given type, based on their position among a group of siblings.

Let's take an example:

<ul>
 <li>This is not selected<li>
 <li>This is not selected<li>
 <li>This is not selected<li>
 <li>This is selected<li>
 <li>This is not selected<li>
 <li>This is not selected<li>
 <li>This is not selected<li>
 <li>This is selected<li>
</ul>

Now let's consider a CSS block:

ul li:nth-of-type(4n){
color: red;
}

This will select every 4th li inside a ul and changes it to red.

Now let's see how can this be used in a variety of ways:

/* Odd list items */
ul li:nth-of-type(2n+1) {
  color: red;
}

/* Even list items */
ul li:nth-of-type(2n) {
  color: blue;
}

/* First list item */
ul li:nth-of-type(1) {
  font-weight: bold;
}

only-of-type

This represents any child element which is the unique child of the parent element. child of its parent. Consider an example:

<p>
 <h1>hey there!! </h1>
 <p>Hello all</p>
 <p>This is my first blog :)</p>
</p>