CSS Pseudo-classes: Supercharge Your Web Styling 🎯

Welcome back to CodeYourCraft! Today, we're diving into the world of CSS Pseudo-classes. These magical tools can help you create engaging and interactive web pages. By the end of this tutorial, you'll be able to apply them like a pro! 💡

What are CSS Pseudo-classes? 📝

Pseudo-classes are special selectors in CSS that allow you to style elements based on their state or user interaction. Unlike normal selectors, they don't change the HTML structure but rather alter the presentation of the elements.

When to Use CSS Pseudo-classes? 📝

Pseudo-classes are essential for creating dynamic and interactive user interfaces. They help you style links on hover, activate buttons on click, and highlight form elements with errors, among other things.

Basic Pseudo-classes 💡

Let's start with the most common pseudo-classes:

:link 📝

Applies to unvisited links.

css

a:link {
  color: blue;
}

:visited 📝

Applies to links that have already been visited.

css

a:visited {
  color: purple;
}

:hover 💡

Applies when the user hovers over a link.

css

a:hover {
  color: red;
}

:active 💡

Applies when a link is being clicked.

css

a:active {
  color: green;
}

Advanced Pseudo-classes 💡

:focus 📝

Applies when an element has focus (usually through keyboard navigation).

css

input:focus {
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

:disabled 📝

Applies when an element is disabled.

css

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

:checked 💡

Applies when a checkbox or radio button is selected.

html

<input type="checkbox" id="myCheck" />
<label for="myCheck"> Check me! </label>

css

#myCheck:checked + label {
  text-decoration: line-through;
}

Quiz Time 🎯

Stay tuned for the next part, where we'll dive even deeper into CSS Pseudo-classes! 📝