Selectors and Operators

When learning CSS, two very important concepts are:

• Selectors → Used to target (choose) HTML elements.
• Operators → Used inside selectors to be more specific.

Think of it like this:

• A selector is who you want to style.
• An operator is how specifically you want to target them.

What is a CSS Selector?

A selector tells CSS which HTML element to style.

Basic structure:

selector {
  property: value;
}

Example:

p {
  color: blue;
}

This means:

👉 “Make all paragraph elements blue.”

Types of CSS Selectors

1️⃣ Element Selector

Targets all elements of a specific type.

h1 {
  color: red;
}

This affects all <h1> tags.

2️⃣ Class Selector

Targets elements with a specific class.

HTML:

<p class="intro">Hello World</p>

CSS:

.intro {
  font-weight: bold;
}

Notice the dot . before the class name.

3️⃣ ID Selector

Targets a specific element with an ID.

HTML:

<h1 id="main-title">Welcome</h1>

CSS:

#main-title {
  color: green;
}

Notice the hash # before the ID name.

⚠️ An ID should be unique (used only once per page).

4️⃣ Universal Selector

Targets all elements.

* {
  margin: 0;
}

The * means “everything”.

CSS Operators (Combinators)

Operators help you be more specific when selecting elements.

These are sometimes called combinators because they combine selectors.

1️⃣ Descendant Operator (Space)

Targets elements inside another element.

div p {
  color: blue;
}

This means:

👉 “Select all <p> elements inside a <div>.”

HTML example:

<div>
  <p>This will be blue.</p>
</div>

<p>This will NOT be blue.</p>

2️⃣ Child Operator (>)

Targets only direct children.

div > p {
  color: red;
}

This selects only <p> elements directly inside <div>.

Example:

<div>
  <p>This is red.</p>
  <section>
    <p>This is NOT red.</p>
  </section>
</div>

3️⃣ Adjacent Sibling Operator (+)

Targets the next element immediately after another.

h1 + p {
  color: purple;
}

This selects the first <p> that comes immediately after an <h1>.

Example:

<h1>Title</h1>
<p>This is purple.</p>
<p>This is NOT purple.</p>

4️⃣ General Sibling Operator (~)

Targets all siblings after an element.

h1 ~ p {
  color: orange;
}

All <p> elements after <h1> will be orange.

Attribute Selectors

Attribute selectors use operators like =, ^=, $=, *=.

These are true operators inside selectors.

1️⃣ Exact Match (=)

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

Targets only text input fields.

2️⃣ Starts With (^=)

a[href^="https"] {
  color: green;
}

Targets links that start with “https”.

3️⃣ Ends With ($=)

a[href$=".pdf"] {
  color: red;
}

Targets links that end with “.pdf”.

4️⃣ Contains (*=)

a[href*="google"] {
  color: purple;
}

Targets links containing the word “google”.

Complete Example with HTML + CSS