CSS Selectors

CSS Selectors

Selectors are the core of CSS — their job is to "select" the HTML elements you want to style. CSS offers multiple types of selectors, from simple tag selectors to complex selector combinations, giving you precise control over any element.

Basic Selectors

1. Tag Selector (Element Selector)

Uses HTML tag names directly as selectors, matching all tags with the same name in the document.

/* All <p> elements turn red */
p {
  color: red;
}

/* All <h1> elements turn blue */
h1 {
  color: blue;
}

/* All <div> elements get a border */
div {
  border: 1px solid black;
}

2. Class Selector

Matches elements by their class attribute. Class names are prefixed with a period ..

/* All elements with class="highlight" */
.highlight {
  background-color: yellow;
}

/* Only <p> elements with class="center" */
p.center {
  text-align: center;
}

HTML elements can have multiple classes, separated by spaces:

<p class="highlight center">This text is both highlighted and centered</p>

3. ID Selector

Matches elements by their id attribute, prefixed with a hash #.

/* Select element with id="header" */
#header {
  background-color: #333;
  color: white;
}

Note: An ID can only appear once per page. ID selectors are typically used for unique elements.

4. Universal Selector

Uses an asterisk * to match all elements in the document.

/* Reset margins and padding for all elements */
* {
  margin: 0;
  padding: 0;
}

The universal selector is convenient, but be careful about performance — if complex styles are applied, it can affect page rendering speed.

Selector Specificity

When multiple selectors apply to the same element, the browser uses specificity rules to determine which style takes effect:

Priority from high to low:

Inline styles > ID selectors > Class selectors > Tag selectors

Specificity Calculation Example

/* Specificity: 0001 */
p {
  color: black;
}

/* Specificity: 0010 */
.text {
  color: blue;
}

/* Specificity: 0100 */
#special {
  color: green;
}

/* Specificity: 0011 (class + tag) */
p.text {
  color: red;
}

For the same <p class="text" id="special"> element, the final text color will be green (ID selector has the highest specificity).

!important

CSS provides a "nuclear weapon" — !important — that forces a style to have the highest priority:

p {
  color: red !important;
}

Don't use !important unless absolutely necessary — it makes style debugging difficult. Prioritize solving problems by increasing selector specificity.

Best Practices for Selectors

1. Use class selectors frequently: Classes are reusable and the most flexible selector
2. Use ID selectors sparingly: IDs are unique, hard to reuse, and their high specificity can cause override issues
3. Avoid over-specification: div.container ul li a is too specific; .nav-link is enough
4. Keep selectors concise: Longer selectors are harder to maintain and affect performance

❓ FAQ

📖 Summary

• Selectors are the fundamental CSS skill — mastering tag, class, and ID selectors covers most styling needs
• Understanding selector specificity helps avoid confusion about "why isn't my style working"
• In practice, class selectors are used most frequently — prefer class-based styling

📝 Exercises

1. Create an HTML page with headings, paragraphs, and lists.
2. Use tag selectors to set text color for all paragraphs.
3. Use class selectors to set different background colors for specific elements (define at least 2 different classes).
4. Use ID selectors to set special styles for one element on the page.
5. Test: Apply tag, class, and ID selectors to the same element and observe which has the highest priority.