Ի՞նչ տարբերություններ գիտեք դասերի և նույնականացուցիչների (ID) միջև։

Սելեկտորներ class և id օգտագործվում են HTML-ում տարրեր ընտրելու և նրանց վրա ոճեր կամ սցենարներ կիրառելու համար:

Հիմնական տարբերությունները՝

• Անվտանգություն:
  • id պետք է լինի յուրահատուկ ամբողջ HTML էջում: Յուրաքանչյուր տարր կարող է ունենալ միայն մեկ id, և էջում չպետք է լինեն երկու տարրեր նույն id-ով:
  • class կարող է բազմակի օգտագործվել նույն էջում: Մի քանի տարրեր կարող են ունենալ նույն class, և մեկ տարր կարող է ունենալ մի քանի դաս:
• Հատուկություն:
  • id ունի ավելի բարձր հատուկություն (շաքար) ոճերի կիրառման ժամանակ համեմատ class-ի հետ: id-ով սահմանված ոճը կգերակայի class-ով կամ տեգով սահմանված ոճին, եթե չկա ավելի հատուկ կանոն:
  • class-ը ունի ավելի ցածր հատուկություն, քան id, բայց ավելի բարձր, քան տեգի սելեկտորները:
• Օգտագործում JavaScript-ում:
  • id հաճախ օգտագործվում է միակ տարր ստանալու համար DOM-ից document.getElementById()-ով, ինչը արագ միջոց է տարրին հասնելու:
  • class սովորաբար օգտագործվում է տարրերի խմբի ընտրության համար document.getElementsByClassName() կամ document.querySelectorAll()-ով:

Օրինակ՝

HTML:

<div id="unique-element" class="styled-box">
  Միայնական տարր
</div>
<div class="styled-box">
  Առաջին խմբի տարր
</div>
<div class="styled-box highlight">
  Երկրորդ խմբի տարր (հավելյալ դասով)
</div>

CSS:

#unique-element {
  /* Ոճ միայն միակ տարրին */
  color: red;
}

.styled-box {
  /* Ոճ խմբի տարրերի համար */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Հավելյալ ոճ որոշ տարրերի համար */
  background-color: yellow;
}

Համեմատության աղյուսակ՝

Գծագիր	ID (Համարանիշ)	Class (Դաս)
Անվտանգություն	Յուրահատուկ էջում	Կարող է կրկնվել
Օգտագործում	Մի տարր կարող է ունենալ միայն մեկ ID	Մի տարր կարող է ունենալ մի քանի դասեր
Հատուկություն	Բարձր	Միջին
Օգտագործում JS-ում	getElementById()	getElementsByClassName(), querySelectorAll()
Նպատակը	Յուրահատուկ տարրին նույնականացնել	Խմբավորել տարրերը ընդհանուր հատկություններով

Սխալ չօգտագործել id և class ճիշտ կազմակերպելու համար՝ կոդի կազմակերպության, ոճերի մաքուրության և սցենարների արդյունավետ աշխատանքի համար։ id-ը պետք է օգտագործել խնայողաբար՝ միայն իսկապես յուրահատուկ տարրերի համար, իսկ class-ը՝ ոճերի համար, որոնք կարող են կիրառվել մի քանի տարրերի վրա կամ խմբավորել տարրերը նույն վարքագծով։