Introduction

CSS attribute selectors allow you to select HTML elements based on their attributes or attribute values. Instead of using classes or IDs, you can target elements using attributes like type, href, target, title, and more. Attribute selectors help write cleaner CSS and are commonly used when styling forms, links, images, and other HTML elements. In this chapter, you’ll practice CSS attribute selectors through simple solved CSS Attribute selectors practice questions that are easy for beginners to understand.

Question 1: Select All Input Fields with a type Attribute

Problem Statement

Write CSS to apply a blue border to all <input> elements that have a type attribute.

CSS Code

input[type] {    border: 2pxsolidblue;}

Output

All input fields with a type attribute display a blue border.

Explanation

• [type] selects elements that contain the type attribute.
• Only matching input elements are affected.
• This selector is useful when styling form fields.

Question 2: Select Text Input Fields

Problem Statement

Write CSS to change the background color of text input fields.

CSS Code

input[type="text"] {    background-color: lightyellow;}

Output

Text input fields display a light yellow background.

Explanation

• [type="text"] selects only text input fields.
• Other input types remain unchanged.
• It helps style specific form controls.

Question 3: Select Password Fields

Problem Statement

Write CSS to add a green border to password input fields.

CSS Code

input[type="password"] {    border: 2pxsolidgreen;}

Output

Password input fields display a green border.

Explanation

• [type="password"] targets only password fields.
• Other input elements are not selected.
• This makes password fields easy to identify.

Question 4: Select Links with a target Attribute

Problem Statement

Write CSS to make links with a target attribute bold.

CSS Code

a[target] {    font-weight: bold;}

Output

All links containing a target attribute appear bold.

Explanation

• [target] selects elements that have the target attribute.
• It does not matter what the attribute value is.
• This selector is commonly used for external links.

Question 5: Select Links That Open in a New Tab

Problem Statement

Write CSS to change the color of links that open in a new browser tab.

CSS Code

a[target="_blank"] {    color: red;}

Output

Links that open in a new tab display red text.

Explanation

• [target="_blank"] selects links with the exact value _blank.
• Only matching links are styled.
• This helps users recognize external links.

Question 6: Select Elements with a Specific title Attribute

Problem Statement

Write CSS to change the text color of all elements whose title attribute is "Important".

CSS Code

[title="Important"] {    color: red;}

Output

All elements with title="Important" display red text.

Explanation

• [title="Important"] selects elements whose title attribute exactly matches "Important".
• Only matching elements are affected.
• Exact value selectors are useful for applying specific styles.

Question 7: Select Images with an alt Attribute

Problem Statement

Write CSS to add a blue border to all images that have an alt attribute.

CSS Code

img[alt] {    border: 2pxsolidblue;}

Output

All images with an alt attribute display a blue border.

Explanation

• [alt] selects images containing the alt attribute.
• Images without an alt attribute are not selected.
• This selector is useful for accessibility-related styling.

Question 8: Select Links That Start with https

Problem Statement

Write CSS to change the color of links whose href attribute starts with https.

CSS Code

a[href^="https"] {    color: green;}

Output

All secure (https) links display green text.

Explanation

• ^= means starts with.
• It selects attribute values beginning with the specified text.
• This is useful for identifying secure links.

Question 9: Select PDF File Links

Problem Statement

Write CSS to make all links ending with .pdf bold.

CSS Code

a[href$=".pdf"] {    font-weight: bold;}

Output

All PDF download links display bold text.

Explanation

• $= means ends with.
• It selects attribute values ending with .pdf.
• This helps highlight downloadable documents.

Question 10: Select Elements Whose Class Contains a Specific Word

Problem Statement

Write CSS to apply a yellow background to elements whose class attribute contains the word box.

CSS Code

[class~="box"] {    background-color: yellow;}

Output

Elements whose class list includes the word box display a yellow background.

Explanation

• ~= matches a complete word within an attribute value.
• It is commonly used with multiple class names.
• Only elements containing the exact word box are selected.

Key Takeaways

• Attribute selectors target elements based on their attributes.
• [attribute] selects elements that contain an attribute.
• [attribute="value"] selects elements with an exact attribute value.
• ^= selects values that start with specific text.
• $= selects values that end with specific text.
• ~= matches a complete word in an attribute value.
• Attribute selectors reduce the need for extra classes and IDs.
• They are commonly used for forms, links, images, and downloadable files.

Frequently Asked Questions (FAQs)

1. What are CSS attribute selectors?

CSS attribute selectors select HTML elements based on the presence or value of their attributes.

2. How do I select elements that contain a specific attribute?

Use this syntax:

[attribute] {/* CSS properties */}

3. How do I select elements with an exact attribute value?

Use:

[attribute="value"] {/* CSS properties */}

4. Which selector matches values that start with specific text?

Use the ^= operator.

Example:

a[href^="https"] {    color: green;}

5. Which selector matches values that end with specific text?

Use the $= operator.

Example:

a[href$=".pdf"] {    font-weight: bold;}

6. What does the ~= operator do?

The ~= operator matches a complete word inside an attribute value, such as one class name in a list of multiple classes.

7. Where are CSS attribute selectors commonly used?

They are commonly used for:

• Form fields
• Hyperlinks
• Images
• File download links
• Buttons
• Accessibility-related styling

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar