CSS selectors are used to target HTML elements so styles can be applied to them.

Think of selectors like this:

HTML Element
      ↓
CSS Selector Finds It
      ↓
Styles Applied

---

What is a Selector?

A selector tells CSS:

"Which element should be styled?"

Example:

h1 {
    color: blue;
}

Here:

h1 → Selector

---

Element Selector

An element selector targets HTML tags directly.

tagname {
    property: value;
}

HTML:

<h1>Welcome</h1>

<p>Hello World</p>

CSS:

h1 {
    color: blue;
}

p {
    color: gray;
}

Output:

Welcome      (Blue)
Hello World  (Gray)

Common examples:

body {

}

h1 {

}

p {

}

button {

}

---

Class Selector

A class selector targets elements with the same class.

Classes are reusable.

.classname {

}

HTML:

<h1 class="title">
    Welcome
</h1>

CSS:

.title {
    color: blue;
}

Multiple elements can share the same class.

<h1 class="title">
    Heading
</h1>

<p class="title">
    Paragraph
</p>

Both elements receive the same styles.

Classes are commonly used for reusable components.

.btn {
    background: blue;
    color: white;
}

---

ID Selector

An ID selector targets one unique element.

#idname {

}

HTML:

<h1 id="header">
    Welcome
</h1>

CSS:

#header {
    color: red;
}

IDs should be unique.

Good:

<h1 id="header">

Bad:

<h1 id="header">

<h2 id="header">

---

Universal Selector

The universal selector targets every element.

* {

}

Example:

* {
    margin: 0;
    padding: 0;
}

Meaning:

All Elements
      ↓
Margin = 0
Padding = 0

It is commonly used for CSS resets.

* {
    box-sizing: border-box;
}

---

Grouping Selector

Multiple selectors can share the same styles.

Without grouping:

h1 {
    color: blue;
}

h2 {
    color: blue;
}

h3 {
    color: blue;
}

With grouping:

h1,
h2,
h3 {
    color: blue;
}

Benefits:

• Less code
• Easier maintenance

---

Attribute Selectors

Attribute selectors target elements based on their attributes.

HTML:

<input type="text">

<input type="password">

CSS:

input[type="text"] {
    background: yellow;
}

Only text inputs are selected.

Any element with an attribute:

[target] {
    color: red;
}

Targets:

<a target="_blank">

Exact match:

[type="email"] {

}

Targets:

<input type="email">

---

Descendant Selector

A descendant selector targets elements inside another element.

parent child {

}

HTML:

<div>

    <p>Hello</p>

</div>

CSS:

div p {
    color: blue;
}

Meaning:

Select every <p>
inside <div>

Structure:

div
└── p

---

Child Selector

A child selector targets only direct children.

parent > child {

}

HTML:

<div>

    <p>Direct Child</p>

</div>

CSS:

div > p {
    color: red;
}

Structure:

div
└── p

Descendant vs Child

Descendant:

div p

Matches:

div
└── section
    └── p

Child:

div > p

Matches only:

div
└── p

---

Next Sibling Selector

The next sibling selector targets the immediate sibling after an element.

element + sibling {

}

HTML:

<h1>Title</h1>

<p>Paragraph</p>

CSS:

h1 + p {
    color: blue;
}

Structure:

h1
 ↓
p

Only the first sibling is selected.

---

Subsequent Sibling Selector

The subsequent sibling selector targets all siblings after an element.

element ~ sibling {

}

HTML:

<h1>Title</h1>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p>Paragraph 3</p>

CSS:

h1 ~ p {
    color: blue;
}

Output:

Paragraph 1 → Blue
Paragraph 2 → Blue
Paragraph 3 → Blue

---

Pseudo Classes

Pseudo classes target special states of elements.

selector:pseudo-class {

}

Hover

button:hover {
    background: blue;
}

a:hover {
    color: red;
}

The style is applied when the mouse moves over the element.

---

Focus

input:focus {
    border: 2px solid blue;
}

Applied when an input receives focus.

---

First Child

li:first-child {
    color: red;
}

Selects the first list item.

---

Last Child

li:last-child {
    color: blue;
}

Selects the last list item.

---

nth-child()

li:nth-child(2) {
    color: green;
}

Selects the second child.

Common pseudo classes:

Pseudo Class	Purpose
:hover	Mouse hover
:focus	Focused element
:first-child	First child
:last-child	Last child
:nth-child()	Specific child
:checked	Checked input
:disabled	Disabled input

---

Pseudo Elements

Pseudo elements style specific parts of an element.

selector::pseudo-element {

}

::first-letter

p::first-letter {
    font-size: 40px;
}

Makes the first letter larger.

---

::first-line

p::first-line {
    color: blue;
}

Styles only the first line.

---

::before

p::before {
    content: "👉 ";
}

Output:

👉 Paragraph

---

::after

p::after {
    content: " ✔";
}

Output:

Paragraph ✔

Common pseudo elements:

Pseudo Element	Purpose
::before	Insert content before
::after	Insert content after
::first-letter	First letter
::first-line	First line
::selection	Selected text

---

Complete Example

HTML:

<div class="container">

    <h1 id="title">
        Frontend Development
    </h1>

    <p>
        Learn HTML and CSS.
    </p>

</div>

CSS:

.container {
    padding: 20px;
}

#title {
    color: navy;
}

div p {
    color: gray;
}

p:hover {
    color: red;
}

p::before {
    content: "📘 ";
}

---

Selector Specificity

When multiple selectors target the same element, the most specific selector wins.

Inline Style
      ↓
ID Selector
      ↓
Class Selector
      ↓
Element Selector
      ↓
Universal Selector

Example:

* {
    color: black;
}

p {
    color: blue;
}

.text {
    color: red;
}

#message {
    color: green;
}

HTML:

<p id="message" class="text">
    Hello
</p>

Output:

Green

Because the ID selector has higher specificity.

---

Key Takeaway

Selectors are the foundation of CSS.

Selector
      ↓
Find Element
      ↓
Apply Styles

As you continue learning CSS, selectors become even more powerful and are used throughout layouts, Flexbox, Grid, animations, responsive design, and modern frameworks.