Selector Lists and Specificity Preview

Selector Lists అంటే ఏమిటి?

ఒకే CSS rule ను చాలా selectors కు apply చేయాలంటే selectors ను comma (,) తో వేరు చేసి ఒక selector list గా రాయవచ్చు.

ఉదాహరణకు h1, h2, p అంటే ఈ మూడు selectors కు ఒకే style apply అవుతుంది. ప్రతి selector తనకు సరిపోయే HTML elements ను select చేస్తుంది.

Selector List Syntax

h1, h2, .notice {
  color: darkblue;
}

ఇక్కడ h1, h2, మరియు .notice మూడు వేర్వేరు selectors. Comma వాటిని ఒకే rule లో కలుపుతుంది.

Specificity Preview

ఒక HTML element కు ఒకటి కంటే ఎక్కువ CSS rules match అయితే, ఏ rule కు ఎక్కువ priority ఉందో browser నిర్ణయిస్తుంది. ఈ priority ని specificity అంటారు.

• Element selector, ఉదాహరణకు p, తక్కువ specificity కలిగి ఉంటుంది.
• Class selector, ఉదాహరణకు .notice, element selector కంటే ఎక్కువ specificity కలిగి ఉంటుంది.
• Attribute selector, ఉదాహరణకు [data-type="warning"], class selector కు సమానమైన category లో ఉంటుంది.
• ID selector, ఉదాహరణకు #main-notice, class లేదా attribute selector కంటే ఎక్కువ specificity కలిగి ఉంటుంది.

Specificity ఎక్కువగా ఉన్న rule సాధారణంగా apply అవుతుంది. Specificity ఒకటే అయితే, తర్వాత రాసిన rule గెలుస్తుంది. ఇది specificity యొక్క basic preview మాత్రమే; తరువాత దీనిని మరింత వివరంగా నేర్చుకుంటారు.

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

Browser ముందుగా ప్రతి selector ఏ HTML element కు match అవుతుందో చూస్తుంది. ఒకే element కు అనేక rules match అయితే, selectors యొక్క specificity ని పోల్చి final style ను ఎంచుకుంటుంది.

Simple Explanation

ఒకే style ను అనేక elements కు ఇవ్వాలంటే selector list ఉపయోగించండి. Selectors ను comma తో separate చేయాలి.

ఉదాహరణకు h1, .title అంటే h1 elements మరియు title class ఉన్న elements రెండింటికీ అదే style వస్తుంది.

ఒక element ను element selector, class selector, మరియు ID selector కలిసి target చేస్తే, సాధారణంగా ID selector కు ఎక్కువ specificity ఉంటుంది. అందువల్ల ID rule యొక్క value కనిపిస్తుంది.

Real-Life Example

ఒక school notice board లో main heading, subheading, మరియు warning notice అన్నింటినీ ఒకే నీలం రంగులో ఉంచాలనుకుందాం. ప్రతి దానికి విడిగా rule రాయడం బదులు h1, h2, .warning అనే selector list ఉపయోగించవచ్చు.

అయితే ఒక specific notice కు ప్రత్యేకమైన రంగు కావాలంటే, దానికి class లేదా ID selector ఉపయోగించవచ్చు. Specific selector సాధారణ selector కంటే ఎక్కువ priority పొందుతుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Selector Lists</title>
  <style>
    h1, h2, .notice {
      color: #174a7c;
    }

    p {
      color: #444444;
    }

    .notice {
      background-color: #fff3cd;
      padding: 12px;
    }

    #important-notice {
      color: #9b1c1c;
    }
  </style>
</head>
<body>
  <h1>School Information</h1>
  <h2>Today's Notice</h2>
  <p class="notice">Bring your project file tomorrow.</p>
  <p id="important-notice" class="notice">The library closes at 4 PM.</p>
</body>
</html>

The h1 and h2 headings are dark blue. Both notice paragraphs have a light yellow background and padding. The first notice paragraph has dark blue text, while the paragraph with id important-notice has dark red text.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Selector Lists</title>
  <style>
    h1, h2, .highlight {
      color: #155e75;
    }

    .highlight {
      background-color: #cffafe;
      padding: 10px;
    }

    #special-item {
      color: #b91c1c;
    }
  </style>
</head>
<body>
  <h1>Weekly Tasks</h1>
  <h2>Important Items</h2>
  <p class="highlight">Complete the CSS exercise.</p>
  <p id="special-item" class="highlight">Submit the assignment today.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• ఒకే style ను అనేక selectors కు ఇవ్వడానికి comma-separated selector list ఉపయోగించండి.
• h1, h2, .notice లో ప్రతి selector independent గా పని చేస్తుంది.
• Space మరియు comma ఒకే అర్థం ఇవ్వవు.
• Specificity CSS rules మధ్య priority ని నిర్ణయిస్తుంది.
• సాధారణ క్రమం: element కంటే class/attribute ఎక్కువ, class/attribute కంటే ID ఎక్కువ specificity.
• Specificity ఒకటే అయితే తర్వాత రాసిన rule సాధారణంగా గెలుస్తుంది.