Mitä first-child ja last-child tarkoittaa?

Uteliasmies82

Opettelin CSS 2.1:tä lukemalla Ohjelmointiputkan CSS tiedostoa http://www.ohjelmointiputka.net/css/sisalto.css?1294943964 . Siinä oli seuraava pätkä:

.taulukkoyla a:first-child:last-child, thead tr a:first-child:last-child {
padding: 0 0.25em;
}

Mitä nuo first- ja last-childit ovat ja miksi validaattori valittaa niistä?

9

532

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Lapsielementit ovat äidin alapuolella (sisällä) olevia elementtejä. Esimerkiksi

      eka
      toka
      kolmas
      neljas


      kaikki -elementit ovat tuon -elementin lapsia. Näistä ensimmäinen, eli eka on first-child ja viimeinen eli neljas tietenkin last-child.

      Se, miksi validaattori valittaa, johtuu siitä, että se olettaa validoitavan css-tiedoston olevan versiota css2.1, mutta ainakin tuo last-child -pseudo kuuluu vasta versioon css3.

      • Tässä tapauksessa kai hämärintä on, miksi CSS-koodissa on
        a:first-child:last-child
        koska sehän viittaa vain sellaisiin a-elementteihin, jotka ovat sekä ensimmäisiä että viimeisiä "lapsia". Eli kyseessä on a-elementti, joka on "isänsä" (lähinnä ulomman elementin) ainoa lapsi, esimerkiksi
        foo ... bar


      • Uteliasmies82
        Yucca kirjoitti:

        Tässä tapauksessa kai hämärintä on, miksi CSS-koodissa on
        a:first-child:last-child
        koska sehän viittaa vain sellaisiin a-elementteihin, jotka ovat sekä ensimmäisiä että viimeisiä "lapsia". Eli kyseessä on a-elementti, joka on "isänsä" (lähinnä ulomman elementin) ainoa lapsi, esimerkiksi
        foo ... bar

        Oikeastaan hämärintä oli se, miksi asiaa ei selitetty Meyerin kirjassa "CSS: The Definitive Guide". Näköjään ominaisuus on CSS 3:n speksejä. En tajunnut, että nykyajan selaimet tukevat jo CSS3:a. Käsittääkseni CSS3 on vasta kehitteillä, joten täytyypä etsiä netistä, milloin speksit valmistuvat.


      • Uteliasmies82 kirjoitti:

        Oikeastaan hämärintä oli se, miksi asiaa ei selitetty Meyerin kirjassa "CSS: The Definitive Guide". Näköjään ominaisuus on CSS 3:n speksejä. En tajunnut, että nykyajan selaimet tukevat jo CSS3:a. Käsittääkseni CSS3 on vasta kehitteillä, joten täytyypä etsiä netistä, milloin speksit valmistuvat.

        :first-child-pseudoluokkaa kuuluu kyllä jo CSS 2.1:een.
        CSS3 on todellakin kehitteillä, eikä sen valmistumista tiedä kukaan (mielipiteitä toki maailmaan mahtuu). Selaintuki vaihtelee paljon, eikä tukea oikeastaan voi edes tarkasti määritellä, ennen kuin jonkinlainen CSS3-määrittely on valmis. CSS3 on joukko erillisiä luonnoksia, joista osa on suhteellisen pitkällä, osa näyttää jämähtäneen paikoilleen. Selaintuesta on melko hyvä tiivistelmä osoitteessa
        http://www.quirksmode.org/css/contents.html

        Jos minulle tulisi kiusaus käyttää :first-child- ja etenkin :last-child-pseudoluokkaa, harkitsisin vakavasti muita vaihtoehtoja tai ainakin varmistamista Javascriptillä. Javascriptillähän voisi melko helposti käydä dokumentin läpi ja lisätä jokaisen elementin ensimmäiseen ja viimeisen lapsielementtiin luokan, esim. first-child ja last-child, ja CSS:ssä voisi sitten kirjoittaa
        :first-child, .first-child { ... }


      • Uteliasmies82
        Yucca kirjoitti:

        :first-child-pseudoluokkaa kuuluu kyllä jo CSS 2.1:een.
        CSS3 on todellakin kehitteillä, eikä sen valmistumista tiedä kukaan (mielipiteitä toki maailmaan mahtuu). Selaintuki vaihtelee paljon, eikä tukea oikeastaan voi edes tarkasti määritellä, ennen kuin jonkinlainen CSS3-määrittely on valmis. CSS3 on joukko erillisiä luonnoksia, joista osa on suhteellisen pitkällä, osa näyttää jämähtäneen paikoilleen. Selaintuesta on melko hyvä tiivistelmä osoitteessa
        http://www.quirksmode.org/css/contents.html

        Jos minulle tulisi kiusaus käyttää :first-child- ja etenkin :last-child-pseudoluokkaa, harkitsisin vakavasti muita vaihtoehtoja tai ainakin varmistamista Javascriptillä. Javascriptillähän voisi melko helposti käydä dokumentin läpi ja lisätä jokaisen elementin ensimmäiseen ja viimeisen lapsielementtiin luokan, esim. first-child ja last-child, ja CSS:ssä voisi sitten kirjoittaa
        :first-child, .first-child { ... }

        Hmm. Onkohan CSS:n syntaksi muuttunut versioiden 2.1 ja 3 välillä, vai miksi yllä oleva tiedosto ei ole validia 2.1:ä, mutta CSS3:n mukaan validoinnissa ei ole ongelmia? Toki validaattorissakin voi olla bugeja.

        Totta. Javascriptillä tuon ominaisuuden saa tehtyä helposti.


      • Uteliasmies82
        Uteliasmies82 kirjoitti:

        Hmm. Onkohan CSS:n syntaksi muuttunut versioiden 2.1 ja 3 välillä, vai miksi yllä oleva tiedosto ei ole validia 2.1:ä, mutta CSS3:n mukaan validoinnissa ei ole ongelmia? Toki validaattorissakin voi olla bugeja.

        Totta. Javascriptillä tuon ominaisuuden saa tehtyä helposti.

        Nyt tajusinkin: :first-child kuuluu CSS 2.1:n spekseihin, mutta :last-child astuu kuvioihin vasta CSS 3:n spekseissä.


      • Jejej
        Uteliasmies82 kirjoitti:

        Nyt tajusinkin: :first-child kuuluu CSS 2.1:n spekseihin, mutta :last-child astuu kuvioihin vasta CSS 3:n spekseissä.

        Niin mielestäni CSS3 ominaisuuksia joiden puuttuminen aiheuttaa lähinnä kosmeettista muutosta voi huoletta käyttää, kuten pyöristetyt kulmat..... Niiden puuttumista pystyy IE:llä paikkaamaan jonkinverran esim http://css3pie.com/

        Jos kiinostaa enempi leikkiä CSS3 kanssa niin http://selectivizr.com/ on tutustumisen arvoinen ja kohtuu hyvin toimiva IE6 - IE8 kanssa. Nykyäänhän JS on lähes pakollinen, joten lähes kaikilla IE:n käyttäjistä se on toiminnassa. Toki sivuston olisi syytä myös toimia ilman JS.


      • Jejej kirjoitti:

        Niin mielestäni CSS3 ominaisuuksia joiden puuttuminen aiheuttaa lähinnä kosmeettista muutosta voi huoletta käyttää, kuten pyöristetyt kulmat..... Niiden puuttumista pystyy IE:llä paikkaamaan jonkinverran esim http://css3pie.com/

        Jos kiinostaa enempi leikkiä CSS3 kanssa niin http://selectivizr.com/ on tutustumisen arvoinen ja kohtuu hyvin toimiva IE6 - IE8 kanssa. Nykyäänhän JS on lähes pakollinen, joten lähes kaikilla IE:n käyttäjistä se on toiminnassa. Toki sivuston olisi syytä myös toimia ilman JS.

        Kyllähän niitä kivalta näyttäviä ominaisuuksia voi käyttää, kunhan huolehtii ja tarkistaa, ettei selaimen tukemattomuus niissä aiheuta mitään ongelmia. Tärkeintä on kuitenkin, että sivut toimivat järkevästi kaikissa ympäristöissä, samalta niiden ei tarvitse näyttää.


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

    Luetuimmat keskustelut

    1. SDP on vastuunkantaja, ja siksi suosituin kansan keskuudessa

      Kiusaamiseenkin SDP puuttuu heti sellaisen tultua ilmi. Esimerkiksi persut lakaisevat nämä maton alle ja pahentavat site
      Maailman menoa
      64
      5941
    2. Persut on Suomen mamutuspuolue nro 1.

      Heti ensimmäisenä persuvuonna 2015 maahantoivat Suomeen 35 tuhatta kunniavierastaan. Tuoreimpana persuvuonna 2025 pers
      Maailman menoa
      71
      4795
    3. Punavihreät puolueet haluavat Suomeen satoja tuhansia kehitysmaalaisia

      SDP, vihreät ja vassarit haluavat nostaa esim. pakolaiskiintiötä todella paljon. Orpon hallituksen aikana maahanmuutto
      Maailman menoa
      47
      4384
    4. SDP:n johto pesi kätensä häirintäkohusta

      "Suurimman oppositiopuolue SDP:n johto olisi todennäköisimmin halunnut vaieta puolueen ympärillä velloneen häirintäkohun
      Maailman menoa
      56
      4151
    5. SDP on selvästi paras valinta äänestyskopissa

      Puolueella on arvomaailma kohdallaan, sillä on hyvä CV itsenäisen Suomen historiassa vastuunkantajana ja hyvinvointivalt
      Maailman menoa
      95
      3761
    6. SDP:n selitykset ontuu pahasti - "On käsitelty heti, mutta kukaan ei tiedä"

      Kokoomuslaiset pistää taas demareita nippuun. Tuppuraisen mukaan mukaan SDP:n useat ahdistelutapaukset on käsitelty het
      Maailman menoa
      50
      2473
    7. Oletko nainen turhautunut, kun en tule juttelemaan siellä?

      Haluaisin tottakai tulla. Älä käsitä väärin. Ehkä ensi kerralla?
      Ikävä
      35
      2379
    8. Kähmijä puolueen kannatus romahtamassa

      Erityisesti naiset ovat suuttuneet SDP:lle kertoo asiantuntijat
      Maailman menoa
      44
      2108
    9. Persut pettävät ja valehtelevat aina

      Petoksistahan jää kiinni kuten olemme persujen kannatusromahduksesta nähneet, mutta siitä huolimatta persut jatkavat val
      Maailman menoa
      4
      1469
    10. En uskalla ees ajatella muru

      Miten mulle ois käynyt näiden raskaiden vuosien aikana jos sua ei ois ollut 🥺😧❤️ Sä oot ollut mun henkisenä tukena iha
      Ikävä
      13
      1239
    Aihe