MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever noticed how the first letter of a magazine article is giant and decorative, or how selecting text with your mouse turns it into a stylish brand color instead of standard dull blue? 🎨
Or how a quotation card automatically has quotation marks floating in the top corner without any extra HTML tags?
These visual superpowers are unlocked by Pseudo-classes and Pseudo-elements!
In this lesson, you will master:
:) and double colon (::):first-child vs :first-of-type (and why beginners get stuck):not() negation pseudo-class:valid and :invalid::before and ::after::selection and ::first-letterTo clearly distinguish pseudo-classes from pseudo-elements, imagine a School Student:
+-------------------------------------------------------------------------+ | PSEUDO-CLASS VS PSEUDO-ELEMENT | +-------------------------------------------------------------------------+ | PSEUDO-CLASS (Single Colon: :) --> THE STUDENT'S CURRENT STATE | | Describes a dynamic state or condition the student is currently in: | | - Student is raising their hand (:active) | | - Student is paying close attention to the board (:focus) | | - Student is on medical leave today (:disabled) | | - The student is the oldest sibling in the family (:first-child) | | | | PSEUDO-ELEMENT (Double Colon: ::) --> AN ACCESSORY PINNED ONTO THEM | | Creates a brand-new virtual piece attached to the student: | | - School Prefect Tie pinned in front of their collar (::before) | | - Heavy Sports Backpack slung behind their shoulders (::after) | | - The first letter written on their identity card (::first-letter) | +-------------------------------------------------------------------------+
:) vs Double Colon (::)The modern W3C CSS specification establishes a clear rule:
:): Represents a Pseudo-class (an element's state or structural position in the DOM).:hover, :focus, :checked, :first-child, :nth-child(2), :not().::): Represents a Pseudo-element (a virtual sub-part of an element that does not exist in the HTML DOM).::before, ::after, ::placeholder, ::selection, ::first-letter.:before). Modern browsers still support :before for backwards compatibility, but professional web developers always write ::before and ::after with double colons!:first-child vs :first-of-typeThis is one of the most famous traps in CSS:
Look at this HTML:
Why did it fail? Because :first-child asks: "Is this <p> the FIRST child of <article>?" No! The first child of <article> is <h2>, not <p>! So p:first-child selects nothing!
:first-of-type:first-child: Must be the absolute first child in the container.:first-of-type: Finds the first element of that specific tag type in the container!:not()The :not() selector allows you to apply styles to everything except elements matching a specific selector:
No more writing messy :last-child { border-bottom: none; } overrides!
:valid and :invalidModern HTML5 inputs know when their contents meet validation rules (like required fields or valid email formats). CSS can style them instantly:
::before and ::after::before inserts a virtual inline element immediately before the element's content, while ::after inserts one immediately after it.
A pseudo-element will not appear unless you declare the content: "" property, even if the string is empty!
+-------------------------------------------------------------+ | “ | | "Education is the most powerful weapon which you | | can use to change the world." | | - Nelson Mandela | +-------------------------------------------------------------+
::selection and ::first-letter::selection (Custom Text Highlight)Customizes what happens when a student drags their mouse cursor to select text on your website:
::first-letter (Newspaper Drop-Cap)Styles the very first letter of an article:
| Bad Practice ❌ | Why It Fails ⚠️ | Better Approach ✅ |
|---|---|---|
Writing p::before without content: "" | The pseudo-element will simply not be generated by the browser engine! | Always include content: ""; (even if empty). |
Using p:first-child when an <h1> comes first | Fails silently because p is the second child, not the first child. | Use p:first-of-type to reliably find the first paragraph. |
Using ::before or ::after on <img> or <input> | Replaced void elements do not have inner content trees where pseudo-elements can be inserted. | Apply ::before to a container <div> or <label> instead. |
Forgetting that ::selection only accepts color properties | Browsers restrict ::selection to color, background-color, and text-decoration for rendering performance. | Only set colors inside ::selection. |
:) selects elements based on state (:hover, :valid, :disabled) or DOM position (:first-of-type, :not()).::) creates virtual sub-parts (::before, ::after, ::selection, ::first-letter).:first-of-type finds the first element of that tag, avoiding the dreaded :first-child heading mismatch.:not(selector) excludes elements matching a specific condition without messy overrides.content: "" is strictly required for ::before and ::after to render.:) and a double colon (::)?p:first-child fail to style the paragraph in <article><h1>Title</h1><p>Text</p></article>?::before or ::after to render on screen?::before or ::after pseudo-elements directly to an HTML <img> tag?pseudo-mastery-lab.html.Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.