Typography & Text
Links & Pseudo-classes
:hover, :active, :focus
💡 Pseudo-classes ek element ki "current state" ko target karte hain — jaise ek button jo normally blue hai, hover karne par green ho jaata hai. Ye "IF this specific situation, THEN this style" jaisa conditional styling hai.
:hover — mouse element ke upar hai. :active — element abhi click ho raha hai (mouse button dabа hua). :focus — element keyboard se selected/focused hai (jaise ek input field jisme type kar rahe ho). Links (<a>) ke liye classic order hai: :link, :visited, :hover, :active ("LoVe HAte" mnemonic).
a {
color: blue;
text-decoration: none;
}
a:hover {
color: darkblue;
text-decoration: underline; /* hover par underline aaye */
}
button:active {
transform: scale(0.95); /* click hote waqt thoda chhota ho jaaye */
}
input:focus {
border-color: blue;
outline: 2px solid lightblue; /* keyboard focus clearly dikhe */
}🔗
Pseudo-classes ek element ki "current state" ko target karte hain — jaise ek button jo normally blue hai, hover karne par green ho jaata hai. Ye "IF this specific situation, THEN this style" jaisa conditional styling hai.
1 / 2
⚡ झट से Recap
- :hover/:active/:focus = interactive state-based styling
- Links order: link, visited, hover, active (LVHA)
- :focus indicator hataना mat, accessibility ke liye zaroori hai
इस page में (2 subtopics)
:nth-child(n) elements ko unki POSITION ke basis par select karta hai — 2n (even), 2n+1 (odd), specific numbers, ya formulas. Zebra-striping, selective styling ke liye bahut powerful.
li:nth-child(odd) {
background-color: #f2f2f2; /* alternate rows highlight */
}
li:nth-child(3) {
font-weight: bold; /* sirf teesra item */
}
li:first-child { margin-top: 0; }
li:last-child { margin-bottom: 0; }Tip: :first-child/:last-child :nth-child(1)/:nth-child(n) ke shortcuts hain — bahut common pattern list ke pehle/aakhri item ki extra margin hataने ke liye.
:not(selector) un elements ko select karta hai jo GIVEN selector match NAHI karte — exceptions handle karne ka clean tareeka, bina extra classes add kiye.
button:not(.disabled) {
cursor: pointer; /* saare buttons EXCEPT disabled wale */
}
li:not(:last-child) {
border-bottom: 1px solid #eee; /* last item ke alawa sab ko border-bottom */
}Tip: li:not(:last-child) ek bahut elegant pattern hai — "har item ke beech divider, last ke baad nahi" achieve karne ke liye, bina extra classes/JavaScript ke.