Master CSS Pseudo-Classes: 50 Mini-Projects

Basic Pseudo-Classes

1. Interactive Navigation Menu

Project: Create a navigation menu where links change appearance on hover, active, and visited states. Instructions:

Design a horizontal navigation menu with 5 links
Style :hover to change background color and text color
Use :active to create a "pressed" effect
Style :visited links differently from unvisited links
Add a smooth transition between states

2. Form Input Focus Effects

Project: Build a contact form with dynamic focus states. Instructions:

Create a simple contact form with name, email, and message fields
Use :focus to highlight the active input field
Add a border animation when an input receives focus
Change the label color when its associated input is focused
Reset styles when focus is lost

3. Link States Showcase

Project: Create a demonstration page showing all link states. Instructions:

Create sections for each link state (:link, :visited, :hover, :active)
Style each state with distinct visual cues
Add explanatory text for each state
Include examples showing the states in context

4. First-Child Header Effects

Project: Build a blog layout with special styling for the first header. Instructions:

Create a blog post template with multiple headers
Use :first-child to style the first heading differently
Apply special typography, size, and decoration to the first heading
Create a visual hierarchy that emphasizes the first heading

5. Last-Child Footer Elements

Project: Design a footer where the last element has special styling. Instructions:

Create a multi-column footer with various elements
Use :last-child to style the last element differently
Add a different background, border, or spacing to the last item
Ensure responsive behavior maintains the special styling

Structural Pseudo-Classes

6. Zebra Striping Table Rows

Project: Create a data table with alternating row colors. Instructions:

Build a table with at least 10 rows of data
Use :nth-child(even) and :nth-child(odd) to create zebra striping
Add hover effects for better row identification
Style header row differently using :first-child

7. Prime-Numbered List Items

Project: Design a numbered list where prime-numbered items have special styling. Instructions:

Create a list with at least 20 items
Use :nth-child(2), :nth-child(3), :nth-child(5), etc. to style prime-numbered items
Add a distinct visual identifier for prime numbers
Include an explanation of the pattern

8. Calendar Layout with Current Day Highlight

Project: Build a monthly calendar with special styling for today's date. Instructions:

Create a grid-based calendar layout
Use :nth-child() to style weekends differently
Add a unique style for the current date
Include hover effects for all calendar days

9. Photo Gallery with Featured Images

Project: Create an image gallery where every third image is featured. Instructions:

Build a responsive grid of 12+ images
Use :nth-child(3n) to make every third image larger
Add different hover effects for regular vs. featured images
Ensure the layout is responsive across device sizes

10. Article Cards with Even/Odd Styling

Project: Design a list of article cards with alternating layouts. Instructions:

Create 6+ article cards with image, title, and excerpt
Use :nth-child(odd) to align images on the left
Use :nth-child(even) to align images on the right
Add different color accents for odd vs. even cards

11. Team Member Grid with Row-Based Styling

Project: Build a team directory with different styling per row. Instructions:

Create a grid of team members with photos and info
Use :nth-child(3n+1), :nth-child(3n+2), and :nth-child(3n+3) for different row styles
Apply different background colors or borders per row
Maintain consistent styling when viewed on different devices

12. Only-Child Special Case

Project: Create a component that changes style when it contains only one child. Instructions:

Build a container that can hold variable numbers of items
Use :only-child to apply special styling when only one item exists
Create a demo showing the difference between multiple children vs. only child
Include interactive controls to add/remove items

13. First-of-Type Section Highlights

Project: Design a page where the first occurrence of each content type has special styling. Instructions:

Create a page with multiple paragraphs, images, lists, and quotes
Use :first-of-type to style the first occurrence of each element type
Apply distinct visual treatments for each first element
Add explanatory notes about how the selector works

14. Last-of-Type Section Footers

Project: Build a layout where the last instance of each section type has a special footer. Instructions:

Create multiple sections with different content types
Use :last-of-type to add special footers to the last instance of each type
Style the footers with distinct visual treatments
Explain the difference between :last-child and :last-of-type

Form Pseudo-Classes

15. Form Validation Visual Feedback

Project: Create a form with visual cues for valid and invalid inputs. Instructions:

Build a registration form with various input types
Use :valid and :invalid to provide real-time visual feedback
Style valid inputs with green accents and checkmarks
Style invalid inputs with red accents and error icons
Add helpful tooltips explaining validation requirements

16. Required Field Indicators

Project: Design a form that visually indicates which fields are required. Instructions:

Create a form with both optional and required fields
Use :required to automatically style required fields
Add visual indicators (asterisks, text, icons) to required fields
Use :optional to style optional fields differently

17. Checkbox and Radio Button Customization

Project: Build custom-styled checkboxes and radio buttons. Instructions:

Create a form with multiple checkboxes and radio groups
Use :checked to create custom-styled selected states
Design visually appealing replacements for default browser styles
Ensure accessibility is maintained with proper focus states

18. Disabled Form Elements

Project: Create a form demonstrating proper styling for disabled elements. Instructions:

Build a form with some disabled fields
Use :disabled to style disabled elements appropriately
Create visual cues that clearly indicate which elements can't be used
Include a toggle to enable/disable fields for demonstration

19. Read-Only vs. Editable Fields

Project: Design a form that distinguishes between editable and read-only fields. Instructions:

Create a form with both editable and read-only fields
Use :read-only and :read-write to style fields appropriately
Apply distinct visual treatments to indicate which fields can be edited
Include explanations of when to use read-only fields

20. In-Range and Out-of-Range Feedback

Project: Build a form with number inputs that show when values are in/out of range. Instructions:

Create number inputs with min/max attributes
Use :in-range and :out-of-range to provide visual feedback
Style out-of-range values with warning colors and icons
Add explanatory text describing the acceptable ranges

21. Form Placeholder Styling

Project: Design form fields with custom-styled placeholders. Instructions:

Create a form with various input types using placeholders
Use ::placeholder to style placeholder text
Apply custom colors, fonts, and opacity to placeholders
Create a cohesive design that enhances usability

22. Focus-Within Form Groups

Project: Build form groups that highlight when any child element is focused. Instructions:

Create logical form groups with labels and inputs
Use :focus-within to highlight the entire group when any child has focus
Style the parent container with a subtle background or border change
Explain the difference between :focus and :focus-within

Advanced Selectors

23. Target Section Navigation

Project: Create a single-page site with sections that highlight when targeted with URL fragments. Instructions:

Build a page with multiple sections and an anchor navigation
Use :target to highlight the active section
Add animation or transition effects when a section becomes targeted
Style the navigation to show the current target

24. Empty Content Placeholders

Project: Design a content management interface that shows placeholders for empty elements. Instructions:

Create a layout with various content containers
Use :empty to detect and style containers with no content
Design helpful placeholder messages or icons for empty states
Add a demo that allows adding/removing content to see the effect

25. Not-Selector Menu Highlighting

Project: Build a navigation menu that highlights all items except the current page. Instructions:

Create a multi-page navigation menu
Use :not(.current) to style non-active items differently
Apply hover effects only to items that aren't the current page
Include a demonstration of how this enhances usability

26. Language-Specific Styling

Project: Design a multilingual page with styling based on language attributes. Instructions:

Create a page with content in multiple languages
Use :lang(xx) to apply language-specific styling
Add appropriate typography adjustments for different languages
Include culturally appropriate color schemes or icons

27. Has-Selector Content Relationships

Project: Build containers that change style based on the types of content they contain. Instructions:

Create various content containers with different child elements
Use :has(img), :has(table), etc. to detect and style containers accordingly
Apply layout adjustments based on content type
Explain how this helps create adaptive layouts

28. Attribute-Based Link Styling

Project: Design a page where links are styled based on their attributes. Instructions:

Create a page with various types of links (internal, external, downloads)
Use [href^="http"], [href$=".pdf"], etc. to detect link types
Apply distinct styles and icons for each link type
Include a legend explaining what each style indicates

Interactive Components

29. Accordion Without JavaScript

Project: Build an accordion component using only CSS. Instructions:

Create an accordion with multiple sections
Use :target or :checked with hidden inputs to toggle sections
Style the open and closed states differently
Add smooth transitions between states

30. CSS-Only Tabs Interface

Project: Design a tabbed interface without using JavaScript. Instructions:

Create a component with multiple tabbed sections
Use :checked with radio inputs to control tab visibility
Style active tabs distinctly from inactive tabs
Ensure accessible keyboard navigation

31. Hover-Triggered Dropdown Menu

Project: Build a navigation menu with dropdowns that appear on hover. Instructions:

Create a main navigation with nested dropdown menus
Use :hover to reveal dropdown content
Add transitions for smooth appearance/disappearance
Ensure the dropdown remains visible when hovering over its content

32. Focus-Triggered Tooltips

Project: Design form fields with tooltips that appear on focus. Instructions:

Create form fields with associated help information
Use :focus to display tooltips when fields receive focus
Position tooltips appropriately relative to their fields
Style tooltips to be clearly visible without overwhelming the interface

33. Active State Animations

Project: Build buttons with special animations when clicked. Instructions:

Create a set of action buttons with different purposes
Use :active to trigger animations when buttons are pressed
Design animations that provide visual feedback about the click
Ensure animations complete quickly enough for good UX

34. Checked State Toggle Switches

Project: Design custom toggle switches using checkboxes. Instructions:

Create toggle switches for various settings
Use :checked to style the on/off states
Design visually appealing switch controls
Add appropriate labels and color coding for states

35. Required + Invalid Error Messages

Project: Build form fields that display error messages for invalid required fields. Instructions:

Create form fields with validation requirements
Use :required:invalid to target invalid required fields
Display appropriate error messages for different validation issues
Style error messages to be noticeable but not disruptive

36. Focus-Within Card Highlighting

Project: Design content cards that highlight when any element inside receives focus. Instructions:

Create a grid of interactive content cards
Use :focus-within to highlight entire cards when they contain focused elements
Add visual enhancements that draw attention to the active card
Ensure the highlighting doesn't interfere with readability

Creative Applications

37. Typing Indicator Animation

Project: Create a text input that shows an animation while the user is typing. Instructions:

Build a comment or message input field
Use :focus combined with animation to show a "typing" indicator
Design an unobtrusive but noticeable animation
Reset the animation when focus is lost

38. Parent Hover Child Animations

Project: Design a gallery where hovering over images triggers animations in captions. Instructions:

Create an image gallery with captions
Use parent :hover to trigger animations in child elements
Design varied animations for different aspects of the caption
Ensure animations enhance rather than distract from content

39. Hover-to-Reveal Image Captions

Project: Build an image gallery with captions that appear on hover. Instructions:

Create a grid of images with hidden captions
Use :hover to reveal caption information
Design smooth transitions for caption appearance
Ensure captions are readable against any background

40. Scrollbar Customization

Project: Design a page with custom-styled scrollbars. Instructions:

Create a page with enough content to require scrolling
Use ::-webkit-scrollbar and related pseudo-elements to style scrollbars
Design scrollbars that match your site's aesthetic
Provide fallbacks for browsers that don't support scrollbar styling

41. First-Letter Drop Caps

Project: Build an article layout with decorative first letters. Instructions:

Create an article with multiple paragraphs
Use ::first-letter to style the first letter of paragraphs
Design drop caps that enhance the typography without hampering readability
Vary the styling for different paragraph types

42. Selection Styling

Project: Design a page with custom-styled text selection. Instructions:

Create a text-heavy page with various content types
Use ::selection to customize how selected text appears
Choose colors that maintain good contrast and readability
Consider different selection styles for different content areas

43. Before and After Decorative Elements

Project: Build headings with decorative elements created using pseudo-elements. Instructions:

Create various heading styles with decorative elements
Use ::before and ::after to add icons, lines, or shapes
Position the decorative elements appropriately
Ensure decorations enhance rather than compete with content

44. Tooltip Position Based on Screen Edge

Project: Design tooltips that reposition based on their proximity to screen edges. Instructions:

Create interactive elements with tooltips
Use JavaScript to detect proximity to edges
Apply different classes that trigger different :before/:after positioning
Ensure tooltips remain fully visible regardless of position

45. Progress Tracker with Current Step Highlighting

Project: Build a multi-step process indicator. Instructions:

Create a horizontal or vertical step indicator
Use :nth-child combined with a current class to highlight the active step
Style completed steps differently from upcoming steps
Add appropriate connecting lines or arrows between steps

Responsive Applications

46. Media Query + Pseudo-Class Combinations

Project: Design elements that use different pseudo-class behaviors at different screen sizes. Instructions:

Create interactive elements that behave differently on mobile vs. desktop
Use media queries combined with pseudo-classes
Implement hover effects on desktop that transform to active/focus effects on mobile
Explain the reasoning behind the different interactions

47. Nth-Child Responsive Grid

Project: Build a grid layout where every nth item changes behavior responsively. Instructions:

Create a grid of content items
Use :nth-child() to target specific items
Apply different styles or layout adjustments at different breakpoints
Ensure the design maintains visual harmony across screen sizes

48. Responsive Navigation with Active States

Project: Design a navigation that transforms from horizontal to hamburger menu. Instructions:

Create a navigation that's horizontal on desktop and toggleable on mobile
Use :checked with a hidden checkbox to control mobile menu visibility
Style active states appropriately for both layouts
Ensure smooth transitions between states and layouts

49. Form Field Focus States Across Devices

Project: Build a form with focus states optimized for different input methods. Instructions:

Create a form that works well on touchscreens and with keyboards
Use :focus-visible for keyboard users and appropriate touch states
Design states that work well with both precision and touch inputs
Test and optimize for various devices and input methods

50. Accessibility-Enhanced Interactive Elements

Project: Design interactive elements with states for all types of interactions. Instructions:

Create buttons, links, and form controls with comprehensive state styling
Use :hover, :focus, :active, and :focus-visible appropriately
Ensure high contrast and clear visual indicators for all states
Test with keyboard, mouse, touch, and screen readers to verify accessibility

Each of these projects explores different aspects of CSS pseudo-classes, providing a comprehensive learning experience. They range from basic to advanced and cover various real-world applications. As you work through them, you'll develop a deep understanding of how pseudo-classes can enhance your web design capabilities.