CSS Selectors

 What is a CSS Selector?

A CSS selector is the part of a CSS rule that defines which HTML elements the rule will apply to.

For example, if we select h1, this is called an element selector, which targets a specific HTML tag.
In this case, it will target all <h1> elements on the page.

If we target p, a, h2, or any other tag, the styles will be applied to all elements of that type.

---

1️⃣ Element Selector

The element selector targets HTML elements by their tag name.

Example:
If an index.html file has three <h2> headings — Red, Green, and Blue — and we write:

h2 {
  color: red;
}

Then all <h2> headings will appear in red.
This is the simplest type of selector.

---

2️⃣ Class Selector

A class selector starts with a dot (.) followed by the class name.

Example:

.red-heading {
  color: red;
}

What is a Class?
A class is an HTML attribute used to apply the same styles to multiple elements.

Example:
If an <h2> and a <p> tag have the same class, both will get the same CSS styles.

---

3️⃣ ID Selector

An ID selector starts with a hash (#) followed by the ID name.

Example:

#main {
  color: red;
}

Class vs ID:

• Class can be used for multiple elements.

• ID must be unique and used for only one element per HTML file.

---

4️⃣ Attribute Selector

The attribute selector targets elements based on their attributes or attribute values.

Examples:

p[draggable] {
  color: blue;
}

→ Selects all <p> elements with the draggable attribute.

p[draggable="false"] {
  color: gray;
}

→ Selects all <p> elements where the draggable attribute is set to "false".

---

5️⃣ Universal Selector

The universal selector is represented by an asterisk (*) and selects all elements.

Example:

* {
  margin: 0;
  padding: 0;
}

→ This removes the margin and padding from every element on the page.