Pseudo-classes ਕੀ ਹਨ ਅਤੇ ਕਿਹੜੀਆਂ ਆਮ ਹਨ?

Question

Accepted Answer

ਇਕ **pseudo-class** (ਸਿੰਗਲ ਕੋਲੋਨ `:`) ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੀ **state** ਜਾਂ **position** ਦੇ ਆਧਾਰ ਤੇ ਚੁਣਦਾ ਹੈ — ਕੁਝ ਜੋ ਸਾਧਾਰਨ ਕਲਾਸ ਦੁਆਰਾ ਪ੍ਰਗਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ, ਜਿਵੇਂ "ਜਦ ਉੱਪਰ ਹੋ ਵੋ" ਜਾਂ "ਪਹਲੀ ਬਾਲ।"

## State pseudo-classes (ਆਪਸ ਵਿੱਚ ਸੰਚਾਲਨ)

```css
a:hover    { color: blue; }      /* mouse is over it */
a:focus    { outline: 2px solid; } /* keyboard/tab focus — keep for accessibility! */
button:active   { transform: scale(0.98); } /* while being pressed */
button:disabled { opacity: 0.5; } /* disabled form controls */
input:checked   { } /* checked checkbox/radio */
input:focus-visible { } /* focus only when keyboard-navigating (not mouse) */
```

ਲਿੰਕਾਂ ਲਈ ਕ੍ਰਮ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ (LVHA): `:link`, `:visited`, `:hover`, `:active`।

## Structural pseudo-classes (position)

```css
li:first-child  { } /* first li among its siblings */
li:last-child   { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd)  { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n)   { } /* every 3rd */
p:only-child    { } /* a p that's the sole child */
```

`:nth-child()` ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ — `2n` (ਸਮ), `2n+1` (ਬੇਜੋੜ), `3n` (ਹਰ ਤੀਜਾ), ਆਦਿ।

## Form & ਆਧੁਨਿਕ pseudo-classes

```css
input:required  { }
input:invalid   { border-color: red; }
:is(h1, h2, h3) { }  /* matches any — shortens selector lists */
.card:has(img)  { }  /* the "parent selector": a card that CONTAINS an img */
:not(.active)   { }  /* everything except .active */
```

## Pseudo-class vs pseudo-element

Pseudo-classes **ਇੱਕ** ਕੋਲੋਨ (`:hover`, ਇੱਕ *state*) ਵਰਤਦੇ ਹਨ; pseudo-elements **ਦੋ** (`::before`, ਇੱਕ *ਤਿਆਰ ਕੀਤਾ ਹਿੱਸਾ*) ਵਰਤਦੇ ਹਨ। ਉਨ੍ਹਾਂ ਨੂੰ ਉਲਝਾਉ ਨਾ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Pseudo-classes ਆਪਨੂੰ ਆਪਸ ਵਿੱਚ ਸੰਚਾਲਨ (hover/focus — ਵਰਤਣਯੋਗ, ਪਹੁੰਚਯੋਗ UI ਲਈ ਜ਼ਰੂਰੀ) ਅਤੇ structure (striping, first/last) ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦਿੰਦੇ ਹਨ ਬਿਨਾ ਵਾਧੂ markup ਜਾਂ JavaScript ਦੇ।

ਆਧੁਨਿਕ (`:has`, `:is`, `:focus-visible`) ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਲਈ ਪਹਿਲਾਂ JS ਜਾਂ repetitive selectors ਦੀ ਲੋੜ ਸੀ।