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

602

    Vastaukset 9

    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. Olen nainen pahoillani, että tykkään sinusta niin paljon, että

      Haluaisin panna sua. Tuntuu vaan siltä, että olet sen suhteen ihan haluton. Ei minulle riitä pelkkä ystävyyssuhde.
      Ikävä
      89
      1368
    2. Puukotus Kajaanissa

      Kuka puukotti ja ketä? https://yle.fi/a/74-20247765 Vähemmän yllättäen päihteet mainittu
      Kajaani
      43
      893
    3. Liikenneonnettumuus

      Linkkari ja ruotsibiili törmäsivät linkku oli redun opetusajossa
      Ylitornio
      13
      827
    4. Mieti oikeasti

      Ollaan lähes tuntemattomia, mutta samalla on tämä erityinen vuosien tilanne takana, joka on ollut monella tapaa väärin.
      Ikävä
      40
      808
    5. Pahin tapa satuttaa toista

      On jättää toinen vaille mitään vastausta. Erityisen kipeää se tekee sillon jos toinen ghostaa.
      Ikävä
      81
      720
    6. Taasko sä vedit

      Suojamoodin päälle? Miehelle
      Ikävä
      90
      711
    7. kene ajoi "kolarin"?

      "Punkaharjulla Luston ja Tuppuranmäen välillä sattui tiistaina aamupäivällä liikenneonnettomuus. Poliisin mukaan Savonl
      Savonlinna
      17
      707
    8. Tiedoksi yhdelle naiselle

      että mies lähestyy kaikin tavoin jos on kiinnostunut! 🙋🏻‍♂️
      Ikävä
      46
      698
    9. Mitä söpö

      Mies mietit?
      Ikävä
      58
      648
    10. Minulla on joskus ikävä sinua ja ajattelen sinua joskus.. edelleen

      Olin joskus niin rakastunut sinuun. Olin onnellinen, että kohdattiin ja kun vain tiesin sinun olevan olemassa. Täytit aj
      Ikävä
      27
      647
    11. Alkaa jotenkin nyt kuvio hahmottuu täällä

      Sellainen vaikutelma tästä alkaa tulla, että täällä on joku pieni porukka, joka tuntee toisensa tai ainakin pelaa samaan
      Ikävä
      97
      631
    12. 66
      623
    13. Miten uskallan sua nähdä

      Kun vaikutat suuttuneelta :(
      Ikävä
      43
      601
    14. Nainen, tässä olen kahden vaiheilla

      Toinen pitäisi valita ja kummassakin on hyvät ja huonot puolensa. Toinen olisi sellainen pysyvä mutta työläs. Toinen taa
      Ikävä
      56
      575
    15. Jos kaivattusi on

      Varattu niin miksi et antaisi asian olla hänen suhteen. Miksi ylipäätään vielä jatkat?
      Ikävä
      47
      566
    16. Taas henkirikos

      Kuka lienee nyt asialla.
      Ilomantsi
      9
      555
    17. Minä kyllä odotan nainen

      että sinun kanssa voisin jutella asioista ihan oikeasti.
      Ikävä
      43
      544
    18. Hyvä on sitten, jos et sitä s*ksiä halua kanssani.

      Rakastetaan vaan toisiamme, voin käydä muualla tyydyttämässä fyysisenpuolen tarpeet. Puhumalla tämäkin olisi selvinnyt.
      Ikävä
      129
      537
    19. Kylän tielle remonttia?

      Mitäköhän kylän tielle ruvetaan tekemään ku laitettu tuommoset töpsät muutamien suojateitten kohille?
      Hyrynsalmi
      13
      512
    20. Suloinen ja herkkä

      Toiset huomioiva, räväkkä, yllättävä. Ei sellaisesta voi olla pitämättä.
      Rakkaus ja rakastaminen
      31
      505
    Aihe