Beginner60 minutesCSSSelectors

CSS Selector Challenge

Project Objectives

  • Practice using different types of CSS selectors
  • Understand selector specificity and how it affects styling
  • Learn to target elements efficiently without modifying HTML
  • Apply styling to complex HTML structures using advanced selectors
  • Develop problem-solving skills for CSS selection challenges

Prerequisites: Before starting this project, you should complete the CSS Selectors tutorial.

Project Description

In this project, you'll practice using different CSS selectors to style elements without modifying the HTML structure. You'll be given a pre-built HTML document with various elements, and your task is to apply specific styles using only CSS selectors. This will help you master the art of targeting elements precisely and efficiently.

Your Selector Challenge Should Include:

  • Using basic selectors (element, class, ID)
  • Implementing attribute selectors
  • Working with pseudo-classes and pseudo-elements
  • Applying combinators (descendant, child, adjacent sibling, general sibling)
  • Understanding and applying selector specificity
  • Solving styling challenges without modifying the HTML

Getting Started

Step 1: Set Up Your Project Files

Create the following files for your project:

  • index.html - The HTML structure (provided below)
  • styles.css - Where you'll write your CSS selectors

Step 2: Set Up Your HTML Structure

Copy this HTML structure to your index.html file:

Important: For this challenge, you should NOT modify the HTML structure. The goal is to practice using CSS selectors to target elements as they are.

Challenge Tasks

Complete the following tasks using only CSS selectors in your styles.css file:

Basic Selectors

  1. Make all paragraphs in the document have a font size of 16px and line height of 1.6
  2. Change the text color of all elements with the class "highlight" to #ff6b6b
  3. Make the element with ID "main-title" have a font size of 32px and center-aligned text
  4. Style all h2 elements to have a bottom border of 2px solid #4a6cf7

Attribute Selectors

  1. Style all links that open in a new tab (with target="_blank") to have a different color (#2575fc)
  2. Add a small icon (📎) after links that point to PDF files (href ending with .pdf)
  3. Style all buttons with a "data-type" attribute to have a background color based on their type value
  4. Select all images with an "alt" attribute containing the word "profile" and give them a circular shape

Pseudo-classes and Pseudo-elements

  1. Style the first paragraph in each section to have a larger font size (18px)
  2. Add a hover effect to all buttons that changes their background color
  3. Style every odd list item in the unordered lists to have a light gray background
  4. Add a special style to the first letter of each heading in the "article" section
  5. Style the placeholder text in the form inputs to be italic and light gray

Combinators

  1. Style paragraphs that are direct children of the "content" section differently from other paragraphs
  2. Add a margin to list items that immediately follow another list item
  3. Style all paragraphs that are siblings of h2 elements
  4. Target all labels that are descendants of the form element and make them bold

Specificity Challenges

  1. Create a situation where you need to use an ID selector to override a class selector
  2. Style an element using a combination of selectors that has higher specificity than a single class
  3. Override a style without using !important by creating a more specific selector

Solution Examples

Here are some examples of how you might solve a few of the challenges:

Remember: There are often multiple ways to select elements. Try to use the most efficient and specific selector for each task.

Testing Your Selectors

As you work through the challenges, regularly check your browser to see if your selectors are working correctly. You can use the browser's developer tools to inspect elements and see which styles are being applied.

Tips for Testing

  • Use the browser's inspector to check if your selectors are targeting the right elements
  • Look at the "Styles" panel to see if your styles are being applied or overridden
  • Try modifying your selectors in the developer tools before updating your CSS file
  • Test edge cases to make sure your selectors are robust

Challenge Yourself

Once you've completed the basic challenges, try these advanced tasks:

Advanced Selector Challenges

  • Use the :not() pseudo-class to exclude certain elements from a selection
  • Implement a complex selector that uses multiple pseudo-classes together
  • Create a selector that targets elements based on their position in the DOM
  • Use the :nth-child() selector with a formula (like 3n+1) to create a pattern
  • Implement a selector that uses multiple attribute selectors together

Submit Your Project

Once you've completed your selector challenge, you can:

  • Save it to your computer for future reference
  • Share it with friends to get feedback on your selector skills
  • Deploy it to a free hosting service like GitHub Pages
  • Create additional challenges for yourself to further practice

Next Steps: After completing this project, you might want to check out the CSS Box Model tutorial to learn more about styling elements.

Black Swan Bistro
All Projects
Card Components