Osnovni CSS: Odabir elemenata, ID i Class

U CSS-u možete odabrati elemente, class i id primijeniti stilove i prilagoditi elemente na svojoj web stranici. Evo detaljnog vodiča o tome kako ih koristiti:

Odabir elemenata

Za odabir svih instanci određenog HTML elementa, koristite naziv elementa kao birač. Na primjer, p odabire sve <p> oznake u dokumentu.

Odabir Class

Za odabir elemenata iste klase upotrijebite točku "." nakon čega slijedi naziv klase. Na primjer, .my-class odabire sve elemente s klasom my-class.

Za odabir elemenata s više klasa upotrijebite točke "." i navedite nazive klasa odvojene razmacima. Na primjer, .class1.class2 odabire elemente s klasama class1 i class2.

Odabir id

Da biste odabrali određeni element prema id, upotrijebite hash "#" iza kojeg slijedi element id. Na primjer, #my-id odabire element pomoću id my-id.

Kombiniranje Element, Class, i ID odabira

Možete kombinirati class odabire elemenata,, i id kako biste ciljali određene elemente s određenim klasama i ID.

Na primjer, div.my-class#my-id odabire <div> element pomoću class my-class  i ID my-id.

Evo konkretnog primjera odabira elemenata, class i id u CSS-u:

/* 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;  
}  

Korištenjem odabira element, class, i id, možete jednostavno odabrati i stilizirati određene elemente ili grupe elemenata na vašoj web stranici.