📘 Lesson · Lesson 36
Pseudo-classes and Elements
Pseudo-classes और Elements
What Pseudo-classes Are
A pseudo-class targets an element based on its STATE or POSITION, not just its type or class. You've already used several:
:hover (mouse over it), :nth-child(even) (every even one), the link states from the links chapter. They all start with a single colon :. Pseudo-classes let you style things conditionally — "when hovered," "when it's the first one," "when the input is focused" — without adding extra classes in your HTML. This chapter ties together the ones you've met and adds the essential rest.State Pseudo-classes — hover, focus, and more
button:hover { background: #1e40af; } /* mouse is over it */
input:focus { border-color: blue; } /* input is selected/active */
button:active { transform: scale(0.97); } /* while being clicked */
input:disabled { opacity: 0.5; } /* a disabled field */
:checked { } /* a checked checkbox/radio */These style an element based on its current interactive state.
:hover you know well. :focus is critical for accessibility and forms — it styles an input or button when it's selected (clicked into or tabbed to), so users can SEE where they are; never remove focus styles without replacing them. :active fires during a click (great for a quick "press" effect). :disabled and :checked style form elements by their status. Together these make forms and interactive elements feel responsive and clear — :focus especially is one you should always style thoughtfully.Position Pseudo-classes — nth-child and friends
li:first-child { font-weight: bold; } /* the FIRST li */
li:last-child { border: none; } /* the LAST li */
tr:nth-child(even) { background: #f9f9f9; } /* every even row (striping) */
li:nth-child(3) { color: red; } /* exactly the 3rd */
p:nth-child(odd) { } /* 1st, 3rd, 5th... */These target elements by their position among siblings — hugely useful for lists, tables, and grids.
:first-child and :last-child grab the first/last item (perfect for removing a trailing border, or emphasising the first entry). :nth-child() is the powerful one: even/odd for zebra-striping tables (you met this), a number for a specific position, or even formulas like 3n for every third. This lets you style patterns without adding classes to each item — the browser figures out which elements match based purely on their order.Pseudo-elements — ::before and ::after
.quote::before {
content: "\201C"; /* insert an opening quote mark */
font-size: 2em;
}
.card::after {
content: ""; /* often empty, used for decoration */
display: block;
}Pseudo-ELEMENTS (note the DOUBLE colon
::) create and style a "virtual" element that isn't in your HTML. ::before inserts content at the very start of an element, ::after at the very end — without you writing any extra HTML. They're used for decorative icons, quote marks, custom bullet points, tooltips, overlay effects, and the old clearfix hack you saw earlier. The double colon distinguishes them from pseudo-classes (single colon), though browsers accept both. Think of ::before/::after as two free extra elements you get on everything, purely for styling and decoration.The content Property — the key to ::before/::after
.badge::before { content: "★ "; } /* text/symbol before */
.external::after { content: " ↗"; } /* arrow after a link */
.price::before { content: "₹"; } /* currency symbol */
.divider::after { content: ""; } /* empty, for shapes/lines */content is required for ::before and ::after to appear — without it, they don't render at all. It defines what the pseudo-element contains: a text string, a symbol, an icon, or an empty string "" (common when you only want a decorative box or line, styled with width/height/background). Useful patterns: adding a "↗" after external links, a "★" before featured items, a currency symbol before prices, or decorative shapes. Note: content added this way is decorative — screen readers may skip it — so never put ESSENTIAL text in content. Great for flourishes, not for meaning.Exam Corner
Q: What does a pseudo-class target? An element based on its state (like :hover) or position (like :nth-child).
Q: Why is :focus important? It shows users which input/button is active — essential for accessibility; don't remove it without a replacement.
Q: How do you style every even table row?
Q: What's the difference between :before and ::before? ::before (double colon) is a pseudo-element; the single-colon form is old syntax for the same thing.
Q: What property is required for ::before/::after to show? The content property (even if empty: content: "").
Q: Why is :focus important? It shows users which input/button is active — essential for accessibility; don't remove it without a replacement.
Q: How do you style every even table row?
tr:nth-child(even).Q: What's the difference between :before and ::before? ::before (double colon) is a pseudo-element; the single-colon form is old syntax for the same thing.
Q: What property is required for ::before/::after to show? The content property (even if empty: content: "").
Pseudo-classes क्या हैं
Pseudo-class element को उसकी STATE या POSITION के आधार पर target करता है, सिर्फ उसके type या class से नहीं. आप पहले से कई use कर चुके:
:hover (mouse ऊपर), :nth-child(even) (हर even), links chapter की link states. सब एक colon : से शुरू होते हैं. Pseudo-classes आपको चीज़ें conditionally style करने देते हैं — "जब hover हो," "जब यह पहला हो," "जब input focused हो" — अपने HTML में extra classes जोड़े बिना. यह chapter उन्हें जो आप मिल चुके एक साथ बांधता है और ज़रूरी बाकी जोड़ता है.State Pseudo-classes — hover, focus, और ज़्यादा
button:hover { background: #1e40af; } /* mouse upar hai */
input:focus { border-color: blue; } /* input selected/active */
button:active { transform: scale(0.97); } /* click hote samay */
input:disabled { opacity: 0.5; } /* disabled field */
:checked { } /* checked checkbox/radio */ये element को उसकी वर्तमान interactive state के आधार पर style करते हैं.
:hover आप अच्छे से जानते हैं. :focus accessibility और forms के लिए अहम है — यह input या button को style करता है जब वह selected हो (click किया या tab किया), ताकि users DEKH सकें वे कहां हैं; कभी focus styles बिना बदले मत हटाइए. :active click के दौरान fire होता है (तेज़ "press" effect के लिए बढ़िया). :disabled और :checked form elements को उनकी status से style करते हैं. साथ में ये forms और interactive elements को responsive तथा साफ महसूस कराते हैं — :focus खासकर वह है जिसे आपको हमेशा सोच-समझकर style करना चाहिए.Position Pseudo-classes — nth-child और साथी
li:first-child { font-weight: bold; } /* PEHLA li */
li:last-child { border: none; } /* AAKHRI li */
tr:nth-child(even) { background: #f9f9f9; } /* har even row (striping) */
li:nth-child(3) { color: red; } /* theek 3rd */
p:nth-child(odd) { } /* 1st, 3rd, 5th... */ये elements को siblings के बीच उनकी position से target करते हैं — lists, tables, और grids के लिए बेहद उपयोगी.
:first-child और :last-child पहला/आखिरी item पकड़ते हैं (trailing border हटाने, या पहली entry पर ज़ोर देने के लिए perfect). :nth-child() ताकतवर वाला है: tables zebra-striping के लिए even/odd (आप मिल चुके), specific position के लिए number, या हर तीसरे के लिए 3n जैसे formulas भी. यह आपको हर item में classes जोड़े बिना patterns style करने देता है — browser पता लगाता है कौन-से elements match करते हैं पूरी तरह उनके order के आधार पर.Pseudo-elements — ::before और ::after
.quote::before {
content: "\201C"; /* opening quote mark daalo */
font-size: 2em;
}
.card::after {
content: ""; /* aksar khali, decoration ke liye */
display: block;
}Pseudo-ELEMENTS (DOUBLE colon
:: ध्यान दीजिए) एक "virtual" element बनाते और style करते हैं जो आपके HTML में नहीं है. ::before element की बिल्कुल शुरुआत में content डालता है, ::after बिल्कुल अंत में — आपके कोई extra HTML लिखे बिना. ये decorative icons, quote marks, custom bullet points, tooltips, overlay effects, और वह पुराना clearfix hack जो आपने पहले देखा के लिए use होते हैं. Double colon इन्हें pseudo-classes (single colon) से अलग करता है, हालांकि browsers दोनों स्वीकार करते हैं. ::before/::after को हर चीज़ पर मिलने वाले दो free extra elements समझिए, पूरी तरह styling और decoration के लिए.content Property — ::before/::after की चाबी
.badge::before { content: "★ "; } /* pehle text/symbol */
.external::after { content: " ↗"; } /* link ke baad arrow */
.price::before { content: "₹"; } /* currency symbol */
.divider::after { content: ""; } /* khali, shapes/lines ke liye */content ::before और ::after के दिखने के लिए ज़रूरी है — इसके बिना वे बिल्कुल render नहीं होते. यह define करता है pseudo-element में क्या है: text string, symbol, icon, या खाली string "" (common जब आप सिर्फ decorative box या line चाहते हैं, width/height/background से styled). उपयोगी patterns: external links के बाद "↗" जोड़ना, featured items से पहले "★", prices से पहले currency symbol, या decorative shapes. Note: इस तरह जोड़ा content decorative है — screen readers इसे skip कर सकते हैं — तो कभी ZAROORI text content में मत डालिए. सजावट के लिए बढ़िया, अर्थ के लिए नहीं.Exam Corner
Q: Pseudo-class क्या target करता है? Element को उसकी state (जैसे :hover) या position (जैसे :nth-child) के आधार पर.
Q: :focus क्यों ज़रूरी है? यह users को दिखाता है कौन-सा input/button active है — accessibility के लिए ज़रूरी; बिना बदले मत हटाइए.
Q: हर even table row कैसे style करते हैं?
Q: :before और ::before में अंतर? ::before (double colon) pseudo-element है; single-colon रूप उसी चीज़ का पुराना syntax है.
Q: ::before/::after दिखने के लिए कौन-सी property ज़रूरी है? content property (खाली भी हो: content: "").
Q: :focus क्यों ज़रूरी है? यह users को दिखाता है कौन-सा input/button active है — accessibility के लिए ज़रूरी; बिना बदले मत हटाइए.
Q: हर even table row कैसे style करते हैं?
tr:nth-child(even).Q: :before और ::before में अंतर? ::before (double colon) pseudo-element है; single-colon रूप उसी चीज़ का पुराना syntax है.
Q: ::before/::after दिखने के लिए कौन-सी property ज़रूरी है? content property (खाली भी हो: content: "").
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.