Notes/CSS3/CSS Selectors Basics

beginner7 min read

CSS Selectors Basics

Master the fundamental CSS selectors (Universal, Tag, Class, ID, Grouping) and understand the rules of Specificity.

1. Universal Selector (*)

The asterisk * selects every single element on the page (or inside a container). It is often used to reset margins.

The asterisk targets everything below

I am a DivAlso styled

I am a SpanAlso styled

I am a ParagraphAlso styled

styles.css

1* {
2  color: #d35400;
3  font-style: italic;
4}

2. Element (Tag) Selector

Selects elements based on their tag name (e.g., p, h1, div). It affects all matching tags on the page.

p { } — every paragraph is selected

I am a Div (Ignored)

I am a Paragraph (Selected)

I am also a Paragraph (Selected)

styles.css

1p {
2  color: green;
3  border-bottom: 2px solid green;
4}

3. Class Selector (.)

Selects elements with a specific class attribute. The most flexible and commonly used selector — it can be reused multiple times.

.card { } — every element with class="card" is styled

I have class="card"

No class here

I also have class="card"

styles.css

1.card {
2  background-color: #d6eaf8;
3  border: 2px solid blue;
4}

4. ID Selector (#)

Selects a single, unique element. An ID should only be used once per page.

#vip-pass { } — only the element with id="vip-pass" is styled

Normal Element

ID="VIP-PASS"The only element with this id

Normal Element

styles.css

1#vip-pass {
2  border: 2px dashed purple;
3  text-transform: uppercase;
4}

5. Grouping Selector (,)

Why write the same code 3 times? Use a comma to apply the same style to different selectors.

.group-a, .group-b, .group-c { } — one rule, three targets

Group A

Group B

Group C

styles.css

1.group-a, .group-b, .group-c {
2  background-color: pink;
3  color: darkred;
4}

6. The Hierarchy (Specificity)

What happens if an element has a Tag style, a Class style, AND an ID style? Who wins? Specificity scores: Tag (1 point), Class (10 points), ID (100 points). An ID will always override classes, and a class will override tags.

The battle box

I am the Element.Tag + Class + ID all applied. Result: ID Wins (Red Color)

pvs.battle-classvs#battle-id

0-0-1

.battle-class

0-1-0

#battle-id

1-0-0Winner

styles.css

1/* Weakest (1 point) */
2p { color: green; }
3 
4/* Medium (10 points) - Overrides Tag */
5.battle-class { color: blue; }
6 
7/* Strongest (100 points) - Overrides Class */
8#battle-id { color: red; }

7. Summary

A quick recap of the selector hierarchy:

Universal (*): Selects everything. Lowest specificity.
Tag (p): Broad selection. Low specificity.
Class (.): Reusable groups. Medium specificity. Best for most styling.
ID (#): Unique elements. High specificity.

Key Takeaways

1.Universal selector (*) targets all elements on a page.
2.Tag selectors style elements by HTML type (e.g., div, p, h1).
3.Class selectors (.) style reusable blocks and are the most common selector.
4.ID selectors (#) style a single unique element and should not be duplicated.
5.Specificity calculation determines which style wins when rules conflict: ID (100) > Class (10) > Tag (1).

Types of CSS CSS Syntax & Comments

Notes/CSS3/CSS Selectors Basics

beginner7 min read

CSS Selectors Basics

Master the fundamental CSS selectors (Universal, Tag, Class, ID, Grouping) and understand the rules of Specificity.

1. Universal Selector (*)

The asterisk * selects every single element on the page (or inside a container). It is often used to reset margins.

The asterisk targets everything below

I am a DivAlso styled

I am a SpanAlso styled

I am a ParagraphAlso styled

styles.css

1* {
2  color: #d35400;
3  font-style: italic;
4}

2. Element (Tag) Selector

Selects elements based on their tag name (e.g., p, h1, div). It affects all matching tags on the page.

p { } — every paragraph is selected

I am a Div (Ignored)

I am a Paragraph (Selected)

I am also a Paragraph (Selected)

styles.css

1p {
2  color: green;
3  border-bottom: 2px solid green;
4}

3. Class Selector (.)

Selects elements with a specific class attribute. The most flexible and commonly used selector — it can be reused multiple times.

.card { } — every element with class="card" is styled

I have class="card"

No class here

I also have class="card"

styles.css

1.card {
2  background-color: #d6eaf8;
3  border: 2px solid blue;
4}

4. ID Selector (#)

Selects a single, unique element. An ID should only be used once per page.

#vip-pass { } — only the element with id="vip-pass" is styled

Normal Element

ID="VIP-PASS"The only element with this id

Normal Element

styles.css

1#vip-pass {
2  border: 2px dashed purple;
3  text-transform: uppercase;
4}

5. Grouping Selector (,)

Why write the same code 3 times? Use a comma to apply the same style to different selectors.

.group-a, .group-b, .group-c { } — one rule, three targets

Group A

Group B

Group C

styles.css

1.group-a, .group-b, .group-c {
2  background-color: pink;
3  color: darkred;
4}

6. The Hierarchy (Specificity)

The battle box

I am the Element.Tag + Class + ID all applied. Result: ID Wins (Red Color)

pvs.battle-classvs#battle-id

0-0-1

.battle-class

0-1-0

#battle-id

1-0-0Winner

styles.css

1/* Weakest (1 point) */
2p { color: green; }
3 
4/* Medium (10 points) - Overrides Tag */
5.battle-class { color: blue; }
6 
7/* Strongest (100 points) - Overrides Class */
8#battle-id { color: red; }

7. Summary

A quick recap of the selector hierarchy:

Universal (*): Selects everything. Lowest specificity.
Tag (p): Broad selection. Low specificity.
Class (.): Reusable groups. Medium specificity. Best for most styling.
ID (#): Unique elements. High specificity.

Key Takeaways

1.Universal selector (*) targets all elements on a page.
2.Tag selectors style elements by HTML type (e.g., div, p, h1).
3.Class selectors (.) style reusable blocks and are the most common selector.
4.ID selectors (#) style a single unique element and should not be duplicated.
5.Specificity calculation determines which style wins when rules conflict: ID (100) > Class (10) > Tag (1).

Types of CSS CSS Syntax & Comments