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

1308

    Vastaukset

    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. Anteeksi mies

      En vaan osaa kohdata sinua ja olla normaali. En tiedä mikä vaivaa. Samaan aikaan tekee mieli tulla lähelle ja kuitenkin
      Ikävä
      57
      9237
    2. Mietin aina vain

      Minä niin haluaisin nähdä sinut. Ei tuo yhden ainoan kuvan katsominen paljon helpota... Miksi sinä et voisi olla se roh
      Tunteet
      12
      3659
    3. Hetken jo luulin, että en ikävöi sinua koko aikaa

      Mutta nyt on sitten taas ihan hirveä ikävä jotenkin. Tiedätköhän sinä edes, kuinka peruuttamattomasti minä olen sinuun r
      Ikävä
      30
      3002
    4. Kysely lieksan miehille

      Olemme tässä pohtineet tällaista asiaa, että miten on. Tästä nyt on paljon ollut juttua julkisuudessakin aina sanomaleht
      Lieksa
      86
      2293
    5. Palstan henkisesti sairaat ja lihavat

      Täällä on sairaita, työttömiä ihmisiä kirjoittelemassa joilla ei ole tarkoituksena kuin satuttaa ihmisiä. Jos eksyt pals
      Ikävä
      114
      2070
    6. Outoa että Trump ekana sanoutui irti ilmastosopimuksesta

      kun Kaliforniaa riepottelee siitä johtuvat tuhoisat maastopalot. Hirmumyrskytkin ovat USA:ssa olleet tuhoisia.
      Maailman menoa
      371
      1873
    7. Saan kengurakkaan kotiin viikon päästä

      Mitä tapahtui? Martina hehkutti tätä stoorissaan reilu viikko sitten, mutta eipä aussimiestä Suomessa näkynyt, vaan tapa
      Kotimaiset julkkisjuorut
      241
      1482
    8. FinFamin ryhmät

      Älkää hyvät ihmiset luottako tähän tahoon. Ryhmiä on, mutta eivät ne toimi. Ihmisiä savustetaan ulos, vaikka näissä piir
      Salo
      0
      1231
    9. Osmo Peltola voitti ansaitusti Kultaisen Venlan - Kirvoitti yleisöltä mahtavan reaktion!

      JEE, onnea Osmo! Osmo Peltola voitti Vuoden esiintyjän Kultainen Venla -palkinnon. Isä-Peltsin ja Osmon luontoseikkailu
      Suomalaiset julkkikset
      73
      1108
    10. Olen vähän

      Hysteerinen se on totta. Etkai ymmärrä miten syvästi tunnen sinua kohtaan. Ja olet aina lähelläni. Olet osa jo jotain. I
      Ikävä
      10
      1105
    Aihe