Różnica między id a class


(system) #1

Witam.

Chciałem zapytać jak wytłumaczyć prostym językiem różnicę między class i id. przykładowo mamy blok

a

, czy to się różni w praktyce? jakie jest zastosowanie klas ?

pozdrawiam


(adam749) #2

ID może się pojawić tylko raz w dokumencie (określa unikalne elementy). Class możesz przypisać wielu elementom.


(Grzesiek1) #3

W sumie różnic między działaniem technicznym zbytnio nie ma, poza za tym że id robimy do jakichś pojedyńczych elementów, bo wartość tego atrybutu nie może się dublować, a class może być wielokrotnie powtarzane.

Ma to raczej znaczenie czysto sematyczne, mniej już techniczne.


(Capletonmix) #4

nie jestem profesjonalistą, więc poprawcie mnie jeśli się mylę…

ale moim zdaniem ta odpowiedz nie jest poprawna.

bo nic się złego nie stanie jeśli będę używał id tak jak class

byle tylko kod cssa był dobry

czy nie tak?


(mktos) #5

Nie. Id musi być unikalne. No i jeżeli użyjesz kilka razy tego samego id to kod CSS może i będzie dobry, ale HTML - już nie.

Nie jest używane tylko przez CSS, ale i przez np. JavaScript - skoro metoda getElementById() zwraca JEDEN element o danym id, to nie może istnieć kilku elementów o danym id, bo się wszystko posypie, prawda?


(Marek Ciarkowski) #6

Jeżeli chcesz używać JS, jquery, komunikować np flasha z html i js itd to pilnuj zasad tak jak napisał Nemhein bo wszystko w pewnym momencie przestanie działać i się wtedy zdziwisz.


(Slawko S) #7

Dzięki - jesteście wielcy - tej odpowiedzi szukałem dłuuuuuuuuuuuuuuugo !

W końcu mogę spać spokojnie ------

Czemu od razu na chłopski rozum nie można było od razu napisać - że jak ID się użyje kilka razy to się może coś popsuć!

Byłby spokój - no a ja ze wsi to wiecie :slight_smile:


(ra-v) #8

Użycie ID kilkukrotnie jest niezgodne z założeniami W3C, CSS zadziała jak powinien. Ale jeśli póxniej wpuścisz elementy JavaScript to może coś nie zadziałać, więc lepiej robić przyszłościowo i stosować unikalne ID w HTMLu.


(Kloc221) #9

Dokładnie strona nie przejdzie przez validiator…