• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Attribute Selectors

← Previous Next →

🔹 What Are CSS Attribute Selectors?

CSS Attribute Selectors allow you to select elements based on the presence or value of an attribute. They are powerful for targeting elements without needing extra classes or IDs.

🔸 1. Basic Attribute Selector

input[type="text"] {
  border: 2px solid green;
}

Targets all <input> elements with type="text".

🔸 2. Attribute Exists Selector ([attr])

a[target] {
  color: red;
}

Targets all anchor (<a>) tags that have a target attribute.

🔸 3. Attribute Value Contains ([attr~="value"])

[title~="help"] {
  background-color: yellow;
}

Selects elements whose title contains the word "help" (whole word match).

🔸 4. Attribute Starts With ([attr^="value"])

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

Matches elements where attribute starts with "https".

🔸 5. Attribute Ends With ([attr$="value"])

img[src$=".png"] {
  border-radius: 10px;
}

Selects all images whose src ends with .png.

🔸 6. Attribute Contains ([attr*="value"])

a[href*="login"] {
  font-weight: bold;
}

Selects anchor tags with "login" anywhere in the href value.

🔸 7. Attribute Equals Multiple Words ([attr|="value"])

[lang|="en"] {
  font-style: italic;
}

Matches lang="en" or lang="en-US", etc.

Practice Questions

Q1. Style all input elements of type checkbox.

Q2. Select links that open in new tab (target="_blank").

Q3. Change color of all elements with a data-status attribute.

Q4. Target <img> elements with .jpg at the end.

Q5. Make all buttons with disabled attribute appear faded.

Q6. Apply bold style to links that contain “signup” in their href.

Q7. Add padding to all inputs with a placeholder.

Q8. Set a red border for inputs with type="password".

Q9. Italicize all elements where lang starts with en.

Q10. Add underline to links that start with "mailto:".

CSS Attribute Selectors Quiz

Q1: Which selector matches elements with a specific attribute present?

A. [attr]
B. .attr
C. :attr
D. @attr

Q2: What does [type="submit"] target?

A. All buttons
B. Only divs
C. Inputs with type submit
D. All inputs

Q3: What does [href^="https"] select?

A. Links with any href
B. Hrefs that start with "https"
C. Links that end with "https"
D. Links that contain "https"

Q4: Which selector targets images ending in .jpg?

A. [src^=".jpg"]
B. [src~=".jpg"]
C. [src$=".jpg"]
D. [src=".jpg"]

Q5: What does [title~="help"] select?

A. All titles
B. Titles that begin with "help"
C. Title attributes containing "help" as a word
D. IDs containing "help"

Q6: Which attribute selector matches a word with a hyphen (like en-US) and its base (en)?

A. [lang*="en"]
B. [lang$="en"]
C. [lang|="en"]
D. [lang~="en"]

Q7: Which selector targets any element with a data- attribute?

A. [data-*]
B. [data]
C. [:data]
D. [*data]

Q8: Which selector targets inputs with a placeholder?

A. input[title]
B. input[placeholder]
C. input[data]
D. input[alt]

Q9: Which symbol represents "starts with" in attribute selectors?

A. $
B. ^
C. *
D. ~

Q10: What does [href*="login"] do?

A. Match href that ends with login
B. Match href that contains "login" anywhere
C. Match exact "login" href
D. Match if login is a class
← Previous Next →
Login
Go Back Top