મૂળભૂત CSS: તત્વો, ID અને પસંદ કરી રહ્યા છીએ Class

CSS માં, તમે તમારા વેબ પૃષ્ઠ પર તત્વો પસંદ કરી શકો છો class, અને શૈલીઓ લાગુ કરી શકો છો અને ઘટકોને કસ્ટમાઇઝ કરી શકો છો. id તેનો ઉપયોગ કેવી રીતે કરવો તેની વિગતવાર માર્ગદર્શિકા અહીં છે:

તત્વો પસંદ કરી રહ્યા છીએ

ચોક્કસ HTML ઘટકના તમામ ઉદાહરણો પસંદ કરવા માટે, પસંદગીકાર તરીકે તત્વ નામનો ઉપયોગ કરો. ઉદાહરણ તરીકે, દસ્તાવેજમાંના p તમામ ટૅગ્સ પસંદ કરે છે. <p>

પસંદ કરી રહ્યા છીએ Class

સમાન વર્ગ સાથે તત્વો પસંદ કરવા માટે, "" ડોટનો ઉપયોગ કરો. વર્ગનું નામ અનુસરે છે. ઉદાહરણ તરીકે, .my-class વર્ગ સાથેના તમામ ઘટકો પસંદ કરે છે my-class.

બહુવિધ વર્ગો સાથે તત્વો પસંદ કરવા માટે, બિંદુઓનો ઉપયોગ કરો "." અને જગ્યાઓ દ્વારા અલગ કરેલ વર્ગના નામોની યાદી બનાવો. ઉદાહરણ તરીકે, .class1.class2 બંને class1 અને class2 વર્ગો સાથે તત્વો પસંદ કરે છે.

પસંદ કરી રહ્યા છીએ id

ચોક્કસ તત્વને તેના દ્વારા પસંદ કરવા માટે id, હેશ "#" ને અનુસરતા તત્વનો ઉપયોગ કરો id. ઉદાહરણ તરીકે, #my-id સાથે તત્વ પસંદ કરે છે id my-id.

Element, Class, અને ID પસંદગીઓનું સંયોજન

તમે class ચોક્કસ વર્ગો અને ID.

ઉદાહરણ તરીકે,  અને સાથે તત્વ div.my-class#my-id પસંદ કરે છે. <div> class my-class ID my-id

અહીં ઘટકો પસંદ કરવાનું ચોક્કસ ઉદાહરણ છે, class અને id CSS માં:

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}  

element, , અને id પસંદગીનો ઉપયોગ કરીને class, તમે તમારા વેબ પેજ પર ચોક્કસ ઘટકો અથવા તત્વોના જૂથોને સરળતાથી પસંદ કરી શકો છો અને શૈલી બનાવી શકો છો.