CODE WITH FAHIM

CSS Pseudo-classes

A CSS pseudo-class is a special keyword added to a selector that lets you style an element based on its state or position, rather than just its name, class, or ID.

Think of it like this:
A class targets elements you’ve labeled manually in your HTML.
A pseudo-class targets elements automatically based on how they behave or where they are in the document.

🧠 Simple definition:

A pseudo-class is used in CSS to define a special state of an element.

⚙️ Common pseudo-classes:

Pseudo-class	What it does
:hover	When mouse hovers over an element
:active	When element is being clicked
:focus	When element (like input) is selected
:visited	When link has been visited
:first-child	Selects first child element (regardless of type)
:last-child	Selects last child element (regardless of type)
:nth-child(n)	Selects element based on position (regardless of type)
:checked	Targets checked checkboxes/radio buttons
:disabled	Targets disabled form elements
:only-child	Targets an element that is the only child of its parent (regardless of type)
:root	Selects the document's root element (the html tag)
:not(selector)	Selects every element that is NOT the specified selector
:empty	Targets elements that have no children, not even text
:target	Targets the element whose ID matches the URL fragment (after #)
:read-only	Targets input fields that are set to be read-only
:required	Targets form elements with the `required` attribute
:optional	Targets form elements without the `required` attribute
:valid	Targets form elements whose content validates correctly
:invalid	Targets form elements whose content fails validation
:lang(language)	Targets elements based on the language attribute (e.g., `lang="fr"`)
:first-of-type	Selects the first element of its type among siblings
:last-of-type	Selects the last element of its type among siblings
:only-of-type	Targets an element if it's the only one of its type in the parent
:nth-of-type(n)	Selects elements based on position, but only among its type
:default	Targets one or more default form elements (e.g., default button)
:in-range	Targets input fields whose value is within the min/max range
:out-of-range	Targets input fields whose value is outside the min/max range
:placeholder-shown	Targets an input element when its placeholder text is visible
:focus-within	Targets an element if it OR any of its descendants has :focus
:scope	Selects elements that are a reference point for other selectors

✅ In short:

A pseudo-class lets you style something based on behavior, state, or structure — things you can’t directly label in your HTML.

Use of common Pseudo-classes:

1. :hover -

Targets an element when the mouse hovers over it.

Example:

CSS code:
a:hover {
color: red;
}

Output:

The color of the text will change after hovering

2.:active -

Targets an element while it’s being clicked.

CSS code:

a:active {
color: green;
}

Output:

Text color changes while clicking (active state)

3.:focus -

Used to style elements when they are in focus (e.g., input field selected).

input:focus { border-color: blue; }

Output:

4.:visited -

Targets links that have already been clicked.

a:visited {
color: purple;
}

Output:

Purple after visit (if already clicked)

5.:first-child -

Targets the first element among a group of siblings (elements sharing the same parent), regardless of tag type.

p:first-child {
font-weight: bold;
}

Output:

1. Paragraph (This is the first child and is bold)

2. Span (Not affected by p:first-child)

3. Paragraph (Not first child)

6.:last-child -

Targets the last element among a group of siblings, regardless of tag type.

p:last-child {
font-style: italic;
}

Output:

1. Item A

2. Item B

3. Span (The actual last child, so no italic applied to 'p')

1. Item C

2. Item D (This is the last child and is italic)

7.:nth-child(n) -

Targets elements based on a formula (n) by their position among all siblings.

li:nth-child(odd) {
background-color: #f0f0f0;
}

Output:

List item 1 (odd)
List item 2
List item 3 (odd)
List item 4

8.:checked -

Targets elements (like radio buttons or checkboxes) that are in a "checked" state.

input[type="checkbox"]:checked {
outline: 3px solid blue;
}

Output:

Checked Checkbox Unchecked Checkbox

9.:disabled -

Targets form elements that are in a "disabled" state.

input:disabled {
background-color: #333;
cursor: not-allowed;
}

Output:

10.:only-child -

Targets an element that is the *only* child element inside its parent, regardless of tag type.

.only-child-container > p:only-child {
background-color: lightgreen;
}

Output:

Only child (Highlighted)

First child

Second child

11.:root -

Targets the document's root element (``). Used for global variables.

:root {
--main-color: darkblue;
}
body {
color: var(--main-color);
}

Output:

The primary page text color is set via the :root selector.

12.:not(selector) -

Selects every element that *does not* match the argument inside the parentheses.

div:not(.special) {
border: 1px solid black;
}

Output:

This div has a border.

This div has NO border because it's negated.

13.:empty -

Targets an element only if it has **no children and no content** (not even whitespace).

.box:empty {
height: 20px;
background-color: orange;
}

Output:

Content inside

The empty box above will be styled (orange).

14.:target -

Targets the element whose ID is specified in the URL's fragment identifier.

:target {
border: 2px solid red;
}

Output:

Click the link, and the box will be styled (Red border).

Go to Section A

This box is the target.

15.:read-only -

Targets input or textarea elements that are not editable by the user.

input:read-only {
background-color: #444;
}

Output:

16.:required -

Targets form elements that have the `required` attribute.

input:required {
border-left: 5px solid red;
}

Output:

17.:optional -

Targets form elements that do *not* have the `required` attribute.

input:optional {
border-left: 5px solid green;
}

Output:

18.:valid -

Targets form elements whose content currently validates successfully.

input:valid {
background-color: lightgreen;
}

Output:

19.:invalid -

Targets form elements whose content fails to validate.

input:invalid {
border: 2px solid red;
}

Output:

20.:lang(language) -

Targets elements based on their language attribute.

p:lang(fr) {
font-style: italic;
}

Output:

English paragraph.

Paragraphe Français (italic).

21.:first-of-type -

Targets the first element of its specific type within a group of siblings.

span:first-of-type {
color: magenta;
}

Output:

1. Paragraph (Type 1)

2. Span (First span is magenta)

3. Paragraph (Type 2)

4. Span (Second span, not magenta)

22.:last-of-type -

Targets the last element of its specific type within a group of siblings.

span:last-of-type {
border-bottom: 2px solid cyan;
}

Output:

1. Span (Not last)

2. Paragraph

3. Span (Last span is underlined)

23.:only-of-type -

Targets an element if it is the only one of its specific tag type within the parent.

h4:only-of-type {
text-decoration: underline;
}

Output:

Paragraph

Only H4 (Underlined)

Another Paragraph

First H4

Second H4 (No underline)

24.:nth-of-type(n) -

Targets elements based on a formula (n) by their position only among elements of the same tag type.

p:nth-of-type(2) {
background-color: yellow;
}

Output:

1. First P

1. Span

2. Second P (Highlighted)

3. Third P

25.:default -

Targets the default form element among a set of related elements (e.g., the default submission button).

button:default {
border: 3px solid blue;
}

Output:

26.:in-range / 27.:out-of-range -

Targets number or date inputs based on whether their value falls within the `min` and `max` attributes.

input:in-range { border: 2px solid green; }
input:out-of-range { border: 2px solid red; }

Output: