From 5ce7e15ed7ad3e77c38e78d84948ba115474f521 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Fri, 24 Oct 2025 14:28:27 +0530 Subject: [PATCH] feat(curriculum): Added interactive examples to User Action Pseudo-classes lesson (#62976) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Thank you for your contribution to the page! 👍 We are happy to accept these changes and look forward to future contributions. 🎉 --- .../672bbe9171a5cca90f2edeea.md | 92 ++++++++++++++++--- 1 file changed, 78 insertions(+), 14 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md index 7a859d3e93d..178a03a9083 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-examples-of-element-user-action-pseudo-classes --- -# --description-- +# --interactive-- User feedback is a crucial element of web design. For instance, it's important for users to receive visual cues when they interact with elements on a website, such as hovering over a button or clicking a link. This feedback helps users understand the state of interactive elements, like indicating whether a link has been visited or not. @@ -17,20 +17,30 @@ Let's dive into some of the user action pseudo-classes we have and see how they The `:active` pseudo-class applies styles when an element is activated by the user. For example, when the user clicks a button or a link, it provides immediate visual feedback, showing users that their actions are being recognized. +:::interactive_editor + +```html + +Example link +``` + ```css a:active { color: crimson; } ``` +::: + The `:hover` pseudo-class is triggered when a user hovers over an element with their mouse or other pointing device. Developers often use it to create visual feedback for buttons, links, or any element that should respond to user attention. Here's a button a user would hover over before clicking: +:::interactive_editor + ```html + ``` -Here's the CSS that changes the color, background color, and cursor of the button once the user hovers over it: - ```css .btn:hover { background-color: darkgreen; @@ -39,18 +49,21 @@ Here's the CSS that changes the color, background color, and cursor of the butto } ``` +::: + The `:focus` pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input. This is not just for feedback but also crucial for accessibility. It ensures that users who rely heavily on keyboards can easily identify which element they are interacting with. -Here's an input element inside a form element: +Here's an example of an input field that gains focus when clicked or navigated to via the keyboard: + +:::interactive_editor ```html +
``` -Here's the CSS that gives the input a solid dark green border and a `border-radius` when the user clicks into it: - ```css input:focus { outline: 2px solid darkgreen; @@ -58,36 +71,87 @@ input:focus { } ``` +::: + The `:visited` pseudo-class targets a link the user has visited. This can be useful for helping users distinguish between pages they have already visited and the ones they are yet to visit. Here is an example of changing the anchor text color to cyan when the link is visited: +:::interactive_editor + +```html + +Visit Example.com +``` + ```css a:visited { color: cyan; } ``` +::: + The `:checked` pseudo-class in CSS allows you to style form elements such as checkboxes and radio buttons when they are selected (checked). This pseudo-class is useful for customizing the appearance of these elements to enhance user experience, even though browsers provide default styles for them. -Here's the kind of checkbox you usually check to agree to terms on a website: +Here is an example with a checkbox to agree to terms on a website. + +**NOTE**: Some of the CSS in this example uses properties that haven't been covered yet. This is just to give you an idea of how to create a custom checkbox. You will learn how all of this works in future lessons and workshops. + +:::interactive_editor ```html +
+
``` -Here's how you can use the `:checked` pseudo-class to indicate to the user that it is checked: - ```css -.checkbox:checked { +.checkbox { appearance: none; - width: 12px; - height: 12px; - background-color: red; + width: 18px; + height: 18px; + border: 2px solid #ccc; + border-radius: 4px; + display: inline-block; + position: relative; + cursor: pointer; + transition: all 0.25s ease; + vertical-align: middle; } + +.checkbox:hover { + border-color: #888; +} + +.checkbox:checked { + background-color: #4caf50; + border-color: #4caf50; +} + +.checkbox:checked::after { + content: ""; + position: absolute; + left: 4px; + top: 0px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.checkbox:focus { + outline: 2px solid #90caf9; + outline-offset: 2px; +} + ``` -In this example, we are using the `appearance` property set to `none` to remove the default styling applied by the browser to checkbox inputs. When the user checks the box, it will have a background color of `red`. +::: + +In this example, we are using the `appearance` property set to `none` to remove the default styling applied by the browser to checkbox inputs. When the user checks the box, it will have a background color of `green`. Other examples of action pseudo-classes are: