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 मा उन्नत तत्व चयन देखाउँछन्। तपाइँ यी प्रविधिहरूलाई तपाइँको वेब पृष्ठमा चाहना अनुसार शैली र अनुकूलन तत्वहरूलाई अनुकूलित गर्न र लागू गर्न सक्नुहुन्छ।