50 CSS Pseudo-Class 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.