0
0
CSSmarkup~30 mins

Attribute selectors in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Styling Links with Attribute Selectors in CSS
📖 Scenario: You are creating a simple webpage with several links. Some links open in a new tab, and others open in the same tab. You want to style these links differently using CSS attribute selectors.
🎯 Goal: Build a webpage with multiple links and use CSS attribute selectors to style links that open in a new tab with a green color and underline, and links that open in the same tab with a blue color and no underline.
📋 What You'll Learn
Create an HTML skeleton with at least four links.
Use the target attribute to specify which links open in a new tab.
Write CSS using attribute selectors to style links with target="_blank" differently from those without this attribute.
Ensure the page is accessible and uses semantic HTML.
💡 Why This Matters
🌍 Real World
Web developers often need to style elements differently based on their attributes, such as links opening in new tabs or buttons with specific data attributes.
💼 Career
Understanding attribute selectors is essential for front-end developers to write clean, efficient CSS that targets elements precisely without adding extra classes or IDs.
Progress0 / 4 steps
1
Create the HTML structure with links
Create an HTML file with a <main> section containing four <a> links. Two links should have the attribute target="_blank" and two should not have the target attribute. Use these exact URLs and link texts:
<a href="https://example.com" target="_blank">Example New Tab</a>,
<a href="https://openai.com" target="_blank">OpenAI New Tab</a>,
<a href="https://wikipedia.org">Wikipedia Same Tab</a>,
<a href="https://github.com">GitHub Same Tab</a>.
CSS
Need a hint?

Remember to add the target="_blank" attribute exactly for two links and omit it for the other two.

2
Add a CSS style block with base link styles
Inside the <head> section, add a <style> block. Inside it, write CSS to set all <a> links to have a font size of 1.2rem and a margin of 0.5rem on the right. Use the selector a.
CSS
Need a hint?

Use the selector a and set font-size and margin-right properties.

3
Use attribute selectors to style links opening in a new tab
In the existing <style> block, add a CSS rule using the attribute selector a[target="_blank"]. Set the text color to green and add an underline with text-decoration: underline.
CSS
Need a hint?

Use the attribute selector a[target="_blank"] to style links that open in a new tab.

4
Style links without the target attribute differently
In the same <style> block, add a CSS rule using the attribute selector a:not([target]). Set the text color to blue and remove underline with text-decoration: none.
CSS
Need a hint?

Use the negation pseudo-class :not([target]) to select links without the target attribute.