Pseudo-elements and Pseudo-classes

Question 1

Hover Effect

button:hover {
  background: blue;
  color: white;
}
<button>Hover Me</button>

Answer 1

Button turns blue when hovered.

Question 2

Style Every Other Row

tr:nth-child(odd) {
  background: lightgray;
}
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

Answer 2

Odd rows get a gray background.

Question 3

Style Only Checked Checkboxes

input:checked {
  accent-color: green;
}
<input type="checkbox" checked> Checked
<input type="checkbox"> Not Checked

Answer 3

Checked checkboxes turn green.

Question 4

Exclude Certain Elements

p:not(.special) {
  color: gray;
}
<p>This is normal.</p>
<p class="special">This is special.</p>

Answer 4

Only normal <p> elements turn gray.

Question 5

First Letter Styling

p::first-letter {
  font-size: 2em;
  color: red;
}
<p>This is a paragraph.</p>

Answer 5

The first letter of the paragraph is bigger and red.

Question 6

Inserting Content Before and After

h1::before {
  content: "🔥 ";
}

h1::after {
  content: " ⭐";
}
<h1>My Heading</h1>

Answer 6

Displays as 🔥 My Heading ⭐.

Question 7

Styling Selected Text

p::selection {
  background: yellow;
  color: black;
}
<p>Try selecting this text!</p>

Answer 7

Selected text highlights in yellow.

Question 8

Change First Letter Only When Hovered

p:hover::first-letter {
  color: blue;
  font-size: 2em;
}
<p>Hover over this text.</p>

Answer 8

The first letter turns blue only when hovered.

Question 9

Style the First Letter of First Child Paragraph

p:first-child::first-letter {
  font-size: 2em;
  color: red;
}
<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

Answer 9

Only the first letter of the first <p> is red.

Question 10

Add “🔗” Before External Links

a[href^="http"]:not([href*="mywebsite.com"])::before {
  content: "🔗 ";
  color: red;
}
<a href="https://google.com">Google</a>
<a href="https://mywebsite.com">My Website</a>

Answer 10

External links get a 🔗 icon, but internal links don’t.

Question 11

What is Pseudo-Element

Answer 11

(::)
Pseudo-elements allow you to style a specific part of an element, such as the first letter or inserting content.

Question 12

What is Pseudo-Classess?

Answer 12

(:)
Pseudo-classes act like “temporary classes” applied under specific conditions.

Question 13

Here are some examples of pseudo-classes:

Answer 13

:nth-child(n)
Targets an element based on position among siblings tr:nth-child(odd) { background: lightgray; }
:first-child
Targets the first child of a parent p:first-child { font-weight: bold; }
:last-child
Targets the last child of a parent li:last-child { color: red; }
:not(selector)
Excludes certain elements p:not(.special) { color: gray; }

Question 14

Here are some examples of psuedo-elements:

Answer 14

::first-letter
Styles the first letter of an element p::first-letter { font-size: 2em; }
::first-line
Styles the first line of an element p::first-line { font-weight: bold; }
::before
Inserts content before an element h1::before { content: "🔥 "; }
::after
Inserts content after an element h1::after { content: " ⭐"; }
::selection
Styles the text when selected p::selection { background: yellow; color: black; }