BeingXpert Learn & Build Future

4. CSS Selectors

What you will learn

  • How to select elements by tag, class, and id
  • How to select elements inside other elements
  • How to select by attribute
  • A first look at specificity

What is a selector?

A selector chooses the HTML elements that a rule applies to. Choosing the right selector is the most important CSS skill.

Common selectors

Selector Example Selects
Element p All <p> elements
Class .note All elements with class="note"
id #intro The element with id="intro"
Universal * Every element
Grouping h1, h2 Both h1 and h2
Descendant nav a Every a inside a nav
Child ul > li li elements directly inside a ul
Attribute input[type="text"] Inputs whose type is text

Element, class, and id

Example

<style>
  p { color: gray; }
  .highlight { background-color: yellow; }
  #title { color: crimson; }
</style>

<p id="title">This is the title paragraph.</p>
<p class="highlight">A highlighted paragraph.</p>
<p>A normal paragraph.</p>

Output

This is the title paragraph.

A highlighted paragraph.

A normal paragraph.

Remember: a class can be used many times, and an id only once per page. In CSS a class starts with a dot and an id starts with a hash.

Descendant and child selectors

Example

<style>
  .menu a { color: darkblue; font-weight: bold; }
  ul > li { color: darkgreen; }
</style>

<div class="menu">
  <a href="#">Home</a> <a href="#">About</a>
</div>
<a href="#">Outside link</a>

<ul>
  <li>Child item</li>
</ul>

Output

Home About

Outside link (not styled by the rule)

  • Child item

A space means “anywhere inside”. The > symbol means “directly inside”.

Attribute selectors

Example

<style>
  input[type="text"] { background-color: lightyellow; }
  a[target="_blank"] { color: purple; }
</style>

<input type="text" placeholder="Text field">
<input type="email" placeholder="Email field">
<p><a href="#" target="_blank">Opens in a new tab</a></p>

Output

Specificity: when selectors compete

When two rules set the same property on the same element, the more specific selector wins, no matter which comes first.

  1. An id selector is the strongest of the three basics.
  2. A class (or attribute) selector is next.
  3. An element selector is the weakest.

Example

<style>
  #msg { color: red; }
  .warn { color: orange; }
  p { color: blue; }
</style>

<p id="msg" class="warn">Which colour am I?</p>

Output

Which colour am I?

The text is red, because the id selector is the most specific.

Professional developers usually style with classes and avoid ids in CSS. Classes are easier to reuse and to override.

Common mistakes

  • Forgetting the dot before a class name or the hash before an id.
  • Using the same id on several elements.
  • Adding a space by mistake: p .note (a note inside a paragraph) is not the same as p.note (a paragraph that has the class note).
  • Making selectors too specific, so they are hard to override later.

Exercise

Write a rule that gives only the paragraph with the class tip a light blue background.

Show solution 
<style>
  .tip { background-color: lightblue; }
</style>
<p class="tip">A helpful tip.</p>
<p>A normal paragraph.</p>

Knowledge check

1. Which symbol starts a class selector?

A dot (.).

2. What does nav a select?

Every link anywhere inside a nav element.

3. Which is more specific: an id selector or a class selector?

The id selector.

Summary

  • Selectors choose elements by tag, class, id, position, or attribute.
  • Use .class and #id, and a space or > for relationships.
  • The more specific selector wins a conflict.
Scroll to Top