Child Combinator

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

CSSలో Child Combinator ఒక parent element యొక్క direct children ను మాత్రమే select చేయడానికి ఉపయోగిస్తారు. దీనికి > గుర్తును ఉపయోగిస్తాం.

Syntax: parent > child

ఇక్కడ child element parent యొక్క వెంటనే లోపల ఉండాలి. మధ్యలో మరొక element ఉంటే అది direct child కాదు, కాబట్టి ఈ selector దానికి style apply చేయదు.

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

ఒక parent లోని direct children కు మాత్రమే style ఇవ్వడానికి.
లోపల మరింత లోతుగా ఉన్న nested elements ను అనుకోకుండా style చేయకుండా ఉండటానికి.
HTML structure ఆధారంగా ఖచ్చితమైన styling చేయడానికి.

Descendant Combinator తో తేడా

.menu li అంటే .menu లోపల ఉన్న అన్ని li elements select అవుతాయి.

.menu > li అంటే .menu యొక్క direct child అయిన li elements మాత్రమే select అవుతాయి.

గుర్తుంచుకోండి

> గుర్తు రెండు selectors మధ్య ఉండాలి. Parent మరియు child elements మధ్య ఒక intermediate element ఉంటే child combinator ఆ element ను select చేయదు.

Runnable Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Combinator</title>
  <style>
    .menu > li {
      color: darkblue;
      font-weight: bold;
    }

    .menu li li {
      color: #555555;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li>Home</li>
    <li>Courses
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</body>
</html>

ఈ codeలో .menu > li selector, .menu యొక్క direct child అయిన మొదటి స్థాయి li elements ను select చేస్తుంది. లోపల ఉన్న nested li elements direct children కాకపోవడంతో వాటికి ఆ rule వర్తించదు.

Simple Explanation

ఒక ఇంట్లో parent room లో నేరుగా ఉన్న వస్తువులను మాత్రమే గుర్తించాలనుకుంటే Child Combinator ఉపయోగించినట్లుగా ఊహించండి.

.menu > li లో .menu parent. దాని వెంటనే లోపల ఉన్న li elements direct children. కాబట్టి ఈ selector మొదటి స్థాయి menu items ను మాత్రమే select చేస్తుంది.

Nested list లోని li మరొక ul లోపల ఉంది. అందువల్ల అది .menu యొక్క direct child కాదు.

Real-Life Example

ఒక website navigation menu లో main menu items ను bold blue color లో చూపాలి. కానీ submenu items సాధారణ gray color లో ఉండాలి. అప్పుడు .menu > li ఉపయోగించి main menu items ను మాత్రమే style చేయవచ్చు.

Code Examples

Direct Children ను Select చేయడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Combinator</title>
  <style>
    .menu > li {
      color: darkblue;
      font-weight: bold;
    }

    .menu li li {
      color: #555555;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li>Home</li>
    <li>Courses
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</body>
</html>

.menu > li selector .menu యొక్క direct child అయిన li elements ను select చేస్తుంది. అందువల్ల Home, Courses, Contact dark blue మరియు boldగా కనిపిస్తాయి. Nested list లోని HTML మరియు CSS items direct children కాకపోవడంతో ఆ rule వాటికి వర్తించదు. రెండవ rule వాటిని gray మరియు normal weight లో చూపిస్తుంది.

Home, Courses, and Contact appear dark blue and bold. The nested HTML and CSS items appear gray with normal font weight.

Line-by-Line Explanation

.menu > li {
.menu parent యొక్క direct child అయిన li elements ను select చేసే Child Combinator selector ఇది.

color: darkblue;
ఎంచుకున్న direct child list items యొక్క text color dark blue గా మారుతుంది.

font-weight: bold;
ఎంచుకున్న main menu items boldగా కనిపిస్తాయి.

}
మొదటి CSS rule ఇక్కడ ముగుస్తుంది.

.menu li li {
ఇది nested list లోని li elements ను select చేస్తుంది. ఈ rule exampleలో వాటిని main menu style నుండి వేరుగా చూపించడానికి ఉపయోగించబడింది.

color: #555555;
Nested list items యొక్క text gray color లో కనిపిస్తుంది.

font-weight: normal;
Nested list items bold కాకుండా సాధారణ font weight తో కనిపిస్తాయి.

menu

Home

Home అనేది .menu యొక్క direct child అయిన li, కాబట్టి Child Combinator rule దీనికి వర్తిస్తుంది.

Courses
Courses కూడా .menu యొక్క direct child list item.

HTML

HTML item nested ul లో ఉంది. అందువల్ల ఇది .menu యొక్క direct child కాదు.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Child Combinator</title>
  <style>
    .menu > li {
      color: purple;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li>Home</li>
    <li>Products
      <ul>
        <li>Books</li>
        <li>Courses</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</body>
</html>

Try It Yourself »

Practice

Practice: ఇచ్చిన codeలో `.navigation` యొక్క direct child అయిన `li` elements ను dark green మరియు boldగా చూపించండి. Nested HTML మరియు CSS items కు ఆ bold style రాకూడదు.

Hint: Selectorగా `.navigation > li` ఉపయోగించండి. దానికి `color` మరియు `font-weight` declarations ఇవ్వండి.

Common Mistakes

`.menu li` ను ఉపయోగించి direct children మాత్రమే select అవుతాయని అనుకోవడం.
Direct children కోసం తప్పనిసరిగా `>` గుర్తు ఉపయోగించాలి: `.menu > li`.

Child Combinatorలో `>` గుర్తును వదిలివేయడం లేదా తప్పు స్థానంలో పెట్టడం.
Parent మరియు child selectors మధ్య spaceతో లేదా space లేకుండా `parent > child` syntax వాడండి.

Nested `li` కూడా parent యొక్క direct child అని భావించడం.
మధ్యలో మరో `ul` లేదా `ol` ఉంటే nested `li` direct child కాదు.

HTML structure మారినా selector అదే విధంగా పనిచేస్తుందని అనుకోవడం.
Child Combinator HTML nesting పై ఆధారపడుతుంది. మధ్యలో element చేర్చితే selector match మారవచ్చు.

Interview Questions

CSS Child Combinator అంటే ఏమిటి?

Answer: Parent element యొక్క direct children ను మాత్రమే select చేసే combinator. దీనికి `>` గుర్తును ఉపయోగిస్తాం.

`.menu > li` మరియు `.menu li` మధ్య తేడా ఏమిటి?

Answer: `.menu > li` direct child `li` elements ను మాత్రమే select చేస్తుంది. `.menu li` మాత్రం `.menu` లోపల ఉన్న అన్ని levels లోని `li` elements ను select చేస్తుంది.

ఒక element direct child కాదో ఎలా తెలుసుకోవాలి?

Answer: Parent మరియు ఆ element మధ్య మరొక element లేకపోతే అది direct child. మధ్యలో ఇంకొక element ఉంటే అది nested descendant.

Exam Questions

Child Combinator symbol ఏది?

Answer:

`>`

`.card > p` selector ఏమి select చేస్తుంది?

Answer:

`.card` element యొక్క direct child అయిన `p` elements ను మాత్రమే select చేస్తుంది.

ఈ HTMLలో `.box > span` selector ఏ elementకు match అవుతుంది? `

One

Two

Answer:

One అనే text ఉన్న మొదటి `span` మాత్రమే match అవుతుంది. రెండవ `span` ఒక `p` లోపల ఉంది కాబట్టి అది `.box` యొక్క direct child కాదు.

Quick Revision

Child Combinator syntax: `parent > child`
`>` parent యొక్క direct children ను మాత్రమే select చేస్తుంది.
మధ్యలో మరో element ఉంటే selector match కాదు.
`.menu > li` main menu items ను మాత్రమే select చేయడానికి ఉపయోగించవచ్చు.
`.menu li` అన్ని descendant `li` elements ను select చేస్తుంది; ఇది Child Combinator కాదు.

Child Combinator