ఒక CSS వారసుడు సెలెక్టర్ అంటే ఏమిటి?

ఒక HTML పత్రం నిర్మాణం ఒక కుటుంబం చెట్టు పోలి ఉంటుంది. మీ కుటు 0 బ 0 లో, మీ తల్లిద 0 డ్రులు, మీ ఎదుట వచ్చిన ఇతరులు ఉన్నారు. ఇవి మీ పూర్వీకులు. ఆ చెట్టు మీద పిల్లలు మరియు నీ తరువాత వచ్చిన వాళ్ళు నీ సంతతివారు. HTML అదే విధంగా పనిచేస్తుంది. ఇతర అంశాల లోపల ఉండే మూలకాలు వారి వారసులు. ఉదాహరణకు, దాదాపు ప్రతి HTML ఎలిమెంట్ టాగ్లు లోపల ఉంది కాబట్టి, వారు మూలకాల యొక్క వారసురాలుగా ఉంటారు. మీరు CSS తో పనిచేయడం మొదలుపెట్టినప్పుడు ఈ సంబంధాన్ని అర్థం చేసుకోవడం చాలా ముఖ్యం మరియు దృశ్య శైలులను వర్తింపచేయడానికి ప్రత్యేక అంశాలని లక్ష్యంగా చేసుకోవాలి.

CSS వారసులు సెలెక్టర్లు

ఒక CSS వంశీకుడు సెలెక్టర్ మరొక మూలకం (లేదా మరింత ఖచ్చితంగా పేర్కొంది, మరొక మూలకం యొక్క వంశస్థుడు ఒక మూలకం) లోపల ఉన్న అంశాలకు వర్తిస్తుంది. ఉదాహరణకు, క్రమం లేని జాబితా ట్యాగ్లతో ఒక ట్యాగ్ను కలిగి ఉంటుంది. ఈ క్రింది HTML ను ఒక ఉదాహరణగా ఉపయోగించుకోండి:

• ఇది ఒక లింక్

  LI టాగ్లు UL ట్యాగ్ యొక్క వారసులు. A ట్యాగ్ LI (పిల్లల వారసుడు) మరియు UL (మనుమడు సంతానం) ట్యాగ్ల యొక్క సంతతి. మీరు దాని గురించి ఆలోచించి, కుటుంబ వృక్షాన్ని ఉపయోగించడం గురించి అనుకుంటే,

  తల్లిదండ్రులు,
  • ఆ మూలకం యొక్క బిడ్డ ఉంటుంది మరియు >
  • మరియు పిల్లల మనుమరాలు
    .

    కాబట్టి మీరు ఈ వంశపారంపర్య సెలెక్టర్లు ఉపయోగించి వెబ్ పేజీలో నిర్దిష్ట అంశాలను ఎలా లక్ష్యంగా చేస్తారు? మొదట, మీరు ప్రదేశాలతో వేరు చేయబడిన రెండు (లేదా అంతకంటే ఎక్కువ) రకం సెలెక్టర్లు ఉపయోగించి వారసుని సెలెక్టర్లును నిర్వచించాలి.

    li a {text-decoration: none; }

    ఆ ఉదాహరణలో, శైలులు జాబితా అంశం అంశం (

    • ) యొక్క వంశపారంపర్యమైన ఒక లింక్ మూలకం () కు మాత్రమే వర్తిస్తాయి. జాబితా ఐటెమ్ యొక్క వారసుని లేని పేజీలోని అన్ని ఇతర లింకులు ఈ శైలిని పొందలేవు.

      గుర్తుంచుకోవలసిన ఒక ముఖ్యమైన విషయం ఏమిటంటే, మీ వారసుల సెలెక్టర్లో మీరు వాడే ట్యాగ్ల మధ్య ఉన్న ఎన్ని టాగ్లు లేవు. మొదటి మూలకం లోపల ఎక్కడైనా మూసివేయబడితే అది వారసునిగా ఎంపిక చేయబడుతుంది.

      మీరు ul మూలాల నుండి సంక్రమించిన అన్ని వ్యాఖ్యాతలు ఎంచుకోవాలనుకుంటే, మీరు వ్రాస్తారు:

      ul a {టెక్స్ట్-అలంకరణ: none; }

      ఇప్పుడు, ఈ శైలులు జాబితా అంశం యొక్క వంశస్థుడు అయిన ఏదైనా లింక్కి వర్తిస్తాయి. మీరు ఈ సెలెక్టర్ వ్రాయవచ్చు

      ul li a {టెక్స్ట్-అలంకరణ: none; }

      ఇది ఇద్దరు కంటే ఎక్కువ రకాలైన సెలెక్టర్లు ఉపయోగించే ఒక వారసుడు సెలెక్టర్. ఈ సందర్భంలో, ఇది జాబితా-అంశంగా లోపలికి ఉన్న లింక్లకు మరియు క్రమం లేని జాబితాలో కూడా వర్తిస్తుంది.

      తరగతి సెలెక్టర్లు మరియు ID సెలెక్టర్లు ఉపయోగించి

      మీరు అవరోహణ చేస్తున్న సెలెక్టర్లు ఎల్లప్పుడూ రకం వారసులుగా ఉండకూడదు. ఉదాహరణకు, మీరు "బిల్ బోర్డు" యొక్క ID లక్షణంతో సైట్ యొక్క ప్రాంతం (విభజన వంటిది) కలిగి ఉన్నారని ఊహించండి. మీరు ఆ ID యొక్క వారసుడు సెలెక్టర్ను సెటప్ చేయవచ్చు:

      # బిల్బోర్డ్ ul {background-color: #ccc; }

      ఇది శైలి "బిల్ బోర్డు" యొక్క ID తో ఒక మూలకం యొక్క వారసురాలు అని క్రమం లేని జాబితా. మీరు తరగతి విలువలు కోసం అదే చేయవచ్చు.

      div.billboard ul {background-color: #ccc; }

      ఈ విభాగం "బిల్ బోర్డు" యొక్క తరగతి విలువను కలిగి ఉంది. పైన ఉన్న CSS ఈ తరగతి విలువ కలిగిన ఏ విభాగానికైనా

      మూలకం శైలిగా ఉంటుంది.

      మీరు వారసులైన సెలెక్టర్లు తో నిజంగా భారీ చేతి మరియు verbose పొందవచ్చు. ఉదాహరణకు, మీరు మీ HTML కోడ్ రాయడానికి డ్రీమ్వీవర్ను ఉపయోగిస్తే, మీరు కొత్త CSS నియమాలను జోడించినప్పుడు ఒక సెట్టింగు ఉంటుంది, అది ఆ పేజీలో మీ కర్సర్ యొక్క స్థానం ఆధారంగా సెలెక్టర్ను స్వీయ-సృష్టిస్తుంది. ఈ సందర్భాల్లో డ్రీమ్వీవర్ ఏమిటంటే ఒక క్రూరంగా వ్యవహరిస్తుంది మరియు సుదీర్ఘ వారసుడైన సెలెక్టర్. మీ CSS పనిచేయడానికి చాలా నిర్దిష్టత అవసరం లేదు. మీరు చేయాలనుకుంటున్నారా ఏమి మీరు అవసరం ఖచ్చితమైన అంశాలు (మీరు ప్రభావితం అనుకుంటున్నారా లేదు స్టైలింగ్ వాటిని లేకుండా) డౌన్ బెజ్జం వెయ్యి కాబట్టి మితిమీరిన సెలెక్టర్లు కలిగి CSS నియమాలు చేయకుండా ప్రత్యేకంగా ఒక వారసుడు సెలెక్టర్ మధ్య ఒక సంతులనం కనుగొనేందుకు ఉంది పెద్ద.