Attribute Selectors in CSS

Attribute Selectors in CSS ka use HTML elements ko select aur style karne ke liye hota hai based on unke attributes ya attribute values.

Yeh selectors square brackets [] ke andar likhe jate hain.

---

Types of Attribute Selectors in CSS

[attribute]

Yeh selector un elements ko select karta hai jinke paas specific attribute hota hai.

Example

---

[attribute=”value”]

Yeh selector un elements ko select karta hai jinka attribute exact given value ke equal ho.

Example

---

[attribute~=”value”]

Yeh selector un elements ko select karta hai jinke attribute value me ek specific word present ho (space-separated list me).

Example

Yeh match karega:

• title="flower"
• title="summer flower"
• title="flower new"

Match nahi karega:

• title="my-flower"
• title="flowers"

---

[attribute|=”value”]

Yeh selector un elements ko select karta hai jinka attribute value:

• exact same ho
• ya hyphen (-) ke sath start ho

Example

---

Advanced Attribute Selectors in CSS

[attribute^=”value”]

Yeh selector un elements ko select karta hai jinke attribute value specific value se start hoti hai.

Example

---

[attribute$=”value”]

Yeh selector un elements ko select karta hai jinke attribute value specific value se end hoti hai.

Example

---

[attribute*=”value”]

Yeh selector un elements ko select karta hai jinke attribute value me specific value kahin bhi present ho.

Example

---

Case Sensitivity

By default, Attribute Selectors in CSS case-sensitive hote hain.

Case-insensitive match ke liye i use kar sakte hain:

---

Styling Form Elements using CSS Attribute Selectors

Attribute Selectors in CSS form elements ko style karne ke liye bhi useful hote hain based on input type.

Example

---

Attribute Selectors in CSS ek powerful way hai elements ko target karne ka based on unke attributes. Yeh exact match, partial match, start, end, ya specific word ke basis par styling allow karte hain, aur especially forms aur dynamic content ke liye kaafi useful hote hain.