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ä?
Mitä first-child ja last-child tarkoittaa?
Uteliasmies82
9
538
Vastaukset
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 ... barOikeastaan 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
Säästäminen on typerää, muistakaa äänestää demareita
Säästäminen on typerää, koska aiheuttaa vain talouden taantumista ja lopulta tappaa potilaan. Demareiden tapa on satsat1047810Olli Rehn: Eläkkeistä pitää leikata. Nyt tuli Lindtmanille kauhun paikka
jos johtaa seuraavaa hallitusta. Purra: eläkkeisiin ei kosketa. Eikä tällä hallituskaudella varmasti kosketa, mutta seur4186964SDP:n budjetin peruskivi: "Rahaa nimittäin on!"
Demarien talouspolitiikan ydin on usein tiivistetty klassiseen meemiin: rahaa on, kunhan se on jonkun muun rahaa. Vuoden1685228Poliisien suosikkipuolueet ylivoimaisesti: Kokoomus ja persut
samoin on armeijan henkilöstön kanssa. Sen sijaan sekä vihreät, vasliitto ja SDP ovat hyljeksittyjä puolueita poliisien1014152Sdp, Vihreät ja vasemmistoliitto muuttumassa naisten puolueiksi?
Sdp 64 % naisia, vihreät 70 % naisia ja vasemmistoliitto 60 % naisia. Ilmankos ne puolueet ajaa autoilevien kantasuomal954066Kun täällä kysytään aina vaan naisilta
Niin nyt kysytään miehiltä. Mies, voisitko ottaa kumppaniksesi naisen joka nostaa enemmän penkistä kuin sinä? Tienaa en734052Hatunnosto! Mari Hynynen (os. Perankoski) ja Jouni Hynynen auttavat vähäosaisia upealla tavalla!
Hatunnosto! Mari ja Jouni Hynynen ovat Vailla vakinaista asuntoa ry:n uudet kummit. Hynysiä motivoi halu lisätä ymmärr103792Tiesitkö? Tämä suomalainen keksi Elämäni biisi -sarjan - Viinin lipittely mainittu!
Tiesitkö? Elämäni biisi on suomalainen formaatti ja sen takana on Petja Peltomaa. Hänen kynästä ovat lähtöisin myös mm.03490Epäonnistunut "Tuppurais-operaatio" kaatoi Purran hallituksen
Persut yrittivät viimemetreillä häivyttää omaa täydellistä epäonnistumistaan syyttämällä opposition edustajaa nimettömil132340Ostaisitko sinä rempattavan asunnon Italiasta tai jostain muualta ulkomailta, mistä?
Ella Kanninen on tehnyt Italiassa asuntokaupat. Hän kertoo Instagramissa kierrelleensä viime kesänä Toscanassa katselema161919