CSS Selectors

A selector tells the browser which HTML elements a CSS rule should style.

The Element Selector

The element selector uses the tag name. It styles every element of that type.

p {
  color: gray;
}

This makes every <p> on the page grey.

The Class Selector

A class lets you style only some elements. Add a class attribute in HTML, then write a dot . and the class name in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
.sale {
  color: white;
  background-color: crimson;
  padding: 6px;
}
</style>
</head>
<body>

<p>Notebook: Rs 120</p>
<p class="sale">Geometry box: Rs 350 (20% off)</p>
<p>Pencil pack: Rs 90</p>
<p class="sale">School bag: Rs 1,500 (10% off)</p>

</body>
</html>

Only the two items with class="sale" get the red style. Many elements can share one class, and one element can have several classes, separated by spaces: class="sale big".

The ID Selector

An id is for one unique element on the page. In CSS, write a hash # and the id name.

#main-title {
  text-align: center;
  color: navy;
}

<h1 id="main-title">Workownix Results 2026</h1>

The Universal Selector

The star * selects every element on the page. It is often used to reset spacing.

* {
  margin: 0;
  box-sizing: border-box;
}

Grouping Selectors

If several selectors need the same style, list them with commas instead of repeating the rule.

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #333333;
}

Descendant and Child Selectors

A space between two selectors means "inside". The rule below styles only links that are inside a <nav>:

nav a {
  color: white;
}

The > sign means "direct child only": ul > li selects <li> elements that sit directly inside a <ul>.

Pseudo-classes

A pseudo-class styles an element in a special state. It starts with a colon.

<!DOCTYPE html>
<html>
<head>
<style>
button {
  background-color: #264de4;
  color: white;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background-color: #0f2f9e;
}
li:first-child {
  font-weight: bold;
}
</style>
</head>
<body>

<button>Move your mouse over me</button>

<ul>
  <li>Ayesha - 95%</li>
  <li>Ali - 91%</li>
  <li>Bilal - 88%</li>
</ul>

</body>
</html>

Selector Summary

Which Rule Wins?

If two rules style the same element, the more specific selector wins. An id is stronger than a class, and a class is stronger than an element selector. If two selectors are equally strong, the one written later wins.

Exercise