Mitä käytännön eroa "id" ja "class" atribuuteilla?

En.Ymmärrä

Yritän opetella html-kieltä. Olen W3-oppaan CSS-kohdassa. Ihmettelen hieman id- ja class-attribuuttien eroja, koska ne näyttävät toimivan aivan samalla tavalla. Sanotaan ettei id-attribuuttia saisi käyttää sivulla kuin kerran, mutta miksi se kuitenkin toimii myös useamman kerran?

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_id

Jos tuossa yläpuolisen linkin editorissa kopioi "I am different" rivin uudelleen, niin kyllä se toinenkin rivi näkyy ihan hyvin. Vastaavalla tavalla kuin tässä alapuolisessa class-atribuuttia käyttävässä esimerkissä.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_class

5

1621

    Vastaukset 5

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • The_Real_J

      id-attribuuttia pitäisi käyttää vain yhdessä paikassa, esimerkiksi navigointipalkille varatussa kentässä. Tällöin id-attribuutti määrittelee missä paikassa kyseinen lohko on.

      class-attribuutilla voidaan merkitä yleisesti lohkot, joille halutaan tietynlainen muotoilu ja niitä voi olla useita. Esimerkiksi jos halutaan muotoilla lähdekoodia sisältävät lohkot tietyllä tavalla (tasalevyinen fontti, tietty taustan/tekstin väri, rajaus halutulla tavalla) voidaan merkitä kaikki kohdat joissa niitä on kyseisellä luokalla.

      • En.Ymmärrä

        Eli class-attribuutti on nähtävästi järkevämpi noihin muotoiluihin, mutta id taas sitten muunlaisiin asetuksiin?

        Katselin tämän sivuston lähdekoodia, ja huomasin että molempia attribuutteja voi käyttää myös yhtä aikaa:

        <div class="collapse navbar-collapse" id="s24-navbar-collapse-1">

        Määrittääkö tuossa class siis ulkoasun, ja tuo id on taas joku kyseisen objektiin liittyvä ominaisuus?


      • En.Ymmärrä kirjoitti:

        Eli class-attribuutti on nähtävästi järkevämpi noihin muotoiluihin, mutta id taas sitten muunlaisiin asetuksiin?

        Katselin tämän sivuston lähdekoodia, ja huomasin että molempia attribuutteja voi käyttää myös yhtä aikaa:

        <div class="collapse navbar-collapse" id="s24-navbar-collapse-1">

        Määrittääkö tuossa class siis ulkoasun, ja tuo id on taas joku kyseisen objektiin liittyvä ominaisuus?

        Selvennetään vielä: ID-attribuutilla annetaan tarvittaessa elementeille yksilöllinen tunnus, jonka ansiosta ne erottuvat kaikista muista dokumentin elementeistä. CLASS-attribuutilla taas erotetaan elementtejä kuulumaan yhteen tai useampaan luokkaan. Erilaiset elementit voivat kuulua samaan luokkaan.

        Käytännössä siis ero on siinä että ID-attribuutin, eli yksilöölisen tunnisteen avulla mahdollistuu esimerkiksi linkkien, tyylimäärityksien ja skriptien kohdistaminen tiettyyn dokumentissa uniikkiin elementtiin. CLASS-attribuutilla, eli yleisellä luokalla voidaan sitten kohdistaa tyylejä ja skriptejä useampaan samaan luokkaan kuuluviin elementteihin. Tässä myös näkyy 1. käytännön eroavaisuus: linkittää voidaan vaan yksilöityyn ID-entifioituun kohteeseen (siksi myös rajoitus: yksi ID per dokumentti). 2. käytännön ero on siinä että ID hyväksyy vain yhden arvon (vertaa ihmisen henkilötunnukseen), kun taas CLASS-attribuutin arvoksi voidaan antaa useampi arvo, jolloin joku elementti voi kuulua useampaan eri luokkaan samanaikaisesti.

        Antamassasi esimerkkikoodissa tod. näk. molemmat attribuutit ovat siellä tyylejä varten, jolloin ID: "s24-navbar-collapse-1" toimii koukkuna vain siihen näin yksilöityyn DIV-elementtiin ja CLASS: "collapse navbar-collapse" yhdistää DIVin kahteen eri luokkaan (luokkanimet erotetaan toisistaan tyhjällä tilalla), joita sitten oletettavasti käytetään myös muuallakin dokumentissa. Eli tyyleistä jostain löytynee kolme valitsinta:

        #s24-navbar-collapse-1 {...}
        .collapse {...}
        .navbar-collapse{...}

        joiden deklaraatioita sitten käytetään kyseisen DIVin lopullisen ulkoasun määrittämiseen. Vielä nyrkkisääntö: suosi luokkia, käytä IDeetä vain pakottavissa tapauksissa.


    • opetettuväärinkö

      Onkohan tässä mitään logiikka? (Näin mulle joskus opetettiin)
      class tulisi käyttää vain fonttien tyylimäärittelyissä
      ja id muussa sijoittelussa ja muissa ominaisuuksissa.

      • ID ja CLASShan ovat merkkauskielen rakenteita, joihin sitten CSS-valitsimien (selektoreiden) avulla voidaan yhdistää tyylideklaraatioita (ominaisuuksia arvoineen). Toisin sanoen: valitsimet ovat kaavoja, jotka vastaavat HTML- tai XML-dokumenttipuiden solmuja, eikä CSS:n kannalta ole mitään merkitystä minkälaisia deklaraatioita yhdistetään milläkin valitsimella, oli sitten kyseessä luokkavalitsin (CLASS), tahi tunnistevalitsin (ID), tai joku muu:

        http://weppipakki.com/css/tekstit/selektor.htm

        Eli, en näe logiikkaa tuollaisessa opetuksessa, eikä mieleen tule mitään historiallistakaan syytä moiseen. Päinvastoin, tuollainenhan käytännössä vaikeuttaisi tyylien ylläpitoa enemmän kuin kohtuuttomasti (se olisi täydellinen vastakohta jo mainitsemalleni nyrkkisäännölle: vältä tunnisteita, suosi luokkia.

        Mielenkiinnosta vilkaisin tämän sivun tyylejä:

        view-source:https://keskustelu.suomi24.fi/css/styles.css?v=1.49.2

        joista en äkkiseltään löytänyt kuin yhden tunnisteselektorin, mutta satoja luokkaselektoreita :)


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Tässä ovat Elämäni biisi vieraat lauantai 19.9. - Yksi vieras on kohuttu TTK-juontajaehdokas

      Elämäni biisi vieraslista on harvinaisen mielenkiintoinen lauantaina. Mukana myös kohuttu TTK-juontajaehdokas, josta ei
      Tv-sarjat
      20
      1334
    2. Mies joka on oikeasti kiinnostunut

      Ja näkee sut pitkäaikaisena kumppanina, siirtää vaikka vuoria selvittääkseen asiat eikä ota pienintäkään riskiä menettää
      Ikävä
      133
      1231
    3. 64
      1220
    4. Mikä sun salaisuus on,kun näytät niin nuorelta..

      Vaikka oot jo noin vanha!?
      Ikävä
      108
      1205
    5. Kunnanhallitus

      Miten käy täällä vuosia tuomioita jakaneelle valittajalle, hovioikeus hylännyt kaikki syytteet.
      Puolanka
      67
      1039
    6. Onko nyt kaikki asiat käyty läpi?

      Mun mielestä on👍
      Ikävä
      109
      999
    7. Rauha, sopiiko

      Ei häiritä enää toisiamme. Annetaan molemmille rauha unohtaa, pyydän tätä todella. Kiitos. Miehelle.
      Ikävä
      94
      957
    8. Miesten (epä)viehättävyydestä kysymys

      Mieltä askarruttava asia, liki dilemma. Palstallahan jotkut miesoletetut usein toteavat, että kaikki naiset tavoittelev
      Sinkut
      182
      923
    9. Minkä kappaleen

      haluaisit soivan, kun astellaan alttarille?
      Ikävä
      84
      847
    10. MiltäKaivattusi

      Näyttää? !
      Ikävä
      43
      824
    11. Ei siitä pääse yli, eikä ympäri!

      Pakko se on myöntää ja tunnustaa. Olisin halunnut p*nna sinua sydämeni kyllyydestä. Itseäni vanhemmalle naiselle
      Ikävä
      66
      791
    12. Myönnetään, tunnen lämpimiä tunteita kohtaasi

      Vaikutat tosin liian hyvältä ollaksesi totta. Komeita miehiä on maailma pullollaan mutta sinussa on jotain.....
      Ikävä
      50
      676
    13. Vieläkö tykkäät

      Minusta niin paljon että olisit valmis?
      Ikävä
      43
      656
    14. Tykkäätkö minusta

      Mies vai et? -nainen
      Ikävä
      58
      653
    15. Mitä meidän välillämme

      On käynyt näiden vuosien aikana?
      Ikävä
      70
      636
    16. Olit hyödytön.

      Mulle hyödytön..
      Ikävä
      98
      628
    17. Humppila korvasi johtajia tekoälyllä

      https://yle.fi/a/74-20215155 Humppilassa on lakkautettu teknisen ja hallintojohtajan virat. Säästöä tuli hetkessä 150
      Maailman menoa
      87
      608
    18. Perhoseni (miehelle)

      Miksi et usko, että mun rakkaus sinuun on aitoa ja vilpitöntä? Tai että se oli jo silloin? Miksi ajattelet, ettet ole r
      Ikävä
      123
      582
    19. Olen tavattavissa

      tänään klo 17-02 siinä ravintolassa. Tulethan sinäkin?
      Ikävä
      52
      564
    20. Kumpi tästä nyt

      Teki niin vaikeaa?
      Ikävä
      60
      544
    Aihe