CSS నెస్టింగ్ సెలెక్టర్స్ (&)

నిర్వచనం మరియు వినియోగం

CSS నెస్టింగ్ (&) సెలెక్టర్స్ మరొక ఎలిమెంట్ పరిసరంలో ఎలిమెంట్కు శైలీని ఆపాదించడానికి ఉపయోగిస్తారు.

నెస్టింగ్ సంబంధిత ఎలిమెంట్స్ కోసం సెలెక్టర్స్ పునరావృతం అవసరాన్ని తగ్గిస్తుంది.

ఉదాహరణ

ఉదాహరణ 1

నెస్టింగ్ ముందు, మీరు ప్రతి సెలెక్టర్ను వేర్వేరుగా ప్రకటించవలసి ఉంటుంది, కాబట్టి ఈ విధంగా:

.బాక్స్ {
  బార్డర్: 2పిక్సెల్స్ సోలిడ్ గ్రీన్;
  బ్యాక్‌గ్రౌండ్‌-కలర్: బీజ్‌గుల్;
  ఫాంట్‌-ఫ్యామిలీ: మోనోస్పేస్;
  ఫాంట్‌-సైజ్: 20పిక్సెల్స్;
}
.బాక్స్ > a {
  కలర్: గ్రీన్;
}
.బాక్స్ > a:hover {
  కలర్: వైట్;
  బ్యాక్‌గ్రౌండ్‌-కలర్: సాల్మోన్;
}

మీరే ప్రయత్నించండి

ఉదాహరణ 2

నెస్టింగ్ తర్వాత, సెలెక్టర్స్ కొనసాగుతాయి, సంబంధిత స్టైల్ రూల్స్ ప్రింట్ రూల్స్ లో గుంపుచేయబడతాయి:

.బాక్స్ {
  బార్డర్: 2పిక్సెల్స్ సోలిడ్ గ్రీన్;
  బ్యాక్‌గ్రౌండ్‌-కలర్: బీజ్‌గుల్;
  ఫాంట్‌-ఫ్యామిలీ: మోనోస్పేస్;
  ఫాంట్‌-సైజ్: 20పిక్సెల్స్;
  & > a {
    కలర్: గ్రీన్;
    &:hover {
      కలర్: వైట్;
      బ్యాక్‌గ్రౌండ్‌-కలర్: సాల్మోన్;
    }
  }
}

మీరే ప్రయత్నించండి

సలహా:మీరు ఉదాహరణలో .బాక్స్ శైలీని తీసివేయాలంటే, సంబంధిత సెలెక్టర్స్ కోసం శోధించకుండా మొత్తం సమూహాన్ని తొలగించవచ్చు.

CSS సంకేతాలు

పరెంట్‌రూల్ {
  సిఎస్ఎస్ డిక్లరేషన్స్;
  & చిల్డ్‌రూల్ {
    సిఎస్ఎస్ డిక్లరేషన్స్;  } 
}

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు