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 ਵਿੱਚ ਉੱਨਤ ਤੱਤ ਚੋਣ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ। ਤੁਸੀਂ ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਨੂੰ ਆਪਣੇ ਵੈਬ ਪੇਜ 'ਤੇ ਲੋੜੀਂਦੇ ਤੱਤਾਂ ਨੂੰ ਸ਼ੈਲੀ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਅਨੁਕੂਲਿਤ ਅਤੇ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।