Descendant Combinator

Descendant Combinator అంటే ఏమిటి?

Descendant Combinator అనేది ఒక parent element లోపల ఉన్న అన్ని matching descendant elements ను select చేయడానికి ఉపయోగించే CSS selector పద్ధతి.

దీనిలో రెండు selectors మధ్య ఒక ఖాళీ space ఉంటుంది. ఉదాహరణకు .card p అంటే card class ఉన్న element లోపల ఉన్న అన్ని <p> elements.

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

• ఒక నిర్దిష్ట section లోని elements కు మాత్రమే style ఇవ్వడానికి.
• అదే HTML tag page లో ఇతర చోట్ల ఉన్నా, అవసరమైన parent లోపల ఉన్న వాటిని మాత్రమే target చేయడానికి.
• HTML structure ఆధారంగా CSS ను స్పష్టంగా నిర్వహించడానికి.

Syntax

ancestor descendant {
  property: value;
}

ఇక్కడ ancestor parent లేదా పై స్థాయి element ను సూచిస్తుంది. descendant దాని లోపల ఉన్న target element ను సూచిస్తుంది. ఈ రెండు selectors మధ్య తప్పనిసరిగా space ఉండాలి.

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

Descendant Combinator ఒక element లోపల ఏ స్థాయిలో ఉన్న matching elements నైనా select చేస్తుంది. అంటే target element parent కు వెంటనే లోపల ఉండాల్సిన అవసరం లేదు; మధ్యలో మరొక element ఉన్నా అది select అవుతుంది.

Code Example

ఈ ఉదాహరణలో .article p selector, article class ఉన్న section లోని paragraphs కు మాత్రమే style ఇస్తుంది. .article బయట ఉన్న paragraph కు ఆ style వర్తించదు.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Descendant Combinator</title>
  <style>
    .article p {
      color: darkblue;
      background-color: #eaf2ff;
      padding: 8px;
    }
  </style>
</head>
<body>
  <section class="article">
    <h1>CSS Selectors</h1>
    <div>
      <p>ఈ paragraph article section లోపల ఉంది.</p>
    </div>
  </section>

  <p>ఈ paragraph article section బయట ఉంది.</p>
</body>
</html>

ఎలా చదవాలి?

.article p ను “article class ఉన్న element లోపల ఉన్న ప్రతి paragraph” అని చదవాలి. HTML లో <p> ఒక <div> లోపల ఉన్నా, ఆ <div> article లోపల ఉన్నందున paragraph select అవుతుంది.

Simple Explanation

Descendant Combinator లో రెండు selectors మధ్య space ఉంటుంది.

.menu a అంటే menu class ఉన్న element లోపల ఉన్న అన్ని links. .card span అంటే card లోపల ఉన్న అన్ని <span> elements.

ఈ selector page మొత్తం ఉన్న elements ను కాకుండా, ఒక నిర్దిష్ట parent లోపల ఉన్న matching elements ను మాత్రమే style చేస్తుంది.

Real-Life Example

ఒక website లో ఒక పెద్ద building ను .building class ఉన్న container గా ఊహించండి. ఆ building లోని అన్ని rooms ను paragraphs గా ఊహిస్తే, .building p selector ఆ building లోపల ఉన్న rooms కు మాత్రమే ఒకే విధమైన గుర్తింపు ఇవ్వడంలా పనిచేస్తుంది. ఇతర buildings లోని rooms కు ఆ style వర్తించదు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Descendant Combinator</title>
  <style>
    .article p {
      color: darkblue;
      background-color: #eaf2ff;
      padding: 8px;
    }
  </style>
</head>
<body>
  <section class="article">
    <h1>CSS Selectors</h1>
    <div>
      <p>ఈ paragraph article section లోపల ఉంది.</p>
    </div>
  </section>

  <p>ఈ paragraph article section బయట ఉంది.</p>
</body>
</html>

The paragraph inside the article section appears dark blue with a light blue background and padding. The paragraph outside the article section keeps the browser's default styling.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Descendant Combinator Practice</title>
  <style>
    .notice p {
      color: green;
      background-color: #eefbea;
      padding: 8px;
    }
  </style>
</head>
<body>
  <section class="notice">
    <h2>Important Notice</h2>
    <div>
      <p>This paragraph is inside the notice.</p>
    </div>
  </section>

  <p>This paragraph is outside the notice.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Descendant Combinator లో రెండు selectors మధ్య ఒక space ఉంటుంది.
• .parent p అంటే parent లోపల ఉన్న అన్ని paragraphs.
• Descendant element వెంటనే parent లోపల ఉండాల్సిన అవసరం లేదు.
• Ancestor selector ముందుగా, descendant selector తరువాత రాయాలి.
• ఒక నిర్దిష్ట section లోని elements కు మాత్రమే style ఇవ్వడానికి ఇది ఉపయోగపడుతుంది.