⬅ Back

CSS Selectors

Selectors are used to choose elements in HTML and apply styles to them.

You may have many elements, but sometimes you want to style only specific ones.

Element Selector (by tag)

Selects all elements of the same type. 

p {
  color: tomato;
}

All paragraphs will become red.

Example:
h1 { color: red; }
a { color: blue; }

ID Selector (#id)

Selects one unique element. 

#title {
  color: orange;
}

<h1 id="title">Hello</h1>
Example:
<h1 id="main-title">Welcome</h1>
<h2>About Us</h2>
<p>Learn more about our website.</p>

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

Only the element with id="main-title" becomes blue and centered. In CSS, write the ID with #; in HTML, write it without #.

ID must be unique and is rarely used for styling.

Class Selector (.class)

The most important selector in real projects. 

.title {
  color: skyblue;
}

<h2 class="title">Hello</h2>
More examples:
.text { color: brown; }
.link { color: tomato; }

Classes are reusable and flexible.

Descendant Selector (X Y)

The descendant selector selects elements that are inside another element. Write the ancestor selector first, add a space, and then write the selector for the elements you want to target: X Y.

The selected element does not have to be a direct child. It can be nested at any depth. Elements outside the ancestor are not selected.

Example 1: Links inside a list
ul a {
  color: red;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

<a href="#">Contact</a>

The Home and About links become red because they are inside the <ul>. The Contact link stays unchanged because it is outside it.

Example 2: Links nested at different depths
.social-links a {
  color: blue;
}

<div class="social-links">
  <a href="#">LinkedIn</a>

  <p>
    Follow me on <a href="#">GitHub</a>
  </p>
</div>

<a href="#">My website</a>

Both LinkedIn and GitHub become blue. GitHub is nested more deeply, but it is still a descendant of .social-links. The My website link is not selected.

More examples:
.article p { line-height: 1.6; }
.menu .active { font-weight: bold; }
nav button { background-color: navy; }

Child Selector (X > Y)

The child selector selects elements that are direct children of another element. Write the parent selector first, add >, and then write the selector for the children you want to target: X > Y.

A direct child is exactly one level inside its parent. Elements nested more deeply are not selected.

Example 1: Direct list items
.menu > li {
  color: red;
}

<ul class="menu">
  <li>Home</li>
  <li>
    Products
    <ul>
      <li>Phones</li>
      <li>Laptops</li>
    </ul>
  </li>
</ul>

Home and Products become red because they are direct children of .menu. Phones and Laptops do not become red because they belong to the nested <ul>.

Example 2: Direct paragraphs
.card > p {
  color: blue;
}

<div class="card">
  <p>This paragraph becomes blue.</p>

  <div class="details">
    <p>This paragraph stays unchanged.</p>
  </div>
</div>

Only the first paragraph is a direct child of .card. The second paragraph is a descendant of .card, but its direct parent is .details.

Child vs descendant:
.menu li { }      /* All li elements inside .menu */
.menu > li { }    /* Only li elements one level inside .menu */
More examples:
nav > a { text-decoration: none; }
.form > input { border: 1px solid gray; }
.card > .title { font-size: 24px; }

Pseudo-classes (states)

Used for user interaction.

:hover
a:hover {
  color: orange;
}
:active
a:active {
  color: red;
}
:focus
input:focus {
  border: 2px solid blue;
}
Combined:
a:hover,
a:focus {
  color: orange;
}

Full Example

.page-nav .link {
  color: #00bcd4;
}

.page-nav .link:hover,
.page-nav .link:focus {
  color: #18ffff;
}

.page-nav .link:active {
  color: #212121;
}

Summary

⬅ Back