Class Selectors
Class Selectors అంటే ఏమిటి?
Class Selector అనేది ఒకే రకమైన style ను ఒకటి లేదా అంతకంటే ఎక్కువ HTML elements కు apply చేయడానికి ఉపయోగించే CSS selector.
Class selector ను CSS లో dot (.) తో ప్రారంభిస్తాము. ఉదాహరణకు .note selector, class="note" ఉన్న అన్ని HTML elements ను select చేస్తుంది.
Class Selector Syntax
.class-name {
property: value;
}HTML లో class ను class attribute ద్వారా ఇస్తాము. ఒకే class ను అనేక elements కు ఇవ్వవచ్చు. అందువల్ల ఒకే style ను మళ్లీ మళ్లీ రాయకుండా reuse చేయవచ్చు.
Class Selectors ఎందుకు ఉపయోగించాలి?
- ఒకే style ను అనేక elements కు apply చేయడానికి.
- ప్రత్యేకమైన group of elements ను select చేయడానికి.
- CSS code ను reusable మరియు organized గా ఉంచడానికి.
- ఒకే HTML page లో వేర్వేరు రకాల paragraphs లేదా cards కు వేర్వేరు styles ఇవ్వడానికి.
ఎలా పనిచేస్తుంది?
Browser ముందుగా HTML లోని class attribute విలువను చూస్తుంది. ఆ విలువకు సరిపోయే dot selector CSS లో ఉంటే, ఆ selector లోని declarations ఆ element పై apply అవుతాయి.
ఉదాహరణకు .highlight selector, class="highlight" ఉన్న ప్రతి element ను style చేస్తుంది.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Selectors</title>
<style>
.card {
background-color: #f2f7ff;
border: 1px solid #6b8fd6;
padding: 16px;
margin-bottom: 12px;
}
.card-title {
color: #173b7a;
font-size: 22px;
}
.important {
color: #a33a00;
font-weight: bold;
}
</style>
</head>
<body>
<section class="card">
<h2 class="card-title">CSS Class Selector</h2>
<p>A class can style a group of elements.</p>
</section>
<section class="card">
<h2 class="card-title">Reusable Styles</h2>
<p class="important">This message needs attention.</p>
</section>
</body>
</html>Simple Explanation
ఒక HTML element కు class="box" అని ఇస్తే, CSS లో దాన్ని select చేయడానికి .box అని రాస్తాము.
ఉదాహరణ:
.box {
background-color: lightblue;
}ఇప్పుడు class="box" ఉన్న ప్రతి element కు light blue background వస్తుంది. ఒకే class ను అనేక HTML elements ఉపయోగించవచ్చు. Class selector ముందు ఉండే dot ను మర్చిపోకండి.
Real-Life Example
ఒక school website లో అనేక notices ఉన్నాయని అనుకుందాం. అన్ని normal notices కు ఒకే box style కావచ్చు. ఒక ముఖ్యమైన notice కు వేరే text color కావచ్చు.
అప్పుడు అన్ని notices కు class="notice" ఇచ్చి, CSS లో .notice ద్వారా common style ఇస్తాము. ముఖ్యమైన notice కు అదనంగా class="important" ఇచ్చి ప్రత్యేకమైన style apply చేయవచ్చు. ఇలా CSS ను తిరిగి ఉపయోగించవచ్చు.
Code Examples
Reusable Class Selector Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Selectors</title>
<style>
.card {
background-color: #f2f7ff;
border: 1px solid #6b8fd6;
padding: 16px;
margin-bottom: 12px;
}
.card-title {
color: #173b7a;
font-size: 22px;
}
.important {
color: #a33a00;
font-weight: bold;
}
</style>
</head>
<body>
<section class="card">
<h2 class="card-title">CSS Class Selector</h2>
<p>A class can style a group of elements.</p>
</section>
<section class="card">
<h2 class="card-title">Reusable Styles</h2>
<p class="important">This message needs attention.</p>
</section>
</body>
</html>.card selector రెండు section elements కు ఒకే background, border, padding మరియు margin styles ను apply చేస్తుంది. .card-title selector రెండు headings ను ఒకే విధంగా style చేస్తుంది. .important class ఉన్న paragraph మాత్రమే ప్రత్యేకమైన color మరియు bold text పొందుతుంది.
Browser లో రెండు light-blue cards కనిపిస్తాయి. రెండింటికీ blue border మరియు spacing ఉంటుంది. రెండు headings dark blue color లో కనిపిస్తాయి. రెండవ card లోని message dark orange color లో bold గా కనిపిస్తుంది.
Line-by-Line Explanation
ఇది card అనే class కోసం CSS rule ను ప్రారంభిస్తుంది. Class selector ముందు dot (.) తప్పనిసరిగా ఉంటుంది.
card class ఉన్న elements కు light blue background ఇస్తుంది.
ప్రతి card చుట్టూ ఒక pixel blue border చూపిస్తుంది.
card లోని text మరియు border మధ్య లోపలి ఖాళీని 16 pixels గా ఉంచుతుంది.
ఒక card కింద మరొక card కు మధ్య 12 pixels ఖాళీ ఇస్తుంది.
card-title class ఉన్న అన్ని elements ను select చేస్తుంది. ఈ class ను రెండు headings ఉపయోగిస్తున్నాయి.
card-title class ఉన్న headings కు dark blue text color ఇస్తుంది.
ఆ headings text size ను 22 pixels గా మారుస్తుంది.
important class ఉన్న elements కోసం ప్రత్యేకమైన CSS rule ను ప్రారంభిస్తుంది.
important class ఉన్న text ను bold గా చూపిస్తుంది.
ఈ HTML section కు card class ఇస్తుంది. అందువల్ల .card లోని అన్ని styles ఈ section పై apply అవుతాయి.
CSS Class Selector
ఈ heading కు card-title class ఉంది. కాబట్టి .card-title selector ఇచ్చిన color మరియు font size దీనికి apply అవుతాయి.
This message needs attention.
ఈ paragraph కు important class ఉంది. అందువల్ల దాని text ప్రత్యేకమైన color మరియు bold style తో కనిపిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Class Selectors</title>
<style>
.message {
background-color: #fff4cc;
color: #5c4500;
padding: 12px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="message">First message</p>
<p class="message">Second message</p>
</body>
</html>Practice
Practice: పై practice code లో .box class ను ఉపయోగించి రెండు boxes కు light green background, dark green text మరియు వాటి మధ్య 10 pixels spacing ఇవ్వండి.
Hint: CSS లో .box rule ను edit చేసి background-color, color మరియు margin-bottom properties ను ఉపయోగించండి.
Common Mistakes
box { ... } అని రాయడం.Class selector కోసం పేరు ముందు dot పెట్టాలి:
.box { ... }.
class="message" ఉన్నప్పుడు CSS లో .messages రాయడం.HTML class value మరియు CSS class selector పేరు అచ్చంగా ఒకేలా ఉండాలి.
HTML లో
class="box" ఉంటే CSS లో .box selector ఉపయోగించాలి.
అనేక classes అవసరమైతే ఒకే class attribute లో ఖాళీతో వేరు చేయండి:
class="card important".
Interview Questions
CSS Class Selector అంటే ఏమిటి?
Answer: ఒకే రకమైన style ను ఒకటి లేదా అనేక HTML elements కు apply చేయడానికి ఉపయోగించే selector ను Class Selector అంటారు. ఇది CSS లో dot (.) తో ప్రారంభమవుతుంది.
Class Selector ను CSS లో ఎలా రాస్తారు?
Answer: Class పేరు ముందు dot పెట్టి రాస్తారు. ఉదాహరణ: .button { color: white; }.
ఒక class ను అనేక HTML elements ఉపయోగించవచ్చా?
Answer: అవును. ఒకే class ను అనేక elements ఉపయోగించవచ్చు. ఆ elements అన్నింటికీ ఆ class selector లోని styles apply అవుతాయి.
HTML లో class ను ఎలా apply చేస్తారు?
Answer: HTML element లో class attribute ఉపయోగిస్తారు. ఉదాహరణ: <p class="note">Text</p>.
Exam Questions
Class selector కోసం ఉపయోగించే గుర్తు ఏది?
Answer:
Dot (.) గుర్తు.
క్రింది HTML కు సరైన CSS class selector ఏది: <div class="card">Content</div>?
Answer:
సరైన selector .card.
ఒకే CSS class ను మూడు paragraphs కు apply చేయవచ్చా?
Answer:
అవును. మూడు paragraphs లోనూ ఒకే class attribute value ఇస్తే, ఆ class selector style మూడు paragraphs కు apply అవుతుంది.
Quick Revision
- Class selector CSS లో dot (.) తో ప్రారంభమవుతుంది.
- HTML లో class ను class attribute ద్వారా ఇస్తారు.
- ఒకే class ను అనేక HTML elements ఉపయోగించవచ్చు.
- HTML class పేరు మరియు CSS selector పేరు ఒకేలా ఉండాలి.
- Class selectors reusable styles కోసం ఉపయోగపడతాయి.
- ఒక element కు అనేక classes ఇవ్వవచ్చు; వాటిని space తో వేరు చేయాలి.