Simple CSS Selectors

In CSS June 16, 2024

Updated on June 20, 2024

Simple selectors are the most basic building blocks in CSS. Understanding simple selectors is the first step to mastering CSS. In this blog post, we will create a simple HTML page and style it using simple selectors.

All parts:

What are Simple Selectors?

Simple selectors form the foundation of CSS. A simple selector checks elements against just one condition. There are several types of simple selectors, according to the W3C: type selector, universal selector, attribute selector, id selector, class selector, and pseudo-class.

Create a New Project

To gain a better understanding of simple selectors, we will set up a simple project. First, let's create a folder called simple-selectors. Within this folder, we'll create two files: index.html and index.css. You can view the result by opening the index.html file in a web browser or running a server like Live Server.

Let's open the index.html file and edit it as follows:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple CSS Selectors Examples</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Welcome to Simple CSS Selectors</h1>
  <p>A simple selector checks elements against just one condition.</p>
  <h2><a href="https://www.w3.org/TR/selectors-4">Simple Selectors</a> According to <a
      href="https://www.w3.org">W3C</a>:</h2>
  <ul>
    <li>Type Selector</li>
    <li>Universal Selector</li>
    <li>Attribute Selector</li>
    <li>ID Selector</li>
    <li>Pseudo-Class</li>
  </ul>
</body>
</html>

Next, we will discuss all types of simple selectors.

Type Selector

In the previous post of this series, we already discussed type selectors. The type selector is the most basic form, targeting elements by their tag name. It is also known as the tag name selector. For example, body selects the body element, p selects all p elements, h1 selects all h1 elements, and ul selects all ul elements. Let's open the index.css file and apply some styles to our body, h1, p, and ul elements:

body {
  margin: 0 auto;
  padding: 30px;
}
h1 {
  font-size: 42px;
}
p {
  font-family: sans-serif;
}
ul {
  margin: 30px 10px;
  padding: 0;
  font-family: serif;
}

Universal Selector

This broad selector, denoted by "*" matches any single element in the document tree. It's not commonly used for specific styling but can be helpful for resetting styles or applying universal styles. Let's use it to reset the margins of all elements. At the top of our index.css file, add this:

* {
  margin: 0;
}

With this rule, we've reset the margins of all the elements on the page to 0.

Attribute Selector

Attribute selectors target elements based on their attributes and their values.

For example, let's make the link to the W3C home page color blue. We can select the element with the href matching "https://www.w3.org":

a[href="https://www.w3.org"]
{
  color: #0044a4;
}

But what if we need to make all links to W3C the same color? We can do that by selecting all a elements with the value of the href attribute containing “w3.org”:

a[href*="w3.org"] {
  color: #0044a4;
}

ID Selector

This targets an element with a unique identifier specified by the id attribute. It's written with a hash symbol (#) followed by the ID name. IDs must be unique within a document.

For example, let's add a "description" id to the paragraph in our page:

<p id="description"> A simple selector checks elements against just one condition.</p>

Then, in index.css we can add the following rule:

#description {
  margin-top: 30px;
  font-weight: 600;
}

Also, let's add a "secondaryHeading" id to the h2 element:

<h2 id="secondaryHeading"><a href="https://www.w3.org/TR/selectors-4">Simple Selectors</a> According to <a
      href="https://www.w3.org">W3C</a>:</h2>

Then, in index.css, we can select and style it:

#secondaryHeading {
  margin-top: 30px;
  font-size: 32px;
}

Class Selector

The class selector targets elements with a specific CSS class assigned using the class attribute. It's denoted by a period (.) followed by the class name. The same class can be used on multiple elements.

Let's add a “list-item” class to all list items in our list:

<ul>
  <li class="list-item">Type Selector</li>
  <li class="list-item">Universal Selector</li>
  <li class="list-item">Attribute Selector</li>
  <li class="list-item">ID Selector</li>
  <li class="list-item">Pseudo-Class</li>
</ul>

Now, we can select all elements with the list-item class and style them:

.list-item {
  padding: 10px 0;
  border-bottom: 1px solid grey;
}

Pseudo-Class

These selectors add functionality beyond basic element types. For instance, hover targets elements when the user hovers over them with the mouse. Using pseudo-classes, we can style the links to change color to a shade of green when we hover over them:

a:hover {
  color: #005221;
}

Conclusion

Simple selectors form the foundation of CSS. By mastering simple selectors, you’ll be able to apply basic styles to your web pages. In the next post, we'll explore compound selectors to help you refine your styling capabilities.

Bibliography

“Selectors Level 4”, W3C, https://www.w3.org/TR/selectors-4/