CSS Pseudo-Classes

Introduction

In the world of web development, CSS (Cascading Style Sheets) is a powerful tool for styling HTML elements. However, sometimes you want to style elements based on their state or position within the document. This is where pseudo-classes come into play. Pseudo-classes allow you to apply styles to elements that are in a specific state, such as being hovered over, focused, or checked.

Concept

Pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). They start with a colon (:) followed by the name of the pseudo-class. For example, :hover targets elements when they are being hovered over by a mouse pointer.

Here are some common pseudo-classes:

• :hover: Applies styles when an element is hovered over.
• :focus: Applies styles when an element has focus (e.g., when selected via keyboard navigation).
• :active: Applies styles when an element is being activated, such as during a mouse click.
• :checked: Applies styles to checked form elements like radio buttons or checkboxes.
• :first-child: Applies styles to the first child of its parent.
• :last-child: Applies styles to the last child of its parent.

Examples

Let's explore some practical examples to understand how pseudo-classes work.

Example 1: Hover Effect

Suppose you want to change the background color of a button when it is hovered over. You can use the :hover pseudo-class for this purpose.

1button {
2background-color: blue;
3color: white;
4padding: 10px 20px;
5border: none;
6cursor: pointer;
7}
8 
9button:hover {
10background-color: darkblue;
11}

In this example, the button's background color changes to darkblue when it is hovered over. The cursor: pointer; property changes the mouse cursor to a pointer, indicating that the element is clickable.

Example 2: Focus Effect

You can also style elements based on whether they have focus. For instance, you might want to highlight an input field when it is focused.

1input {
2padding: 8px;
3border: 1px solid #ccc;
4}
5 
6input:focus {
7border-color: blue;
8outline: none; /* Remove default outline */
9}

Here, the input field's border color changes to blue when it is focused. The outline: none; property removes the default focus outline for a cleaner look.

Example 3: Checked State

For form elements like checkboxes or radio buttons, you can use the :checked pseudo-class to style them based on their checked state.

1<label>
2<input type="checkbox" id="check1">
3Check me
4</label>
5 
6<style>
7input[type="checkbox"] {
8  display: none;
9}
10 
11input[type="checkbox"]:checked + label::before {
12  content: '✓';
13  color: green;
14  padding-right: 5px;
15}
16</style>

In this example, the checkbox is hidden using display: none;, and a custom checkmark (✓) is displayed next to the label when the checkbox is checked. The ::before pseudo-element is used to insert content before the label.

What's Next?

Now that you have a good understanding of CSS pseudo-classes, you might want to explore more advanced topics like pseudo-elements or transitions and animations. Additionally, learning about HTML doctype declarations can help ensure your web pages render correctly across different browsers.

Stay tuned for more tutorials on "codingstuff.io"!