1. :hover

Triggers when mouse hovers over an element.

Hover over me → Background changes, scale grows

/* :hover - mouse over element */
.element:hover {
background-color: #c73b54;
transform: scale(1.02);
}

2. :focus

Triggers when an element receives focus (clicked or tabbed into).

/* :focus - element is focused */
input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.3);
}

3. :first-child and :last-child

Selects the first or last child of a parent.

First child → blue background
Middle child
Middle child
Last child → red background

/* :first-child - first child element */
li:first-child { background-color: #4a90e2; }

/* :last-child - last child element */
li:last-child { background-color: #e94560; }

4. :nth-child()

Selects elements based on their position.

Every even item (2nd, 4th, 6th...)

Item 1
Item 2 → blue
Item 3
Item 4 → blue
Item 5
Item 6 → blue

Every 3rd item (3n)

Item 1
Item 2
Item 3 → green
Item 4
Item 5
Item 6 → green

/* :nth-child() patterns */
li:nth-child(even) { } /* Even items */
li:nth-child(odd) { } /* Odd items */
li:nth-child(3n) { } /* Every 3rd item (3,6,9...) */
li:nth-child(2n+1) { } /* Same as odd */
li:nth-child(3) { } /* Only the 3rd item */

5. :first-of-type and :last-of-type

Selects the first or last element of a specific type within a parent.

First h3 (blue)

Paragraph 1

Paragraph 2

Last p (green)

/* :first-of-type - first h3 in parent */
h3:first-of-type { color: #4a90e2; }

/* :last-of-type - last p in parent */
p:last-of-type { color: #2ecc71; }

6. :not() (Exclusion)

Selects all elements EXCEPT those matching the selector.

Normal item (opacity 0.6)
Normal item (opacity 0.6)
SPECIAL item (full opacity, red background)
Normal item (opacity 0.6)

/* :not() - exclude elements */
li:not(.special) {
opacity: 0.6;
}

7. :is() (Group Selectors)

Groups selectors for cleaner code. Shorter than writing each separately.

This is h1

This is h2

This is h3

This paragraph is NOT affected

/* Without :is() */
.is-demo h1, .is-demo h2, .is-demo h3 { color: #e94560; }

/* With :is() - cleaner */
.is-demo :is(h1, h2, h3) { color: #e94560; }

8. :checked

Selects checked checkboxes or radio buttons.

Option 1 Option 2 Option 3

✓ Click an option → the label turns green

/* :checked - selected checkbox/radio */
input:checked + label {
color: #2ecc71;
font-weight: bold;
}

9. :disabled and :enabled

Selects disabled or enabled form elements.

/* :disabled - disabled form elements */
input:disabled { opacity: 0.5; cursor: not-allowed; }

/* :enabled - enabled form elements */
input:enabled { background-color: #2a3a5a; }

10. :required and :optional

Selects required or optional form fields.

/* :required - required form fields */
input:required { border-left: 4px solid #e94560; }

/* :optional - optional form fields */
input:optional { border-left: 4px solid #2ecc71; }

11. :valid and :invalid

Selects form elements with valid or invalid values.

💡 Type an email with @ → border turns green. Invalid → red border.

/* :valid - valid input value */
input:valid { border-color: #2ecc71; }

/* :invalid - invalid input value */
input:invalid { border-color: #e94560; }

📚 Pseudo-Classes Quick Reference

/* =================================== COMMON PSEUDO-CLASSES =================================== */ :hover /* Mouse over element */
:focus /* Element focused (click/tab) */
:active /* Element being clicked */
:visited /* Visited link */
:link /* Unvisited link */

/* =================================== CHILD-BASED PSEUDO-CLASSES =================================== */ :first-child /* First child of parent */
:last-child /* Last child of parent */
:nth-child(n) /* Nth child (1,2,3... or even/odd) */
:nth-last-child(n) /* Nth child from end */
:only-child /* Only child of parent */

/* =================================== TYPE-BASED PSEUDO-CLASSES =================================== */ :first-of-type /* First element of its type */
:last-of-type /* Last element of its type */
:nth-of-type(n) /* Nth element of its type */

/* =================================== FORM PSEUDO-CLASSES =================================== */ :checked /* Checked checkbox/radio */
:disabled /* Disabled form element */
:enabled /* Enabled form element */
:required /* Required form element */
:optional /* Optional form element */
:valid /* Valid form input */
:invalid /* Invalid form input */
:in-range /* Input within range */
:out-of-range /* Input outside range */

/* =================================== FUNCTIONAL PSEUDO-CLASSES =================================== */ :not(selector) /* Exclude matching selector */
:is(selector) /* Group selectors (shorter) */
:where(selector) /* Same as :is but lower specificity */
:has(selector) /* Parent containing selector (newer) */

🧠 Quick Quiz

/* Question 1: What pseudo-class selects the 3rd child? */ /* Answer: :nth-child(3) */ /* Question 2: What pseudo-class selects all li EXCEPT those with class "hidden"? */ /* Answer: li:not(.hidden) */ /* Question 3: What pseudo-class styles a checked checkbox? */ /* Answer: :checked */ /* Question 4: What is the difference between :first-child and :first-of-type? */ /* Answer: :first-child checks position in parent. :first-of-type checks first element of that type. */ /* Question 5: What pseudo-class styles an input with invalid email? */ /* Answer: :invalid */