Attribute Selectors
Attribute Selectors అంటే ఏమిటి?
Attribute Selectors ఉపయోగించి ఒక HTML element కు ఉన్న attribute ఆధారంగా దాన్ని select చేయవచ్చు. సాధారణంగా class లేదా id తెలియకపోయినా, element లో ఉన్న type, href, data-category వంటి attributes ఆధారంగా CSS style apply చేయడానికి ఇవి ఉపయోగపడతాయి.
ప్రధాన Syntax
[attribute]— ఆ attribute ఉన్న అన్ని elements ను select చేస్తుంది.[attribute="value"]— attribute విలువ పూర్తిగా సరిపోతే select చేస్తుంది.[attribute~="value"]— space-separated list లో value ఉన్నప్పుడు select చేస్తుంది.[attribute|="value"]— value లేదా value తో ప్రారంభమయ్యే hyphenated value ఉన్నప్పుడు select చేస్తుంది.[attribute^="value"]— attribute value ఇచ్చిన text తో ప్రారంభమైతే select చేస్తుంది.[attribute$="value"]— attribute value ఇచ్చిన text తో ముగిస్తే select చేస్తుంది.[attribute*="value"]— attribute value లో ఇచ్చిన text ఎక్కడైనా ఉంటే select చేస్తుంది.
ఇది ఎలా పనిచేస్తుంది?
Browser ముందుగా HTML elements ను చదువుతుంది. తరువాత CSS లోని attribute selector తో ప్రతి element యొక్క attribute పేరు లేదా విలువను పోల్చుతుంది. Match అయిన elements కు మాత్రమే ఆ rule లోని styles apply అవుతాయి.
చిన్న ఉదాహరణ
<input type="email">
input[type="email"] {
border: 2px solid green;
}ఇక్కడ type="email" ఉన్న input మాత్రమే select అవుతుంది.
పూర్తి Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Selectors</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input[type="email"] {
border: 2px solid royalblue;
background-color: #eef4ff;
padding: 8px;
}
a[href^="https"] {
color: green;
}
[data-category="featured"] {
background-color: #fff3cd;
padding: 10px;
border-left: 4px solid orange;
}
</style>
</head>
<body>
<h1>Product Links and Form</h1>
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<p><a href="https://example.com">Secure website</a></p>
<p><a href="http://example.com">Regular website</a></p>
<p data-category="featured">Featured product</p>
</body>
</html>ఈ ఉదాహరణలో మూడు రకాల attribute selectors ఉన్నాయి: exact value selector, starts-with selector మరియు attribute presence selector.
Simple Explanation
Attribute selector ను square brackets [] లో రాస్తాం.
[data-category]అంటేdata-categoryattribute ఉన్న element.input[type="email"]అంటేtypeవిలువemailఅయిన input.a[href^="https"]అంటేhrefవిలువhttpsతో ప్రారంభమయ్యే link.
ఒకే attribute selector లో element name పెట్టడం optional. [data-category="featured"] అన్ని matching elements ను select చేస్తుంది. input[type="email"] మాత్రం email type ఉన్న input elements ను మాత్రమే select చేస్తుంది.
Real-Life Example
ఒక online store లో featured products కు ప్రత్యేకమైన border మరియు background ఇవ్వాలి అనుకోండి. ప్రతి product కు ప్రత్యేకమైన class పెట్టకుండా, data-category="featured" అనే attribute పెట్టి [data-category="featured"] selector తో వాటిని style చేయవచ్చు. అలాగే email input కు text input కంటే వేరే border ఇవ్వడానికి input[type="email"] ఉపయోగించవచ్చు.
Code Examples
Attribute Selectors తో Elements ను Style చేయడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Selectors</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input[type="email"] {
border: 2px solid royalblue;
background-color: #eef4ff;
padding: 8px;
}
a[href^="https"] {
color: green;
}
[data-category="featured"] {
background-color: #fff3cd;
padding: 10px;
border-left: 4px solid orange;
}
</style>
</head>
<body>
<h1>Product Links and Form</h1>
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<p><a href="https://example.com">Secure website</a></p>
<p><a href="http://example.com">Regular website</a></p>
<p data-category="featured">Featured product</p>
</body>
</html>input[type="email"] email input ను మాత్రమే select చేస్తుంది. a[href^="https"] href విలువ https తో ప్రారంభమయ్యే links ను select చేస్తుంది. [data-category="featured"] featured category ఉన్న element ను select చేస్తుంది.
Email input కు నీలం border, లేత నీలం background మరియు padding కనిపిస్తాయి. Secure website link ఆకుపచ్చగా కనిపిస్తుంది; Regular website link మారదు. Featured product paragraph కు లేత పసుపు background, padding మరియు orange left border కనిపిస్తాయి.
Line-by-Line Explanation
type attribute విలువ email అయిన input elements ను select చేస్తుంది. Text input ఈ rule కు match కాదు.
Match అయిన email input చుట్టూ 2 pixels మందం ఉన్న royal blue border ఇస్తుంది.
Email input background కు లేత నీలం రంగు ఇస్తుంది.
href attribute విలువ https తో ప్రారంభమయ్యే <a> elements ను select చేస్తుంది. ఇక్కడ ^= starts-with matching ను సూచిస్తుంది.
ఆ selector కు match అయిన secure link text ఆకుపచ్చగా కనిపిస్తుంది.
data-category attribute విలువ ఖచ్చితంగా featured అయిన ఏ element అయినా select అవుతుంది.
Featured element ఎడమ వైపున 4 pixels మందం ఉన్న orange border చూపిస్తుంది.
ఇది text input. దీని
type విలువ email కాదు కాబట్టి input[type="email"] rule దీనిపై apply కాదు.
ఈ input కు
type="email" ఉంది. అందువల్ల email attribute selector దీనిపై styles apply చేస్తుంది.
Featured product
ఈ paragraph లో
data-category="featured" ఉంది. అందువల్ల attribute-only selector దీనిని select చేస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Attribute Selectors</title>
<style>
input[type="email"] {
border: 2px solid blue;
padding: 8px;
}
[data-status="new"] {
background-color: #e8f5e9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Try It</h2>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<p data-status="new">New item</p>
<p data-status="old">Old item</p>
</body>
</html>Practice
Practice: పై code లో data-category="featured" ఉన్న product కు లేత పసుపు background, orange left border మరియు padding ఇవ్వండి. http తో ప్రారంభమయ్యే link ను ఆకుపచ్చగా మార్చకుండా, https link మాత్రమే ఆకుపచ్చగా ఉండేలా ఉంచండి.
Hint: [data-category="featured"] selector ను కొత్త CSS rule గా రాయండి. Secure link కోసం ఇప్పటికే ఉన్న a[href^="https"] selector ను గమనించండి.
Common Mistakes
input type="email" అని రాయడం.సరైన syntax
input[type="email"]. Attribute పేరు మరియు value ను square brackets లో రాయాలి.
[type=email] మరియు [type="email"] మధ్య quotes అవసరం లేదని ప్రతిసారి భావించడం.సాధారణ text values కోసం quotes వాడటం స్పష్టంగా మరియు beginner-friendly గా ఉంటుంది.
[type="email"] రూపాన్ని ఉపయోగించండి.
[data-category="feature"] అని రాసి HTML లోని data-category="featured" తో match అవుతుందని అనుకోవడం.= exact matching చేస్తుంది. Value పూర్తిగా ఒకేలా ఉండాలి: [data-category="featured"].
*= వాడటం.^= value ప్రారంభాన్ని match చేస్తుంది. *= value లో ఎక్కడైనా text ఉన్నప్పుడు match చేస్తుంది.
Attribute selector CSS rule లో ఉండాలి:
a[href^="https"] { color: green; }.
Interview Questions
CSS Attribute Selector అంటే ఏమిటి?
Answer: HTML element లోని attribute పేరు లేదా attribute value ఆధారంగా element ను select చేసే CSS selector ను Attribute Selector అంటారు.
[disabled] selector ఏమి select చేస్తుంది?
Answer: disabled attribute ఉన్న అన్ని elements ను select చేస్తుంది. Attribute value ఏదైనా ప్రత్యేకంగా check చేయదు.
input[type="email"] మరియు input మధ్య తేడా ఏమిటి?
Answer: input అన్ని input elements ను select చేస్తుంది. input[type="email"] email type ఉన్న input elements ను మాత్రమే select చేస్తుంది.
^=, $=, *= operators ఏమి సూచిస్తాయి?
Answer: ^= value తో ప్రారంభమయ్యేదాన్ని, $= value తో ముగిసేదాన్ని, *= value లో ఎక్కడైనా ఉన్న text ను match చేస్తాయి.
Exam Questions
Attribute selector యొక్క సరైన syntax ఏది? A) input.type=email B) input[type="email"] C) input(type=email)
Answer:
సరైన సమాధానం B: input[type="email"].
a[href$=".pdf"] selector ఏ links ను select చేస్తుంది?
Answer:
href విలువ .pdf తో ముగిసే links ను select చేస్తుంది.
[data-role] selector ఏమి select చేస్తుంది?
Answer:
data-role attribute ఉన్న elements అన్నింటినీ select చేస్తుంది.
ఒక attribute value లో ఇచ్చిన word ఎక్కడైనా ఉన్నప్పుడు match చేయడానికి ఏ operator ఉపయోగిస్తారు?
Answer:
*= operator ఉపయోగిస్తారు. ఉదాహరణ: [class*="card"].
Quick Revision
- Attribute selectors ను square brackets
[]లో రాస్తాం. [attribute]ఆ attribute ఉన్న elements ను select చేస్తుంది.[attribute="value"]exact value ను match చేస్తుంది.^=starts with,$=ends with,*=contains అని గుర్తుంచుకోండి.- Element name తో కలిపి selector ను మరింత specific గా చేయవచ్చు:
input[type="email"]. - Attribute selectors ను forms, links, custom data attributes ఆధారంగా styling చేయడానికి ఉపయోగించవచ్చు.