Understanding CSS Selectors (With Examples)

CSS selectors are the heart of CSS. They tell the browser which HTML elements to style.

If you want to:

• Change the color of all <p> tags,
• Add a background to a specific section,
• Style buttons with the same class,

…you need to understand selectors.

Let’s understand them in a simple way

Element Selector

Targets all elements of a specific type.

Example:

p {
  color: blue;
}

p {
  color: blue;
}

🎯 The CSS above styles all <p> tags on the page.

Class Selector (.)

Used when you want to style multiple elements with the same style.

Example HTML:

<p class="highlight">This is a paragraph.</p>
<div class="highlight">This is a div.</div>

<p class="highlight">This is a paragraph.</p>
<div class="highlight">This is a div.</div>

Example CSS:

.highlight {
  background-color: yellow;
}

.highlight {
  background-color: yellow;
}

🎯 Use . to target classes.

The CSS above will style every HTML element with the class name ‘highlight’.

ID Selector (#)

Used to target a unique element on a page.

Example HTML:

<h1 id="main-title">Welcome!</h1>

<h1 id="main-title">Welcome!</h1>

Example CSS:

#main-title {
  font-size: 32px;
  color: darkgreen;
}

#main-title {
  font-size: 32px;
  color: darkgreen;
}

🎯 Use # to target an ID (each ID should be unique).

The CSS above will style the HTML element with the ID name ‘main-title.’

ID is unique; thus, one ID can be assigned only once on a web page. So this CSS will style only the element having the targeted ID.

Grouping Selectors

You can apply the same styles to multiple selectors at once.

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

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

🎯 Grouping of selectors saves time and keeps your code clean.

The CSS above will style all h1, h2, and h3 tags on the page.

Descendant Selector (Nested)

Styles elements inside another element.

Example HTML:

<div class="content">
  <p>This paragraph is inside .content</p>
</div>

<div class="content">
  <p>This paragraph is inside .content</p>
</div>

Example CSS:

.content p {
  color: purple;
}

.content p {
  color: purple;
}

🎯 Targets only <p> tags inside .content.

Pseudo-classes

What is a pseudo-class in CSS?
A pseudo-class is a keyword added to a selector that defines a special state of an element, like when you hover your mouse over it or when it’s the first item in a list.

Syntax:

selector:pseudo-class {
property: value;
}

selector:pseudo-class {
property: value;
}

Common Pseudo-classes (With Examples)

➡️ :hover – When mouse hovers over an element

Use it to add effects on buttons or links when users move their mouse over them

Example:

button:hover {
  background-color: lightblue;
  color: white;
}

button:hover {
  background-color: lightblue;
  color: white;
}

Effect: When the user hovers over a button, it changes color.

➡️ :active – When an element is being clicked

Use it to show a click effect on buttons or links.

Example:

a:active {
  color: red;
}

a:active {
  color: red;
}

Effect: The link turns red while being clicked.

➡️ :focus – When an element is focused (like a form input)

Use it to highlight form fields when users click into them.

Example:

input:focus {
  border: 2px solid blue;
}

input:focus {
  border: 2px solid blue;
}

Effect: Adds a blue border when the input box is focused.

➡️ :first-child – Targets the first child inside a parent
➡️ :last-child – Targets the last child

Use it to style the first and last item in a list or section.

Example:

ul li:first-child {
  font-weight: bold;
}

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

ul li:first-child {
  font-weight: bold;
}

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

Effect: Makes the first list item bold and the last item turns green.

➡️ :nth-child(n) – Target a specific child by position

Example 1:

tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tr:nth-child(odd) {
  background-color: #f9f9f9;
}

Effect: Applies background to odd rows in a table.

Example 2:

li:nth-child(2) {
  color: red;
}

li:nth-child(2) {
  color: red;
}

Effect: Only the second item turns red.

Summary of Pseudo-classes:

Final Summary

CSS selectors let you target and style specific elements on a page.

Here is a quick recap of what we learnt in the above post.