Class 035 — Pseudo Class & Pseudo Element
CSS Pseudo-Classes and Pseudo-Elements are powerful tools that allow you to style elements based on their state, position, user interaction, or specific parts of an element.
With them, you can create:
- Hover effects
- Focus effects
- Active button effects
- Special link states
- Form validation styles
- First and last item styles
- Alternating table rows
- Decorative elements
- Icons and badges
- Custom quotation marks
- Underline animations
- UI effects without adding unnecessary HTML
In this class, you will learn:
- What a Pseudo-Class is
- Pseudo-Class syntax
- :hover
- :focus
- :active
- :visited
- :first-child
- :last-child
- :nth-child()
- :not()
- :checked
- :disabled
- :required
- :valid
- :invalid
- What a Pseudo-Element is
- Pseudo-Element syntax
- ::before
- ::after
- ::first-letter
- ::first-line
- ::selection
- content property
- Practical UI effects
LEARNING OBJECTIVES
After completing this class, you will be able to:
- Understand CSS Pseudo-Classes.
- Understand CSS Pseudo-Elements.
- Explain the difference between them.
- Style elements according to user interaction.
- Create hover effects.
- Create focus and active states.
- Target elements based on their position.
- Use :nth-child().
- Style form states.
- Use ::before and ::after.
- Add decorative generated content.
- Create practical button, card and navigation effects.
WHAT IS A PSEUDO-CLASS?
A Pseudo-Class selects an element based on a particular state or condition.
Basic syntax:
selector:pseudo-class {
property: value;
}
Example:
button:hover {
background-color: blue;
}
:hover represents a state.
When the user points at the button with a mouse or another pointing device capable of hovering, the style can be applied.
WHY IS IT CALLED A PSEUDO-CLASS?
A normal class may look like:
.button {
color: white;
}
HTML: Buy Now
A Pseudo-Class does not require you to manually add another HTML class for a state.
Example:
.button:hover {
background-color: black;
}
The browser determines whether the element currently matches :hover.
:HOVER
:hover matches an element while the user designates it with a pointing device, commonly by placing the mouse pointer over it.
Example:
.button {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #1d4ed8;
}
HTML: Buy Now
When the user hovers over the button, its background changes.
HOVER ON LINKS
Example:
a {
color: #2563eb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
HOVER ON CARDS
Example:
.card {
padding: 30px;
border: 1px solid #dddddd;
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow:
0 10px 25px
rgba(0, 0, 0, 0.15);
}
This creates an interactive card effect.
IMPORTANT NOTE ABOUT HOVER
Do not make essential functionality depend only on :hover.
Touchscreen users may not have the same hover interaction as desktop mouse users.
Hover should usually enhance the experience rather than be the only way to access important information.
:FOCUS
:focus matches an element when it has focus.
This is extremely important for:
- Forms
- Keyboard navigation
- Accessibility
- Buttons
- Links
- Input fields
Example:
input:focus {
border-color: #2563eb;
outline: 2px solid #2563eb;
}
When the input receives focus, the style appears.
PRACTICAL INPUT FOCUS
HTML:
<input
type=”text”
placeholder=”Enter your name”
CSS:
input {
padding: 12px;
border: 1px solid #cccccc;
}
input:focus {
border-color: #2563eb;
outline:
2px solid
rgba(37, 99, 235, 0.3);
}
ACCESSIBILITY WARNING
Avoid doing this without providing an alternative:
input:focus {
outline: none;
}
Removing the focus indicator can make keyboard navigation difficult.
If you remove the browser’s default outline, provide another clearly visible focus style.
:FOCUS-VISIBLE
Modern CSS also provides:
:focus-visible
Example:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}
This is especially useful for creating visible keyboard-focus indicators.
:ACTIVE
:active matches an element while it is being activated.
For example, while a button is being pressed.
Example:
.button:active {
transform: scale(0.97);
}
This can create a pressed-button effect.
COMPLETE BUTTON EXAMPLE
.button {
padding: 12px 24px;
background-color: #2563eb;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
.button:hover {
background-color: #1d4ed8;
}
.button:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}
.button:active {
transform: scale(0.97);
}
:LINK AND :VISITED
Links can have different states.
Example:
a:link {
color: blue;
}
a:visited {
color: purple;
}
:link
matches unvisited links.
:visited
matches links that the browser considers visited.
IMPORTANT PRIVACY NOTE
Browsers restrict some styles that can be used with :visited for privacy reasons.
Therefore, do not expect every CSS property to work normally with :visited.
LINK STATE ORDER
A traditional way to remember link states is:
:link
:visited
:hover
:active
Example:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
:FIRST-CHILD
:first-child selects an element when it is the first child of its parent and matches the selector.
Example:
li:first-child {
font-weight: bold;
}
HTML:
HTML becomes bold because the first li is the first child.
:LAST-CHILD
Example:
li:last-child {
color: red;
}
This targets an li that is the last child of its parent.
:NTH-CHILD()
:nth-child() allows you to select elements according to their position among siblings.
Example:
li:nth-child(2) {
color: blue;
}
This selects an li that is the second child.
ODD ITEMS
Example:
li:nth-child(odd) {
background-color: #f1f5f9;
}
EVEN ITEMS
Example:
li:nth-child(even) {
background-color: #e2e8f0;
}
TABLE STRIPING
HTML:
<tr>
<td>Product 1</td>
<td>৳1000</td>
</tr>
<tr>
<td>Product 2</td>
<td>৳2000</td>
</tr>
<tr>
<td>Product 3</td>
<td>৳3000</td>
</tr>CSS:
tr:nth-child(even) {
background-color: #f1f5f9;
}
This creates alternating row styles.
NTH-CHILD FORMULA
You can use formulas inside :nth-child().
Example:
.item:nth-child(3n) {
background-color: yellow;
}
This matches every third qualifying item according to sibling position.
Another example:
.item:nth-child(2n) {
background-color: #f1f5f9;
}
This targets even positions.
:NTH-OF-TYPE()
Another useful selector is:
:nth-of-type()
Example:
p:nth-of-type(2) {
color: blue;
}
This selects the second p element among sibling p elements.
:NTH-CHILD VS NTH-OF-TYPE
:nth-child()
checks the element’s position among all sibling elements and whether it matches the selector.
:nth-of-type()
counts siblings of the same element type.
Understanding this difference prevents many selector mistakes.
:NOT()
:not() is the negation pseudo-class.
Example:
button:not(.primary) {
background-color: gray;
}
This matches buttons that do not have the primary class.
Another example:
.nav a:not(.active) {
color: gray;
}
:CHECKED
:checked matches checked checkboxes and radio buttons, and selected option elements where applicable.
Example:
input[type=”checkbox”]:checked {
accent-color: green;
}
HTML:
<input
type=”checkbox”
id=”terms” Accept Terms
You can also combine :checked with other selectors.
Example:
input:checked + label {
font-weight: bold;
}
:DISABLED
Example:
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
HTML: Submit
The style is automatically applied because the button is disabled.
:ENABLED
Example:
button:enabled {
cursor: pointer;
}
:REQUIRED
Example:
input:required {
border-left: 4px solid orange;
}
HTML:
<input
type=”email”
required
The required field can receive a special style.
:VALID
Example:
input:valid {
border-color: green;
}
This matches an input when its value satisfies applicable validation constraints.
:INVALID
Example:
input:invalid {
border-color: red;
}
PRACTICAL FORM EXAMPLE
HTML:
<label for="email">
Email
</label>
<input
id="email"
type="email"
required
>
<button type="submit">
Submit
</button>CSS:
input {
padding: 12px;
border: 2px solid #cccccc;
}
input:focus {
border-color: #2563eb;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
IMPORTANT VALIDATION NOTE
A required empty field may already match :invalid.
Therefore, real form design should consider when validation feedback should appear so users are not shown an error before they have meaningfully interacted with a field.
WHAT IS A PSEUDO-ELEMENT?
A Pseudo-Element allows you to style a specific part of an element or create generated content associated with an element.
Basic syntax:
selector::pseudo-element {
property: value;
}
Example:
p::first-letter {
font-size: 40px;
}
PSEUDO-CLASS VS PSEUDO-ELEMENT
Pseudo-Class:
Targets a state or condition of an element.
Example:
button:hover
Pseudo-Element:
Targets a specific part of an element or creates a generated pseudo-element.
Example:
p::first-letter
or:
.button::before
SYNTAX DIFFERENCE
Pseudo-Class commonly uses one colon:
:hover
:focus
:nth-child()
Pseudo-Element uses two colons in modern CSS syntax:
::before
::after
::first-letter
::first-line
You may see older code using:
:before
:after
Modern CSS convention is:
::before
::after
::BEFORE
::before creates a generated pseudo-element as the first child of the selected element.
Example:
.title::before {
content: “★”;
margin-right: 8px;
}
HTML:
Featured Product
Visual result:
★ Featured Product
CONTENT PROPERTY
For ::before and ::after, the content property is fundamental.
Example:
.title::before {
content: “New”;
}
Without appropriate content, ::before and ::after may not generate a visible pseudo-element.
EMPTY CONTENT
For purely decorative shapes, you can use:
content: “”;
Example:
.box::before {
content: “”;
width: 10px;
height: 10px;
background-color: red;
}
::AFTER
::after creates a generated pseudo-element as the last child of the selected element.
Example:
.price::after {
content: ” BDT”;
}
HTML: 25000
Visual result:
25000 BDT
IMPORTANT NOTE
Generated content should generally not be used as the only place for essential information.
Important content should remain in the HTML.
DECORATIVE UNDERLINE WITH ::AFTER
HTML:
Our Services
CSS:
.heading {
position: relative;
display: inline-block;
}
.heading::after {
content: “”;
position: absolute;
left: 0;
bottom: -8px;
width: 60px;
height: 3px;
background-color: #2563eb;
}
This creates a decorative line below the heading.
HOVER ANIMATION WITH ::AFTER
HTML: Home
CSS:
.nav-link {
position: relative;
text-decoration: none;
color: #111827;
}
.nav-link::after {
content: “”;
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s;
}
.nav-link:hover::after {
width: 100%;
}
Here two concepts work together:
:hover
and
::after
This creates an animated underline effect.
::FIRST-LETTER
::first-letter styles the first letter of the first formatted line of a block container when applicable.
Example:
.article p::first-letter {
font-size: 48px;
font-weight: bold;
color: #2563eb;
}
This can create a magazine-style drop-cap effect.
::FIRST-LINE
::first-line styles the first formatted line of a block container.
Example:
.article p::first-line {
font-weight: bold;
color: #1e40af;
}
The exact amount of text included in the first line depends on factors such as:
- Container width
- Font
- Font size
- Screen size
::SELECTION
::selection styles the portion of text selected by the user.
Example:
::selection {
background-color: #2563eb;
color: white;
}
When users select text, the selected area uses these styles where supported.
BADGE WITH ::BEFORE
HTML:
Laptop
CSS:
.product {
position: relative;
padding: 30px;
border: 1px solid #dddddd;
}
.product::before {
content: “SALE”;
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: red;
color: white;
border-radius: 20px;
font-size: 12px;
}
This creates a visual SALE badge without adding another HTML element.
DECORATIVE QUOTATION MARK
HTML:
Learning never stops.
CSS:
.quote {
position: relative;
padding-left: 40px;
}
.quote::before {
content: ““”;
position: absolute;
left: 0;
top: -10px;
font-size: 60px;
line-height: 1;
}
PSEUDO-ELEMENT WITH POSITION ABSOLUTE
A common pattern is:
.element {
position: relative;
}
.element::before {
content: “”;
position: absolute;
}
Why?
Because the pseudo-element can then be positioned relative to the parent element.
BUTTON SHINE EFFECT
HTML: Buy Now
CSS:
.button {
position: relative;
overflow: hidden;
padding: 12px 24px;
border: none;
background-color: #2563eb;
color: white;
}
.button::before {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background:
rgba(255, 255, 255, 0.2);
transition: left 0.3s;
}
.button:hover::before {
left: 100%;
}
This creates a simple decorative movement across the button.
PRACTICAL NAVIGATION
HTML:
<a href="#" class="active">
Home
</a>
<a href="#">
Courses
</a>
<a href="#">
Blog
</a>
<a href="#">
Contact
</a>CSS:
.nav {
display: flex;
gap: 24px;
}
.nav a {
position: relative;
color: #111827;
text-decoration: none;
}
.nav a::after {
content: “”;
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s;
}
.nav a:hover::after,
.nav a.active::after {
width: 100%;
}
COMBINING PSEUDO-CLASSES AND PSEUDO-ELEMENTS
You can combine them.
Example:
.card:hover::before {
opacity: 1;
}
Here:
:hover
is the Pseudo-Class.
::before
is the Pseudo-Element.
Another example:
.button:hover::after {
width: 100%;
}
PRACTICAL CARD EFFECT
HTML:
<h2>
Web Development
</h2>
<p>
Learn HTML, CSS and JavaScript.
</p>CSS:
.card {
position: relative;
padding: 30px;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 12px;
}
.card::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #2563eb;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.card:hover::before {
transform: scaleX(1);
}
This creates an animated top border effect.
FULL PRACTICAL EXAMPLE
HTML:
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>
Pseudo Class and Pseudo Element
</title>
<link
rel="stylesheet"
href="style.css"
><nav class="nav">
<a href="#">
Home
</a>
<a href="#">
Courses
</a>
<a href="#">
About
</a>
<a href="#">
Contact
</a>
</nav>
<main>
<section class="services">
<article class="card">
<h2>
Web Development
</h2>
<p>
Learn modern web development.
</p>
<button>
Learn More
</button>
</article>
<article class="card">
<h2>
SEO
</h2>
<p>
Learn search engine optimization.
</p>
<button>
Learn More
</button>
</article>
<article class="card">
<h2>
Digital Marketing
</h2>
<p>
Learn digital marketing.
</p>
<button>
Learn More
</button>
</article>
</section>
</main>CSS:
- {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
Arial,
sans-serif;
}
.nav {
display: flex;
justify-content: center;
gap: 30px;
padding: 24px;
}
.nav a {
position: relative;
color: #111827;
text-decoration: none;
}
.nav a::after {
content: “”;
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s;
}
.nav a:hover::after {
width: 100%;
}
.services {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 24px;
padding: 80px 5%;
}
.card {
position: relative;
padding: 30px;
border: 1px solid #dddddd;
border-radius: 12px;
transition: 0.3s;
}
.card::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #2563eb;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card:hover::before {
transform: scaleX(1);
}
.card button {
padding: 10px 20px;
border: none;
background-color: #2563eb;
color: white;
cursor: pointer;
}
.card button:hover {
background-color: #1d4ed8;
}
.card button:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}
.card button:active {
transform: scale(0.97);
}
CODE EXPLANATION
.nav a:hover::after
combines a Pseudo-Class and Pseudo-Element.
:hover
checks the interaction state.
::after
creates the generated decorative element.
.card::before
creates the decorative top line.
.card:hover::before
changes the pseudo-element when the card is hovered.
button:focus-visible
provides a visible focus indicator, especially useful for keyboard navigation.
button:active
creates feedback while the button is being activated.
COMMON MISTAKES
- CONFUSING PSEUDO-CLASS WITH PSEUDO-ELEMENT
Pseudo-Class:
:hover
Pseudo-Element:
::before
- USING TWO COLONS FOR A PSEUDO-CLASS
Wrong:
button::hover
Correct:
button:hover
- FORGETTING CONTENT WITH ::BEFORE OR ::AFTER
Wrong:
.box::before {
width: 20px;
height: 20px;
}
Correct:
.box::before {
content: “”;
width: 20px;
height: 20px;
}
- REMOVING FOCUS OUTLINE WITHOUT REPLACEMENT
Avoid:
button:focus {
outline: none;
}
unless you provide another clear focus indicator.
- DEPENDING ONLY ON HOVER
Mobile and touchscreen users may not interact with hover in the same way.
Do not hide essential functionality behind hover only.
- CONFUSING :NTH-CHILD() WITH :NTH-OF-TYPE()
:nth-child()
uses sibling position.
:nth-of-type()
counts siblings of the same element type.
- PUTTING ESSENTIAL INFORMATION ONLY IN GENERATED CONTENT
Do not use ::before or ::after as the only source of critical information.
Keep important content in HTML.
- FORGETTING POSITION: RELATIVE
If an absolutely positioned ::before or ::after should be positioned relative to a particular element, that element commonly needs:
position: relative;
- USING :VISITED FOR COMPLEX DESIGN CHANGES
Browsers restrict :visited styling for privacy.
Use it primarily for appropriate link-state indication.
- SHOWING INVALID FORM STYLES TOO EARLY
A required empty field can already be invalid.
Design validation feedback carefully.
NEW & DIFFICULT WORDS
Pseudo-Class = CSS selector keyword representing an element’s state or structural condition.
Pseudo-Element = CSS selector feature used to style a specific part of an element or generated pseudo-element.
Hover = State where a pointing device designates an element.
Focus = State where an element has input or keyboard focus.
Active = State while an element is being activated.
Visited = State associated with a previously visited link.
First Child = Element matching a selector that is also the first child of its parent.
Last Child = Element matching a selector that is also the last child of its parent.
nth-child() = Functional pseudo-class selecting elements according to sibling position.
nth-of-type() = Functional pseudo-class selecting elements according to position among siblings of the same element type.
Checked = State of a selected checkbox or radio control.
Disabled = State of a disabled form control.
Required = State of a form control that must receive a value.
Valid = State where applicable validation constraints are satisfied.
Invalid = State where applicable validation constraints are not satisfied.
::before = Generated pseudo-element inserted as the first child of an element.
::after = Generated pseudo-element inserted as the last child of an element.
::first-letter = Pseudo-element targeting the first letter under applicable formatting conditions.
::first-line = Pseudo-element targeting the first formatted line.
::selection = Pseudo-element representing user-selected text.
Generated Content = Content produced through CSS rather than written directly as normal HTML content.
Negation = Excluding elements that match a specified condition.
Accessibility = Designing websites so they can be used by people with different abilities and interaction methods.
IMPORTANT NOTES
Pseudo-Class syntax:
selector:pseudo-class {
property: value;
}
Pseudo-Element syntax:
selector::pseudo-element {
property: value;
}
Hover:
button:hover {
background-color: blue;
}
Focus:
input:focus {
border-color: blue;
}
Active:
button:active {
transform: scale(0.97);
}
First child:
li:first-child {
font-weight: bold;
}
Nth child:
li:nth-child(2) {
color: blue;
}
Before:
.title::before {
content: “★”;
}
After:
.title::after {
content: “”;
}
Most important difference:
Pseudo-Class
= State or condition
Pseudo-Element
= Specific part or generated pseudo-element
PRACTICE
- Create a button with :hover.
- Add :active to the button.
- Add a visible focus style.
- Create a link hover effect.
- Test :link.
- Test :visited.
- Select the first list item.
- Select the last list item.
- Use :nth-child(2).
- Use :nth-child(odd).
- Use :nth-child(even).
- Create alternating table rows.
- Test :not().
- Style a checked checkbox.
- Style a disabled button.
- Create required input styling.
- Test :valid and :invalid.
- Add an icon using ::before.
- Add decorative content using ::after.
- Create an animated navigation underline.
- Style the first letter of a paragraph.
- Style the first line of a paragraph.
- Customize ::selection.
- Create a card hover effect using ::before.
- Combine :hover and ::after.
ASSIGNMENT
Create a webpage called:
Pseudo Class & Pseudo Element Practice
The webpage should contain:
- Navigation menu
- Buttons
- Form
- List
- Table
- Product cards
- Article
- Footer
Requirements:
- Use :hover.
- Use :focus or :focus-visible.
- Use :active.
- Use :first-child.
- Use :last-child.
- Use :nth-child().
- Use :not().
- Use :checked.
- Use :disabled.
- Use :required.
- Use ::before.
- Use ::after.
- Use ::first-letter.
- Use ::first-line.
- Use ::selection.
- Create at least one animated pseudo-element effect.
MINI PROJECT
Create a professional navigation and card section.
HTML:
<a href="#">
Home
</a>
<a href="#">
Courses
</a>
<a href="#">
Blog
</a>
<a href="#">
Contact
</a><article class="card">
<h2>
HTML
</h2>
<p>
Learn professional HTML.
</p>
<button>
Start Learning
</button>
</article>
<article class="card">
<h2>
CSS
</h2>
<p>
Learn professional CSS.
</p>
<button>
Start Learning
</button>
</article>CSS:
.navbar {
display: flex;
gap: 24px;
}
.navbar a {
position: relative;
color: #111827;
text-decoration: none;
}
.navbar a::after {
content: “”;
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s;
}
.navbar a:hover::after {
width: 100%;
}
.cards {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 24px;
}
.card {
position: relative;
padding: 30px;
border: 1px solid #dddddd;
border-radius: 12px;
overflow: hidden;
}
.card::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #2563eb;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.card:hover::before {
transform: scaleX(1);
}
.card button:hover {
background-color: #1d4ed8;
}
.card button:active {
transform: scale(0.97);
}
QUIZ
- What is a Pseudo-Class?
Answer:
A Pseudo-Class represents a state or structural condition used to select an element.
- What is a Pseudo-Element?
Answer:
A Pseudo-Element styles a specific part of an element or represents generated content associated with it.
- Which syntax is correct for hover?
Answer:
button:hover
- Which syntax is correct for before?
Answer:
.element::before
- What does :focus do?
Answer:
It matches an element when that element has focus.
- What does :active represent?
Answer:
It represents an element while it is being activated.
- What does :nth-child() do?
Answer:
It selects elements according to their sibling position when they also match the selector.
- What does :checked select?
Answer:
It selects checked form controls such as checked checkboxes and radio buttons.
- What property is commonly required with ::before and ::after?
Answer:
content
- What does ::first-letter target?
Answer:
It styles the first letter under the conditions where ::first-letter applies.
- What does ::selection style?
Answer:
Text or content currently selected by the user where supported.
- Can Pseudo-Classes and Pseudo-Elements be combined?
Answer:
Yes.
Example:
.card:hover::before
INTERVIEW QUESTIONS
Q: What is the difference between a Pseudo-Class and a Pseudo-Element?
Answer:
A Pseudo-Class selects an element based on a state or structural condition, while a Pseudo-Element targets a particular part of an element or creates generated content.
Q: What is :hover?
Answer:
:hover matches an element while the user designates it with a pointing device that supports hovering.
Q: What is :focus?
Answer:
:focus matches an element when it currently has focus.
Q: Why is :focus-visible useful?
Answer:
It helps provide visible focus styling, particularly for keyboard interaction, without necessarily showing the same focus indicator for every pointer interaction.
Q: What is :nth-child()?
Answer:
:nth-child() is a structural pseudo-class that matches elements according to their position among siblings.
Q: What is the difference between :nth-child() and :nth-of-type()?
Answer:
:nth-child() evaluates sibling position generally, while :nth-of-type() counts siblings of the same element type.
Q: What are ::before and ::after?
Answer:
They are generated pseudo-elements that can be used for decoration, icons, labels and other non-essential visual content.
Q: Why is content used with ::before and ::after?
Answer:
The content property defines the generated content and is commonly necessary for those pseudo-elements to generate a visible box or text.
Q: Can ::before and ::after replace important HTML content?
Answer:
They should generally not be the sole source of essential information. Important semantic content should remain in HTML.
Q: How can you create an animated underline?
Answer:
Create an ::after pseudo-element with an initial width of 0 and change it to 100% on :hover.
CLASS SUMMARY
In Class 35, you learned CSS Pseudo-Class & Pseudo-Element.
You learned:
- :hover
- :focus
- :focus-visible
- :active
- :link
- :visited
- :first-child
- :last-child
- :nth-child()
- :nth-of-type()
- :not()
- :checked
- :enabled
- :disabled
- :required
- :valid
- :invalid
- ::before
- ::after
- ::first-letter
- ::first-line
- ::selection
- content
- Generated content
- Hover effects
- Form states
- Navigation underline effects
- Decorative pseudo-elements
Remember:
Pseudo-Class
= State or condition
Example:
button:hover
Pseudo-Element
= Specific part or generated pseudo-element
Example:
button::before
Combined example:
.button:hover::after {
width: 100%;
}
These selectors are extremely useful for creating interactive and professional interfaces while keeping HTML cleaner.
NEXT CLASS:
Class 036 — CSS Transitions