CSS క్లాస్ సెలెక్టర్ వివరణ
- ముందస్తు పేజీ CSS సెలెక్టర్ గ్రూపింగ్
- తదుపరి పేజీ CSS ID సెలెక్టర్ వివరణ
క్లాస్ సెలెక్టర్ డాక్యుమెంట్ అంశాలకు సంభందించకుండా స్టైల్‌ని నిర్దేశించడానికి అనుమతిస్తుంది.
CSS క్లాస్ సెలెక్టర్
క్లాస్ సెలెక్టర్ డాక్యుమెంట్ అంశాలకు సంభందించకుండా స్టైల్‌ని నిర్దేశించడానికి అనుమతిస్తుంది.
ఈ సెలెక్టర్ ఒంటరిగా ఉపయోగించవచ్చు లేదా ఇతర అంశాలతో కలిసి ఉపయోగించవచ్చు.
సలహా:ఈ సెలెక్టర్లను ఉపయోగించడానికి, ప్రత్యేక డాక్యుమెంట్ తగినంతగా ముద్రించిన తర్వాత మాత్రమే, కాబట్టి ఈ రెండు సెలెక్టర్లను ఉపయోగించడానికి సాధారణంగా కొన్ని సంకల్పాలు మరియు ప్రణాళికలు చేయడం అవసరం.
ప్రత్యేక డిజైన్ అంశాలను పరిగణనలోకి తీసుకుని స్టైల్‌ని ఆప్లికేషన్ చేయడానికి, క్లాస్ సెలెక్టర్ అత్యంత సాధారణ పద్ధతి ఉంది.
హెచ్ఎంఎల్ కోడ్ మార్చండి
క్లాస్ సెలెక్టర్ ముందు ఉపయోగించడానికి, క్లాస్ సెలెక్టర్ సరిగా పని చేయడానికి ప్రత్యేక డాక్యుమెంట్ ముద్రణను మార్చడం అవసరం.
క్లాస్ సెలెక్టర్ స్టైల్‌ని అంశాలతో సంభందించడానికి, క్లాస్‌ను తగినంత విలువను నిర్దేశించడం అవసరం. క్రింది హెచ్ఎంఎల్ కోడ్ చూడండి:
<h1 class="important"> ఈ శీర్షిక చాలా ముఖ్యమైనది. </h1> <p class="important"> ఈ ప్రాగం చాలా ముఖ్యమైనది. </p>
ముందుకు కోడ్‌లో, రెండు అంశాలు క్లాస్‌ను important గా నిర్దేశించబడినవి: మొదటి పేరు (h1 అంశం), రెండవ ప్రాగం (p అంశం).
语法
అప్పుడు ఈ విధంగా ఈ క్లాస్ వాల్యూస్ కు షైల్స్ అనువర్తించడానికి ఉపయోగిస్తాము, అనగా క్లాస్ పేరు ముందు ఒక పంట్ ముద్రణ కలిగి ఉండి, అనగా వాటికి సంబంధించిన వాటిని ఉపయోగించడం:
*.important {color:red;}
మీరు మాత్రమే క్లాస్ నుండి అన్ని అంశాలను ఎంచుకోవాలి అనేది కావాలి అయితే, క్లాస్ సెలెక్టర్స్ లో వాటికి సంబంధించిన వాటిని ఉపయోగించవచ్చు, ఇది ఏ మామూలు ప్రభావాన్ని కలిగి లేదు:
.important {color:red;}
కలిసి ఉపయోగించడం
క్లాస్ సెలెక్టర్స్ ఎలిమెంట్ సెలెక్టర్స్ తో కలిసి ఉపయోగించవచ్చు.
ఉదాహరణకు, మీరు మాత్రమే ప్యారాగ్రాఫ్స్ రెడ్ టెక్స్ట్ అవుతుంది అనేది కావాలి అయితే:
p.important {color:red;}
ఈ షెలెక్టర్ ప్రస్తుతం class అటువంటి అంశాలను మ్యాచ్ చేస్తుంది కానీ, ఈ క్లాస్ అటువంటి ఇతర రకాల అంశాలను మ్యాచ్ చేయదు, క్లాస్ అటువంటి ఉన్నప్పటికీ. షెలెక్టర్ p.important అనేది అర్థం చేస్తుంది: "క్లాస్ అటువంటి అన్ని ప్యారాగ్రాఫ్స్ అన్నిటికీ కలిగి ఉంటుంది". ఎందుకంటే h1 అంశం ప్యారాగ్రాఫ్ కాదు, ఈ రూలు షెలెక్టర్ తో మ్యాచ్ అవుతుంది కాదు, అందువల్ల h1 అంశం రెడ్ టెక్స్ట్ అవుతుంది కాదు.
మీరు నిజంగా h1 అంశానికి వేరే షైల్స్ నిర్ణయించడానికి కావాలి అయితే, h1.important షెలెక్టర్ ను ఉపయోగించవచ్చు:
p.important {color:red;}
h1.important {color:blue;}
CSS మల్టీ క్లాస్ సెలెక్టర్
గత సెక్షన్లో, మేము క్లాస్ వాల్యూస్ కు ఒక పదాన్ని కలిగి ఉన్న సందర్భాన్ని పరిష్కరించాము. HTML లో, క్లాస్ వాల్యూస్ కు ఒక పద జాబితా ఉండవచ్చు, పదాలు స్పేస్ ద్వారా వేరు చేయబడ్డాయి. ఉదాహరణకు, ఒక ప్రత్యేక అంశాన్ని ముఖ్యమైనది (important) మరియు ప్రత్యాహారమైనది (warning) అనేవిగా గుర్తించడానికి క్లాస్ వాల్యూస్ కు రాయవచ్చు:
<p class="important warning"> This paragraph is a very important warning. </p>
ఈ రెండు పదాల క్రమం ముఖ్యం కాదు, warning important అని రాయవచ్చు కూడా.
మేము క్లాస్ వాల్యూస్ కు important అనేది అన్ని అంశాలు బోల్డ్ అవుతాయి మరియు క్లాస్ వాల్యూస్ కు warning అనేది అన్ని అంశాలు ఇటాలిక్ అవుతాయి అని భావిస్తున్నాము, క్లాస్ వాల్యూస్ కు కూడా important మరియు warning అనేవి ఉన్న అన్ని అంశాలు వెండి బ్యాక్గ్రౌండ్ కలిగి ఉంటాయి. అలా రాయవచ్చు:
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
రెండు క్లాస్ సెలెక్టర్స్ ను కలపడం ద్వారా మాత్రమే ఎంచుకోవచ్చు同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning"> ఈ ప్రార్ధన చాలా ముఖ్యమైన మరియు తక్కువ కాలంలో పూర్తిచేయవలసిన జాగ్రత్తగా ఉంది. </p>
ముఖ్యమైన విషయం:IE7 ముందు వివిధ ప్లాట్ఫారమ్స్లోని Internet Explorer లు బహుళ క్లాస్ సెలెక్టర్స్ ను సరిగా ప్రాసెస్ చేయలేవు.
- ముందస్తు పేజీ CSS సెలెక్టర్ గ్రూపింగ్
- తదుపరి పేజీ CSS ID సెలెక్టర్ వివరణ
