Simple Selectors

Element or Tag Selector

style.css

h1 {
  font-size: 30px;
}

Class Selector

style.css

.classname {
  font-size: 30px;
}

id Selector

style.css

#idname {
  font-size: 30px;
}

Universal Selectors

style.css

* {
  margin: 0;
  padding: 0;
}

Group Selectors

style.css

h1, h1, h3, h3, h5, h6, b {
  color: red;
  font-family: rockwell;
}
🎯 CSS Simple Selectors — Complete Tutorial

🌐 What Are Simple Selectors?

Simple selectors are the most basic type of CSS selectors. They allow you to target HTML elements using names, classes, IDs, attributes, and universal matching.

>>“Simple selectors are the foundation of CSS — every stylesheet begins with them.”

Note

Simple selectors include:
✔ Type Selector
✔ Class Selector
✔ ID Selector
✔ Universal Selector
✔ Attribute Selector
✔ Pseudo-class Selector

📦 The 6 Types of Simple Selectors

SelectorSyntaxTargets
Type SelectorelementAll elements of that tag
Class Selector.classElements with that class
ID Selector#idElement with that unique ID
Universal Selector*Matches all elements
Attribute Selector[attr]Elements with attributes
Pseudo-class Selector:hoverElements in a certain state

🔹 1. Type Selector

Targets all elements of a specific HTML tag.

Type Selector

p {
  color: blue;
}

This styles all <p> elements.

🔹 2. Class Selector

Targets any element with a specific class.

Class Selector

.card {
  border: 1px solid #ddd;
  padding: 1rem;
}

Multiple elements can share the same class.

🔹 3. ID Selector

Targets an element with a unique id. IDs must be used only once in a document.

ID Selector

#header {
  background-color: black;
  color: white;
}

Note

⚠️ ID selectors have the highest specificity among simple selectors (except inline styles).

🔹 4. Universal Selector (*)

Selects all elements.

Universal Selector

* {
  margin: 0;
  padding: 0;
}

Often used to reset default browser styles.

🔹 5. Attribute Selector

Selects elements based on the presence or value of attributes.

Attribute Selector

input[type="email"] {
  border: 2px solid blue;
}

Useful for form styling and targeting elements semantically.

Common Attribute Selector Types

PatternMeaning
[attr]Has attribute
[attr="value"]Exact match
[attr^="value"]Starts with
[attr$="value"]Ends with
[attr*="value"]Contains substring

🔹 6. Pseudo-class Selector

Selects elements in a specific “state” such as hover, focus, or active.

Pseudo-class Selector

button:hover {
  background-color: red;
}

States do not change HTML — they reflect user interaction or element conditions.

🧪 Practical Examples Using Simple Selectors

🎨 Styling Form Elements

Form Styling

input[type="text"] {
  padding: 0.5rem;
}

input:focus {
  outline-color: blue;
}

📦 Card Component

Card with class

.card {
  padding: 1rem;
  border-radius: 8px;
  background: #fafafa;
}

.card:hover {
  transform: scale(1.02);
}

🎛️ Navigation Highlight

Nav Example

nav a.active {
  color: red;
  font-weight: bold;
}

🧠 Specificity of Simple Selectors

SelectorSpecificity
Type0-0-1
Class0-1-0
ID1-0-0
Attribute0-1-0
Pseudo-class0-1-0
Universal0-0-0

Note

✔ ID > Class > Type
✔ Universal selector has zero specificity

⚠️ Common Mistakes

  • ❌ Overusing ID selectors → makes CSS harder to override
  • ❌ Using universal selector (*) too often → performance impact
  • ❌ Styling without classes → reduces reusability
  • ❌ Misusing attribute selectors → can become slow on large DOMs

Note

🎯 Best practice: Prefer classes for general styling and reuse.

🔥 Summary

CSS simple selectors are the building blocks of styling. By mastering them, you gain full control over how elements are targeted, allowing clean, efficient, maintainable CSS.

>>“Know your selectors — they decide how powerful and clean your CSS will be.”

Learn more →MDN Docs 📘