सीएसएस में उन्नत तत्व चयन- तकनीकें और उदाहरण

छद्म कक्षाएं

छद्म वर्ग आपको किसी तत्व की विशिष्ट अवस्थाओं या स्थितियों का चयन करने की अनुमति देते हैं। उदाहरण के लिए, :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() चयनकर्ता

चयनकर्ता आपको उन तत्वों का चयन करने की अनुमति देता है जो किसी विशिष्ट चयनकर्ता से मेल नहीं खाते हैं। उदाहरण के लिए, उन तत्वों का चयन करता है जिनमें वर्ग नहीं है, उन तत्वों का चयन करता है जिनमें आईडी नहीं है । :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;  
}  

 

ये उदाहरण सीएसएस में उन्नत तत्व चयन को प्रदर्शित करते हैं। आप इन तकनीकों को अपने वेब पेज पर इच्छानुसार तत्वों को स्टाइल और अनुकूलित करने के लिए अनुकूलित और लागू कर सकते हैं।