CSS ప్రోప్యూషన్

ప్రత్యామ్నాయ క్లాస్సు ఏమిటి?

ప్రత్యామ్నాయ క్లాస్సులు ఎలమెంట్ల ప్రత్యేక స్థితిని నిర్వచించడానికి ఉపయోగిస్తాయి.

ఉదాహరణకు, ఇది వాడవచ్చు:

  • ఎలమెంట్పై మౌస్ హోవర్ చేసినప్పుడు శైలిని సెట్ చేయండి
  • సందర్శించిన మరియు సందర్శించని లింక్లకు వేరే శైలులను సెట్ చేయండి
  • ఎలమెంట్ సమర్ధనను పొందినప్పుడు శైలిని సెట్ చేయండి
నా మీద మౌస్ హోవర్ చేయండి

సంకేతాలు

ప్రత్యామ్నాయ క్లాస్ సంకేతాలు:

selector:pseudo-class {
  property: value;
}

అంకరు ప్రత్యామ్నాయం

లింక్లు వివిధ రీతుల్లో ప్రదర్శించబడవచ్చు:

ఉదాహరణ

/* సందర్శించని లింక్ */
a:link {
  color: #FF0000;
}
/* సందర్శించిన లింక్ */
a:visited {
  color: #00FF00;
}
/* మౌస్ హోవర్ లింక్ */
a:hover {
  color: #FF00FF;
}
/* ఎంపికచేసిన లింక్ */
a:active {
  color: #0000FF;
}

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

గమనిక:a:hover డిఫైనిషన్లో తరువాత, పని చేసేలా ఉండాలి: a:link మరియు a:visited తరువాత పని చేసేలా ఉండాలి!a:active డిఫైనిషన్లో తరువాత, పని చేసేలా ఉండాలి: a:hover ప్రత్యామ్నాయ క్లాస్సు పేర్లు క్యాపిటలైజేషన్ సంబంధితంగా అసంబద్ధంగా ఉన్నా పని చేస్తాయి! ప్రత్యామ్నాయ క్లాస్సు పేర్లు క్యాపిటలైజేషన్ సంబంధితంగా అసంబద్ధంగా ఉన్నా పని చేస్తాయి!

ప్రత్యామ్నాయ క్లాస్సులు మరియు CSS క్లాస్సులు

ప్రత్యామ్నాయ క్లాస్స్లతో ప్రత్యామ్నాయ క్లాస్సులను కలిపి వాడవచ్చు:

మీరు ఉదాహరణలో లింక్లపై మౌస్ హోవర్ చేసినప్పుడు, దాని రంగు మారుతుంది:

ఉదాహరణ

a.highlight:hover {
  color: #ff0000;
}

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

డివ్ పైన ముందుకు హోవర్ చేయండి:

డివ్ ఎలమెంట్ పై వాడండి: :hover ప్రత్యామ్నాయ క్లాస్ ఉదాహరణలు:

ఉదాహరణ

div:hover {
  background-color: blue;
}

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

简单的工具提示悬停

把鼠标悬停到

元素以显示

元素（类似工具提示的效果）：

悬停到我上面来显示

元素。

嘿嘿，我在这里！

ఉదాహరణ

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

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

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何

元素：

ఉదాహరణ

p:first-child {
  color: blue;
}

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

匹配所有

元素中的首个 元素

在下面的例子中，选择器匹配所有

元素中的第一个 元素：

ఉదాహరణ

p i:first-child {
  color: blue;
}

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

匹配所有首个

元素中的所有 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的

元素中的所有 元素：

ఉదాహరణ

p:first-child i {
  color: blue;
}

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

CSS - :lang ప్రత్యార్థక పేరు

:lang ప్రత్యార్థకాలు వివిధ భాషలకు ప్రత్యేక నియమాలను నిర్వచించడానికి అనుమతిస్తాయి.

కింది ఉదాహరణలో ఉంది కింది ఉపయోగించబడుతుంది::lang లాంగులు కొరకు lang="en" యొక్క <q> మెటాడాన్ని నిర్వచించడానికి ఉపయోగించబడుతుంది:

ఉదాహరణ

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>కొన్ని వచనాలు <q lang="no">ప్రారంభంలో ఒక కోవు</q> కొన్ని వచనాలు.</p>
</body>
</html>

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

మరిన్ని ఉదాహరణలు

లింకులకు వేరే శైలులను జోడించడం
ఈ ఉదాహరణలో కింది ఉపయోగించడానికి ఉపయోగించబడుతుంది లింకులకు ఇతర శైలులను జోడించడానికి.
ఉపయోగించడానికి :focus
ఈ ఉదాహరణలో కింది ఉపయోగించడానికి ఉపయోగించబడుతుంది :focus ప్రత్యార్థక పేరు.

అన్ని CSS ప్రత్యార్థక పేర్లు

సెలెక్టర్ ఉదాహరణ ఉదాహరణ వివరణ
:active a:active చటువులు కొనసాగుతున్న లింకులను ఎంచుకొనుము.
:checked input:checked ప్రతి ఎంపికకాని <input> మెటాడాన్ని ఎంచుకొనుము.
:disabled input:disabled ప్రతి నిష్క్రియమైన <input> మెటాడాన్ని ఎంచుకొనుము.
:empty p:empty ప్రతి కుమారులు లేని ప్రతి <p> మెటాడాన్ని ఎంచుకొనుము.
:enabled input:enabled ప్రతి చేతనమైన <input> ఎలిమెంట్ ను ఎంచుకొనుము.
:first-child p:first-child తన ప్రాతిని యొక్క మొదటి కుమారుడు యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:first-of-type p:first-of-type తన ప్రాతిని యొక్క మొదటి <p> ఎలిమెంట్ యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:focus input:focus ప్రతి ఫోకస్ పొందిన <input> ఎలిమెంట్ ను ఎంచుకొనుము.
:hover a:hover ముసుకులు పెట్టిన లింక్ పైన ఉన్నది ఎంచుకొనుము.
:in-range input:in-range ప్రతి నిర్దేశించిన విలువల పరిధిలో ఉన్న <input> ఎలిమెంట్ ను ఎంచుకొనుము.
:invalid input:invalid ప్రతి అసలు విలువను కలిగిన <input> ఎలిమెంట్ ను ఎంచుకొనుము.
:lang(language) p:lang(it) ప్రతి lang అటీవు "it" తో మొదలవుతున్న <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:last-child p:last-child తన ప్రాతిని యొక్క చివరి కుమారుడు యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:last-of-type p:last-of-type తన ప్రాతిని యొక్క చివరి <p> ఎలిమెంట్ యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:link a:link ప్రతి సందర్శించని లింక్ ను ఎంచుకొనుము.
:not(selector) :not(p) ప్రతి కాకపోయిన <p> ఎలిమెంట్ యొక్క ఎలిమెంట్ ను ఎంచుకొనుము.
:nth-child(n) p:nth-child(2) తన ప్రాతిని యొక్క రెండవ కుమారుడు యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:nth-last-child(n) p:nth-last-child(2) తన ప్రాతిని యొక్క చివరి కుమారుడు యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము, చివరి కుమారుడు నుండి లెక్కించబడుతుంది.
:nth-last-of-type(n) p:nth-last-of-type(2) తన ప్రాతిని యొక్క రెండవ <p> ఎలిమెంట్ యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము, చివరి కుమారుడు నుండి లెక్కించబడుతుంది.
:nth-of-type(n) p:nth-of-type(2) తన ప్రాతిని యొక్క రెండవ <p> ఎలిమెంట్ యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:only-of-type p:only-of-type తన ప్రాతిని యొక్క ప్రత్యేక <p> ఎలిమెంట్ యొక్క ప్రతి <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:only-child p:only-child తన ప్రాతిని యొక్క ప్రత్యేక కుమారుడు అయిన <p> ఎలిమెంట్ ను ఎంచుకొనుము.
:optional input:optional గరిష్ట "required" అంశాన్ని లేని <input> కొమ్ములను ఎంపికచేయండి.
:out-of-range input:out-of-range గరిష్ట విలువలు నిర్దేశించబడని <input> కొమ్ములను ఎంపికచేయండి.
:read-only input:read-only గరిష్ట "readonly" అంశాన్ని కలిగిన <input> కొమ్ములను ఎంపికచేయండి.
:read-write input:read-write గరిష్ట "readonly" అంశాన్ని లేని <input> కొమ్ములను ఎంపికచేయండి.
:required input:required గరిష్ట "required" అంశాన్ని కలిగిన <input> కొమ్ములను ఎంపికచేయండి.
:root root కొమ్ము యొక్క మూల కొమ్మును ఎంపికచేయండి.
:target #news:target ప్రస్తుతం చేతనమైన #news కొమ్మును ఎంపికచేయండి (అనుచ్ఛేదం పేరును కలిగిన యునైటెడ్ లింకును క్లిక్ చేయండి).
:valid input:valid అన్ని నిజాలను కలిగిన <input> కొమ్ములను ఎంపికచేయండి.
:visited a:visited అన్ని సందర్శించిన లింకులను ఎంపికచేయండి.

అన్ని CSS ప్రోజెక్టర్లు

సెలెక్టర్ ఉదాహరణ ఉదాహరణ వివరణ
::after p::after ప్రతి <p> కొమ్ము తరువాతి కంటెంట్ ప్రవేశపెట్టండి.
::before p::before ప్రతి <p> కొమ్ము ముందుకు కంటెంట్ ప్రవేశపెట్టండి.
::first-letter p::first-letter ప్రతి <p> కొమ్ము యొక్క మొదటి అక్షరాన్ని ఎంపికచేయండి.
::first-line p::first-line ప్రతి <p> కొమ్ము యొక్క మొదటి పదాన్ని ఎంపికచేయండి.
::selection p::selection వినియోగదారు ఎంపికచేసిన కొమ్ము భాగాన్ని ఎంపికచేయండి.