CSS tutorial series: CSS Selectors

In the previous tutorial we've briefly discussed selectors. CSS tutorial series: CSS Syntax

What is a selector?

A selector is the first part of a CSS rule that determines which HTML element to style.
CSS selectors are divided into various types, which we will discuss in detail in this post.

Let's begin by discussing the most basic CSS selectors, that is Universal selector

Universal Selector

The Universal selector is represented by an asterisk (*), it selects all elements, regardless of type. This special selector can select all elements that are nested within other elements.

<h1>I'm a Heading</h1>
<span>I'm a span</span>
<p>I'm a paragraph</p>
<div>
  <p>I'm a paragraph nested inside a div</p>
</div>

* {
  color: red;
}

Output

Element Type Selectors

This type of selector was seen in the previous post when we changed the color of our paragraph to green.
The Element type selector is simply an HTML tag that lacks the angled brackets.

p {
   color: green;
}

In this case, the element type selector will select every single paragraphs in our HTML document and modify their font color to green.

Before we get into class and id selectors, let's explain what a class and an id are.

A CSS class is a way to group HTML elements and apply styles to them. Classes are defined in HTML with the class attribute and selected in CSS with the dot notation . followed by the class name.
the class attribute is added in the opening tag of an HTML element to assign it to a specific class.

An ID is a unique identifier used in HTML documents to select and apply styles to specific elements. In HTML, the id attribute serves to uniquely identify an element, so the same id cannot be used on multiple elements.To select and apply styles, a hash sign # is used followed by the id name.

Class Selectors

A class selector selects and applies styles to elements that have a specific class attribute.

<p class="green-paragraph">A green paragraph</p>
<p>A red paragraph </p>
<p class="green-paragraph">Another green paragraph</p>

.green-paragraph {
  color: green;
}

p {
  color: red;
}

Output

Evidently, we have two green paragraphs and a red one since we've used the class selector ( to modify the font color of both HTML elements that have .green-paragraph class.
You may be wondering why isn't the color red applied to all the paragraphs given that we used the "p" element type selector to change the color of the second paragraph to red. This is known as CSS precedence, which will be covered in a later post.

Id Selectors

An Id selector matches an element that has the selected specific id. Using the Id selector we've altered the paragraph color to red.

<p id="red">Red Paragraph</p>
<p> A Paragraph</p>

#red {
  color: red;
}

Output

Child Selectors

A child selector selects all the direct children of an element using the child combinator > that is placed between two elements. The example below selects all <p> elements that are children of a <div> element and change their color to brown.

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <span>Paragraph 4</span>
  <p>Paragraph 5</p>
</div>

div > p {
  color: brown;
}

Output

Descendant Selector

A descendant selector selects and applies styles to elements that are nested inside other elements.
Any selector with white space between two selectors without a combinator is considered a descendant selector.

div p {
  color: brown;
}

What is a sibling?

A sibling element is on the same level of the Document Object Model tree as the selected element, and shares the same parent.

<div>
  <p>Sibling one</p>
  <p>Sibling two</p>
  <p>Sibling three</p>
</div>

Adjacent Sibling Selector

An adjacent sibling Selector which uses the + sign to select the element directly after an element. In the following example we are selecting a paragraph that is directly after a div and changing the font color to brown. This paragraph we are selecting is considered to be the direct sibling of the <div>. Remember adjacent means "directly after". This means that
the first sibling element will be selected.

<div>
  <p>Paragraph 1</p>
</div>

<p>Paragraph 2</p>
<p>Paragraph 3</p>

div + p {
  color: brown;
}

In the preceding example, the first paragraph following the div will be brown.

General Sibling Selector

The (tilde) character ~ represents a general sibling selector, which selects and applies styles to elements that are siblings of a specific element.

<div>
  <p>Paragraph 1</p>
</div>

<p>Paragraph 2</p>
<span>A span</span>
<p>Paragraph 3</p>

div ~ p {
  color: red;
}

In the previous example, we've applied a red font color to all of the div's siblings, which means the second and third paragraphs will be red.

Group selectors

Group selectors are used to apply the same styles to different elements at the same time by using multiple selectors to select elements separated by commas.

For example, rather than repeating the code like so:

h3 {
  text-align: center;
  color: yellow;
}

p {
  text-align: center;
  color: yellow;
}

h5 {
  text-align: center;
  color: yellow;
}

We can group selectors with similar styles and avoid repetition.

h3, p, h5 {
  text-align: center;
  color: yellow;
}