Grouping Selectors

Grouping Selectors అంటే ఏమిటి?

ఒకే CSS style ను ఒకటి కంటే ఎక్కువ selectors కు apply చేయాలనుకున్నప్పుడు Grouping Selectors ఉపయోగిస్తాము.

Selectors ను comma (,) తో విడగొట్టి ఒకే CSS rule లో రాయాలి. ఇలా చేయడం వల్ల ఒకే declarations ను మళ్లీ మళ్లీ రాయాల్సిన అవసరం ఉండదు.

Syntax

h1, h2, p {
  color: darkblue;
}

పై ఉదాహరణలో h1, h2, p మూడు selectors group అయ్యాయి. అందువల్ల ఈ మూడు elements కు ఒకే color style వర్తిస్తుంది.

ఎందుకు ఉపయోగించాలి?

CSS code చిన్నగా మరియు readable గా ఉంటుంది.
Repeated declarations తగ్గుతాయి.
ఒకే design rule ను అనేక HTML elements కు సులభంగా apply చేయవచ్చు.
తర్వాత style మార్చాలంటే ఒకే చోట edit చేయవచ్చు.

ముఖ్యమైన విషయం

Selectors మధ్య comma పెట్టాలి. Comma లేకుండా selectors రాస్తే అది grouping కాదు. ఉదాహరణకు h1, h2 అంటే h1 మరియు h2 రెండింటినీ select చేస్తుంది.

Code Example

ఈ ఉదాహరణలో h1 మరియు h2 headings కు ఒకే color, అలాగే p మరియు li elements కు ఒకే text color apply అవుతుంది.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grouping Selectors</title>
  <style>
    h1, h2 {
      color: #14532d;
    }

    p, li {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Healthy Habits</h1>
  <h2>Daily Practice</h2>
  <p>Small habits can create positive changes.</p>
  <ul>
    <li>Drink enough water.</li>
    <li>Take a short walk.</li>
  </ul>
</body>
</html>

Browserలో ఎలా పనిచేస్తుంది?

Browser CSSలోని మొదటి rule చూసి h1 మరియు h2 రెండింటికీ ఆకుపచ్చ రంగును apply చేస్తుంది. రెండవ rule ద్వారా p మరియు li text కు dark gray రంగు వస్తుంది.

Simple Explanation

ఒకే style ను చాలా elements కు ఇవ్వాలంటే selectors ను comma తో group చేయండి.

h1, h2, p { color: navy; } అంటే h1, h2 మరియు p మూడు elements navy color లో కనిపిస్తాయి.

Grouping Selector లో ప్రతి selector మధ్య comma తప్పనిసరిగా ఉండాలి. ఇది CSS code ను shorter, cleaner మరియు easier to maintain గా చేస్తుంది.

Real-Life Example

ఒక పాఠశాల notice board ను ఊహించండి. Main heading మరియు subheading రెండింటినీ ఒకే green marker తో రాయాలని అనుకుంటే, వాటికి వేర్వేరు instructions ఇవ్వాల్సిన అవసరం లేదు. ఒకే instruction ద్వారా రెండింటినీ style చేయవచ్చు. CSSలో h1, h2 grouping ఇదే విధంగా పనిచేస్తుంది.

Code Examples

Grouping Element Selectors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grouping Selectors</title>
  <style>
    h1, h2 {
      color: #14532d;
    }

    p, li {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Healthy Habits</h1>
  <h2>Daily Practice</h2>
  <p>Small habits can create positive changes.</p>
  <ul>
    <li>Drink enough water.</li>
    <li>Take a short walk.</li>
  </ul>
</body>
</html>

ఇక్కడ h1, h2 selectors group అయ్యాయి. కాబట్టి రెండు headings కు ఒకే green color వస్తుంది. అలాగే p, li selectors group కావడం వల్ల paragraph మరియు list items కు ఒకే dark gray color apply అవుతుంది.

The page displays a green Healthy Habits heading and green Daily Practice subheading. The paragraph and both list items appear in dark gray.

Line-by-Line Explanation

h1, h2 {
ఇక్కడ h1 మరియు h2 selectors comma తో group అయ్యాయి. అందువల్ల ఈ రెండు HTML elements ఒకే CSS rule ను ఉపయోగిస్తాయి.

color: #14532d;
ఈ declaration group లో ఉన్న h1 మరియు h2 text కు dark green color ఇస్తుంది.

}
ఈ curly brace మొదటి grouped selector rule ముగిసిందని సూచిస్తుంది.

p, li {
ఇక్కడ paragraph selector మరియు list item selector group అయ్యాయి. కాబట్టి p మరియు li elements రెండింటికీ ఒకే declarations వర్తిస్తాయి.

color: #333333;
ఈ declaration paragraph మరియు list item text ను dark gray గా చూపిస్తుంది.

Healthy Habits

ఇది page యొక్క main heading. ఇది h1 group లో ఉండటం వల్ల dark green color పొందుతుంది.

Daily Practice

ఇది subheading. ఇది h2 group లో ఉండటం వల్ల h1 లాగే dark green color పొందుతుంది.

Small habits can create positive changes.

ఈ paragraph p selector group లో ఉంది. అందువల్ల దీనికి dark gray color apply అవుతుంది.

Drink enough water.

ఈ list item li selector group లో ఉంది. కాబట్టి దీనికి కూడా paragraph లాగే dark gray color వస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Grouping Selectors</title>
  <style>
    h1, h2 {
      color: purple;
    }

    p, li {
      color: #444444;
    }
  </style>
</head>
<body>
  <h1>My Study Plan</h1>
  <h2>This Week</h2>
  <p>I will practice CSS every day.</p>
  <ul>
    <li>Read one lesson.</li>
    <li>Write one example.</li>
  </ul>
</body>
</html>

Try It Yourself »

Practice

Practice: పై practice_code లో h1 మరియు h2 కు ఒకే darkblue color రావడానికి రెండు separate rules ను ఒక grouped selector గా మార్చండి.

Hint: h1 మరియు h2 మధ్య comma పెట్టి h1, h2 అని రాయండి. ఒకే color declaration ను ఉంచండి.

Common Mistakes

h1 h2 { color: blue; } అని comma లేకుండా రాయడం.
Grouping కోసం selectors మధ్య comma తప్పనిసరి. సరైన syntax h1, h2 { color: blue; }.

ఒక selector తర్వాత comma పెట్టి, తదుపరి selector రాయకపోవడం.
ప్రతి comma తర్వాత valid selector ఉండాలి. ఉదాహరణకు h1, h2, p సరైన grouping.

Grouped rule లో curly braces ను సరిగ్గా మూసివేయకపోవడం.
ప్రతి grouped selector rule ను { తో ప్రారంభించి } తో ముగించండి.

ఒకే style అవసరం లేని elements ను కూడా group చేయడం.
ఒకే declarations అవసరమైన selectors ను మాత్రమే group చేయండి. వేర్వేరు styles ఉంటే separate rules ఉపయోగించండి.

Interview Questions

CSSలో Grouping Selectors అంటే ఏమిటి?

Answer: ఒకే CSS rule ను అనేక selectors కు apply చేయడాన్ని Grouping Selectors అంటారు. Selectors ను comma తో విడగొడతాము.

Grouping Selectors ఎందుకు ఉపయోగిస్తాము?

Answer: Repeated CSS declarations తగ్గించడానికి, code ను చిన్నగా మరియు maintain చేయడానికి ఉపయోగిస్తాము.

Grouping Selectors లో comma పాత్ర ఏమిటి?

Answer: Comma selectors వేర్వేరు అని browserకు తెలియజేస్తుంది. ఉదాహరణకు h1, h2 అంటే h1 మరియు h2 రెండింటినీ select చేస్తుంది.

h1 h2 మరియు h1, h2 మధ్య తేడా ఏమిటి?

Answer: h1, h2 grouping selector. ఇది h1 మరియు h2 రెండింటినీ select చేస్తుంది. h1 h2 grouping కాదు; అది h1 లో ఉన్న h2 element ను సూచించే వేరే selector.

Exam Questions

క్రింది selectors కు red color ఇవ్వడానికి grouping selector రాయండి: h1, h2, p.

Answer:

h1, h2, p { color: red; }

Grouping Selectors లో selectors ను ఏ symbol తో separate చేస్తారు?

Answer:

Comma (,) symbol తో separate చేస్తారు.

క్రింది code లో తప్పు ఏమిటి? h1 h2 { color: green; }

Answer:

Selectors మధ్య comma లేదు. రెండు selectors ను group చేయాలంటే సరైన code h1, h2 { color: green; }.

Quick Revision

ఒకే style ను అనేక selectors కు ఇవ్వడానికి Grouping Selectors ఉపయోగిస్తాము.
Selectors ను comma తో separate చేయాలి.
ఉదాహరణ: h1, h2, p { color: navy; }
Grouping CSS code repetition ను తగ్గిస్తుంది.
Comma లేకుండా selectors రాస్తే అది grouping కాదు.
Grouping లో ఉన్న ప్రతి selector ఒకే declarations ను పొందుతుంది.

Grouping Selectors