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 માં અદ્યતન તત્વ પસંદગી દર્શાવે છે. તમે ઇચ્છિત તરીકે તમારા વેબ પૃષ્ઠ પરના ઘટકોને સ્ટાઇલ અને કસ્ટમાઇઝ કરવા માટે આ તકનીકોને કસ્ટમાઇઝ અને લાગુ કરી શકો છો.