Adjacent and General Sibling Combinators

Adjacent and General Sibling Combinators అంటే ఏమిటి?

CSS combinators HTML elements మధ్య ఉన్న సంబంధాన్ని బట్టి elements ను select చేయడానికి ఉపయోగిస్తాము. ఈ పాఠంలో ఒకే parent కింద ఉన్న sibling elements ను select చేయడం నేర్చుకుంటాం.

Adjacent Sibling Combinator (+)

+ combinator ఒక element తరువాత వెంటనే వచ్చే sibling element ను మాత్రమే select చేస్తుంది.

ఉదాహరణ: h2 + p అంటే ప్రతి <h2> తరువాత వెంటనే వచ్చే <p> element.

General Sibling Combinator (~)

~ combinator ఒక element తరువాత అదే parent కింద వచ్చే అన్ని matching sibling elements ను select చేస్తుంది.

ఉదాహరణ: h2 ~ p అంటే <h2> తరువాత వచ్చే అన్ని sibling <p> elements. అవి వెంటనే తరువాత ఉండాల్సిన అవసరం లేదు.

ఇవి ఎలా పనిచేస్తాయి?

• h2 + p లో మొదటి <p> మాత్రమే match అవుతుంది, ఎందుకంటే అది <h2> తరువాత వెంటనే ఉంది.
• h2 ~ p లో <h2> తరువాత ఉన్న అన్ని sibling paragraphs match అవుతాయి.
• ఈ elements ఒకే parent కింద ఉండాలి.
• ముందు ఉన్న siblings ను ఇవి select చేయవు; తరువాత ఉన్న siblings ను మాత్రమే select చేస్తాయి.

Syntax

first-element + second-element {
  property: value;
}

first-element ~ second-element {
  property: value;
}

Simple Explanation

ఒక classroom లో teacher తరువాత వెంటనే కూర్చున్న student ను మాత్రమే ఎంచుకోవడం Adjacent Sibling Combinator లాంటిది. Teacher తరువాత కూర్చున్న మిగతా students అందరినీ ఎంచుకోవడం General Sibling Combinator లాంటిది.

h2 + p వెంటనే వచ్చే paragraph ను మాత్రమే select చేస్తుంది. h2 ~ p అయితే అదే parent కింద h2 తరువాత ఉన్న అన్ని paragraphs ను select చేస్తుంది.

Real-Life Example

ఒక news card లో heading తరువాత వెంటనే వచ్చే summary paragraph కు ప్రత్యేక background ఇవ్వాలనుకుంటే h2 + p ఉపయోగించవచ్చు. Heading తరువాత ఉన్న అన్ని supporting paragraphs కు ఒకే text color ఇవ్వాలనుకుంటే h2 ~ p ఉపయోగించవచ్చు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sibling Combinators</title>
  <style>
    .article h2 + p {
      background-color: #fff3cd;
      padding: 10px;
    }

    .article h2 ~ p {
      color: #1d4ed8;
    }
  </style>
</head>
<body>
  <article class="article">
    <h2>CSS Combinators</h2>
    <p>This paragraph comes immediately after the heading.</p>
    <p>This paragraph also comes after the heading.</p>
    <p>This is another sibling paragraph.</p>
  </article>
</body>
</html>

మొదటి paragraph కు లేత పసుపు background, padding మరియు blue text కనిపిస్తాయి. తరువాతి రెండు paragraphs కు blue text మాత్రమే కనిపిస్తుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Sibling Combinators</title>
  <style>
    .card h2 + p {
      background-color: #e0f2fe;
      padding: 8px;
    }

    .card h2 ~ p {
      color: #166534;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Daily Tip</h2>
    <p>This paragraph is immediately after the heading.</p>
    <p>This paragraph is another sibling.</p>
  </div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• + Adjacent Sibling Combinator.
• ~ General Sibling Combinator.
• + వెంటనే వచ్చే ఒక matching sibling ను మాత్రమే select చేస్తుంది.
• ~ తరువాత వచ్చే అన్ని matching siblings ను select చేస్తుంది.
• రెండు elements ఒకే parent కింద siblings గా ఉండాలి.
• ఈ combinators ముందున్న siblings ను select చేయవు.