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() निवडकर्ता

निवडकर्ता तुम्हाला विशिष्ट निवडकर्त्याशी जुळणारे घटक निवडण्याची परवानगी देतो. उदाहरणार्थ, वर्ग नसलेल्या घटकांची निवड करते, आयडी नसलेले घटक निवडते. :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 मधील प्रगत घटक निवड दर्शवतात. तुम्‍ही तुमच्‍या वेब पृष्‍ठावरील घटकांना स्‍टाइल आणि सानुकूलित करण्‍यासाठी ही तंत्रे सानुकूलित आणि लागू करू शकता.