CSSలో అధునాతన మూలకం ఎంపిక- సాంకేతికతలు మరియు ఉదాహరణలు

నకిలీ తరగతులు

ఒక మూలకం యొక్క నిర్దిష్ట రాష్ట్రాలు లేదా స్థానాలను ఎంచుకోవడానికి నకిలీ తరగతులు మిమ్మల్ని అనుమతిస్తాయి. ఉదాహరణకు, :hover మౌస్ పాయింటర్ దానిపై ఉన్నప్పుడు ఎలిమెంట్‌ను ఎంచుకుంటుంది, :focus ఎలిమెంట్‌ని ఎంచుకున్నప్పుడు లేదా ఫోకస్ చేసినప్పుడు ఎలిమెంట్‌ను ఎంచుకుంటుంది, :nth-child() సమూహంలోని నిర్దిష్ట చైల్డ్ ఎలిమెంట్‌ను ఎంచుకుంటుంది.

ఉదాహరణలు:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

నకిలీ మూలకాలు

ఇప్పటికే ఉన్న ఎలిమెంట్‌ను అనుకూలీకరించడానికి వర్చువల్ ఎలిమెంట్‌లను సృష్టించడానికి సూడో-ఎలిమెంట్‌లు మిమ్మల్ని అనుమతిస్తాయి.

ఉదాహరణకు, ఒక మూలకానికి ముందు మరియు తర్వాత మూలకాలను సృష్టించండి ::before మరియు మూలకం యొక్క మొదటి పంక్తి మరియు మొదటి అక్షరాన్ని ఎంచుకోండి. ::after ::first-line ::first-letter

ఉదాహరణలు:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

కాంబినేటర్లు

సెలెక్టర్‌లను వారి సంబంధాన్ని బట్టి ఎలిమెంట్‌లను ఎంచుకోవడానికి కాంబినేటర్‌లు మిమ్మల్ని అనుమతిస్తాయి. ఉదాహరణకు, లోపల element1 element2 ఎంచుకుంటుంది, యొక్క డైరెక్ట్ చైల్డ్ ఎలిమెంట్‌లను ఎంచుకుంటుంది, తర్వాత వెంటనే ఎంపిక చేస్తుంది. element2 element1 element1 > element2 element1 element1 + element2 element2 element1

ఉదాహరణలు:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

అట్రిబ్యూట్ సెలెక్టర్లు

అట్రిబ్యూట్ సెలెక్టర్లు వాటి లక్షణాల విలువ ఆధారంగా మూలకాలను ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తాయి. ఉదాహరణకు, [attribute] ఎలిమెంట్స్‌తో ఎలిమెంట్స్‌ని ఎంచుకుంటుంది attribute, [attribute=value] ఎలిమెంట్స్‌కి attribute ఈక్వల్‌గా ఎలిమెంట్స్‌ని ఎలెక్ట్ చేస్తుంది value, [attribute^=value] ఎలిమెంట్స్‌ని ఎలిమెంట్స్ ఎలిమెంట్స్‌తో attribute స్టార్ట్ అవుతుంది value.

ఉదాహరణలు:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

:not() సెలెక్టర్

నిర్దిష్ట సెలెక్టర్‌తో సరిపోలని ఎలిమెంట్‌లను ఎంచుకోవడానికి సెలెక్టర్ మిమ్మల్ని అనుమతిస్తుంది. ఉదాహరణకు, క్లాస్ లేని ఎలిమెంట్‌లను ఎంచుకుంటుంది, ID లేని ఎలిమెంట్‌లను ఎంచుకుంటుంది. :not() :not(.class) class :not(#id) id

ఉదాహరణలు:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

ఈ ఉదాహరణలు CSSలో అధునాతన మూలకం ఎంపికను ప్రదర్శిస్తాయి. మీరు ఈ టెక్నిక్‌లను స్టైల్‌కు అనుకూలీకరించవచ్చు మరియు వర్తింపజేయవచ్చు మరియు మీ వెబ్ పేజీలోని ఎలిమెంట్‌లను కావలసిన విధంగా అనుకూలీకరించవచ్చు.