CSS 伪元素

ప్రతీకలు ఏమిటి?

CSS ప్రతీకలు అంశం యొక్క నిర్దిష్ట భాగానికి శైలిని నిర్ణయించడానికి ఉపయోగిస్తాయి

ఉదాహరణకు, ఇది ఉపయోగించబడవచ్చు:

  • అంశం యొక్క ప్రథమ అక్షరం, ప్రథమ పంక్తి శైలిని నిర్ణయించడానికి ఉపయోగిస్తారు
  • అంశం యొక్క సారాంశం ముందు లేదా తరువాత సారాంశాన్ని జోడించడానికి ఉపయోగిస్తారు

సింహాసనం

ప్రతీకల సింహాసనం:

selector::ప్రతీకాలు {
  అట్రిబ్యూట్: విలువ;
}

::first-line ప్రతీక

::first-line ప్రతీకలు ప్రథమ పంక్తికి ప్రత్యేక శైలిని జోడిస్తాయి。

ఈ ఉదాహరణలో అన్ని <p> అంశాలకు ప్రథమ పంక్తికి శైలిని జోడిస్తాయి:

ఉదాహరణ

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

స్వయంగా ప్రయత్నించండి

మెరుగుపరచండి:::first-line ప్రతీకలు మాత్రమే బ్లాక్ అంశాలకు వర్తిస్తాయి。

ఈ అట్రిబ్యూట్స్ వర్తిస్తాయి: ::first-line ప్రతీకలు:

  • ఫంట్ అట్రిబ్యూట్స్
  • రంగు అట్రిబ్యూట్స్
  • బ్యాక్‌గ్రౌండ్ అట్రిబ్యూట్స్
  • వర్డ్ స్పేసింగ్
  • లెటర్ స్పేసింగ్
  • text-decoration
  • వర్టికల్ అలైన్‌మెంట్
  • text-transform
  • line-height
  • clear

దయచేసి గమనించండిరెండు స్లాంటర్ సింహాసనాన్ని వాడండి - ::first-line కించపడుతుంది :first-line

CSS3 లో, రెండు స్లాంటర్లు ప్రతీకల ఒక స్లాంటర్ సింహాసనాన్ని పునఃప్రతిపాదించాయి. ఇది W3C ప్రతీకలను మరియు ప్రతీకలను వేరు చేసుకోవాలని ప్రయత్నిస్తోంది.ప్రతీకాలుమరియుప్రతీకప్రయత్నం.

CSS2 మరియు CSS1 లో, ప్రతీకలు మరియు ప్రతీకలు ఒక స్లాంటర్ సింహాసనాన్ని వాడుతాయి。

ముందస్తు సహకారం కొరకు, CSS2 మరియు CSS1 ప్రతీకలు ఒక స్లాంటర్ సింహాసనాన్ని అంగీకరిస్తాయి。

::first-letter ప్రతీక

::first-letter ప్రతీకలు ప్రథమ అక్షరానికి ప్రత్యేక శైలిని జోడిస్తాయి。

ఈ ఉదాహరణలో అన్ని <p> అంశాలకు ప్రథమ అక్షరం ఫార్మాట్ అనుసరిస్తాయి:

ఉదాహరణ

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

స్వయంగా ప్రయత్నించండి

మెరుగుపరచండి:::first-letter ప్రతీకలు మాత్రమే బ్లాక్ అంశాలకు వర్తిస్తాయి。

ఈ అట్రిబ్యూట్స్ ::first-letter ప్రాతిమా ప్రతీకకు వర్తిస్తాయి:

  • ఫంట్ అట్రిబ్యూట్స్
  • రంగు అట్రిబ్యూట్స్
  • బ్యాక్‌గ్రౌండ్ అట్రిబ్యూట్స్
  • మేరుబార్డర్ అట్రిబ్యూట్స్
  • ఇన్‌పేడింగ్ అట్రిబ్యూట్స్
  • బార్డర్ అట్రిబ్యూట్స్
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

ప్రత్యార్థక ఎలిమెంట్స్ మరియు CSS క్లాస్

ప్రత్యార్థక ఎలిమెంట్స్ ను CSS క్లాస్లతో కలపవచ్చు:

ఉదాహరణ

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

స్వయంగా ప్రయత్నించండి

పైని ఉదాహరణ రెడ్ రంగులో మరియు పెద్ద ఫాంట్ లో class="intro" పద్యానికి మొదటి అక్షరాన్ని ప్రదర్శిస్తుంది.

పలు ప్రత్యార్థక ఎలిమెంట్స్

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

ఈ ఉదాహరణలో పద్యం యొక్క మొదటి అక్షరం ఎరుపు రంగులో మరియు xx-large ఫాంట్ సైజ్ లో ఉంటుంది. మొదటి పంక్తి యొక్క మిగిలిన భాగం నీలి రంగులో మరియు చిన్న కేప్స్ ఫాంట్ లో ఉంటుంది. ఈ పద్యం యొక్క మిగిలిన భాగం డిఫాల్ట్ ఫాంట్ సైజ్ మరియు రంగులో ఉంటుంది:

ఉదాహరణ

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

స్వయంగా ప్రయత్నించండి

CSS - ::before ప్రత్యార్థక ఎలిమెంట్

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

ఈ ఉదాహరణలో ప్రతి <h1> ఎలిమెంట్ యొక్క కంటెంట్ ముందు ఒక చిత్రాన్ని ప్రవేశపెట్టబడుతుంది:

ఉదాహరణ

h1::before {
  content: url(smiley.gif);
}

స్వయంగా ప్రయత్నించండి

CSS - ::after ప్రత్యార్థక ఎలిమెంట్

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

ఈ ఉదాహరణలో ప్రతి <h1> ఎలిమెంట్ యొక్క కంటెంట్ తరువాత ఒక చిత్రాన్ని ప్రవేశపెట్టబడుతుంది:

ఉదాహరణ

h1::after {
  content: url(smiley.gif);
}

స్వయంగా ప్రయత్నించండి

CSS - ::selection ప్రత్యార్థక ఎలిమెంట్

::selection ప్రత్యార్థక ఎలిమెంట్స్ యొక్క ఉపయోగదారు ఎంపికచేసిన భాగానికి సరిపోయే ప్రత్యార్థక ఎలిమెంట్స్

ఈ CSS అటువంటి ప్రత్యార్థక ఎలిమెంట్స్ కు వర్తిస్తాయి ::selection:

  • color
  • background
  • కర్సర్
  • ఆక్స్లైన్

ఈ ఉదాహరణలో ఎంపికచేసిన టెక్స్ట్ పసుపు బ్యాక్గ్రౌండ్ పై ఎరుపు రంగులో ప్రదర్శించబడుతుంది:

ఉదాహరణ

::selection {
  color: red; 
  background: yellow;
}

స్వయంగా ప్రయత్నించండి

అన్ని CSS ప్రత్యార్థక ఎలిమెంట్స్

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

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

పరిశీలకం ఉదాహరణ ఉదాహరణ వివరణ
:active a:active ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:checked input:checked ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:disabled input:disabled ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:empty p:empty ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:enabled input:enabled ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:first-child p:first-child ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:first-of-type p:first-of-type ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:focus input:focus ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:hover a:hover ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:in-range input:in-range ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:invalid input:invalid ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.:lang() p:lang(it) ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:last-child p:last-child నిర్వచించబడిన ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:last-of-type p:last-of-type నిర్వచించబడిన ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:link a:link ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:not(selector) :not(p) ప్రతి పరిశీలకంలో పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:nth-child(n) p:nth-child(2) నిర్వచించబడిన ప్రతి పరిశీలకంలో ప్రతి పరిశీలకం పైని రెండవ పరిశీలకం ఎంచుకోండి.
:nth-last-child(n) p:nth-last-child(2) నిర్వచించబడిన ప్రతి పరిశీలకంలో పరిశీలకం పైని రెండవ పరిశీలకం పైని పరిశీలకం ఎంచుకోండి.
:nth-last-of-type(n) p:nth-last-of-type(2) పిత్రికలో రెండవ <p> మెటాడాటాను ఎంపికచేయండి.
:nth-of-type(n) p:nth-of-type(2) తన పిత్రికలో రెండవ పిల్లను ఎంపికచేయండి.
:only-of-type p:only-of-type తన పిత్రికలో ఏకమైన పిల్లను కలిగిన ప్రతి <p> మెటాడాటాను ఎంపికచేయండి.
:only-child p:only-child తన పిత్రికలో ఏకమైన పిల్లను ఎంపికచేయండి.
:optional input:optional నిబంధన "required" లేని <input> మెటాడాటాలను ఎంపికచేయండి.
:out-of-range input:out-of-range నిబంధన "required" లేని <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 అన్ని సందర్శించిన లింకులను ఎంపికచేయండి.