Haszprus

:first-child

©   Haszprus   |   css fejlesztés howto

Sziasztok gyerekek, remélem jók voltatok, ma esti mese gyanánt a css first-child pszeudo-osztályával szeretnélek megismertetni benneteket.

First-child, azaz első gyermek. Ha a html doksit nézzük, akkor egy

<b><em>jajdejó</em><em>szupi</em></b>
kódban a b tag első gyermeke az em, tartalma "jajdejó", a második gyermeke szintén egy em, tartalma "szupi". A két em közül tehát a jajdejó tartalmú egy first-child. A b first-childja. A napokban a CSS :first-child pszeudo-osztállyal valósítottam meg azt, hogy egy táblázatban az első oszlop a többitől eltérően jelenjenjék meg.

<p class='center'>IRCQuote fight! In the ring:</p><div class='u_pic_big keprendezo ircquote-stats center'> <a href='/user/Haszprus'> <img loading='lazy' src='/pix/users/1_01.jpg' alt='Haszprus' /> <sub>Haszprus</sub> <sub> <div class='show-on-grandparent-hover'>930266 pageload</div> </sub> </a><div class='quotebig'>vs</div> <a href='/user/balazs'> <img loading='lazy' src='/pix/users/685_01.jpg' alt='Balázs' /> <sub>Balázs</sub> <sub> <div class='show-on-grandparent-hover'>3280 pageload</div> </sub> </a></div><table class="ircquote"> <tr> <td><div class='u_pic_xsmall u_pic_xsmall-flex balazs'> <a href='/user/balazs'><img loading='lazy' loading="lazy" class="u_pic_xsmall" src="/pix/users/685_01.jpg" alt="Balázs" class="right" /></a></div></td> <td>melyik php fgv is csinál md5-öt egy karaktersorozatból?</td> </tr> <tr> <td><div class='u_pic_xsmall u_pic_xsmall-flex Haszprus'> <a href='/user/Haszprus'><img loading='lazy' loading="lazy" class="u_pic_xsmall" src="/pix/users/1_01.jpg" alt="Haszprus" class="right" /></a></div></td> <td>md5() :-) </td> </tr> </table>

A fenti táblázat első oszlopában szereplő neveket ha pl. szeretnénk jobbra zárni, akkor azt a következő módon lehet elérni css-ben anélkül, hogy külön minden nyomorult td-nek megadnánk egy class-t.

.ircquote td:first-child { text-align: right; }

Ennek magyarázata, hogy a neveket tartalmazó td-k a sorokat jelentő tr-ek első gyermekei.

És boldogan éltek, míg meg nem haltak. Jó éjt gyerekek, ennyi volt a mese mára.

Update 17:43: ja igen, a módszer apró hátránya, hogy az IE6 nem kezeli

RSS: hozzászólások ehhez a bejegyzéshez 21 hozzászólás

Szólj hozzá Te is!

Jól tudom, hogy az IE6 ezt nem kezeli?

Kiválóan, viszont mindjárt itt az IE7 Én a jövőnek fejlesztek

(Remélem az IE7 azért már tudni fogja )

Az IE7 tudtommal mar tudja, ellenben az Opera 9-es betajaval, ami miatt kifejezetten morc vagyok. (az elso valasz aminek tartalma a "Firefox rulez" azt likvidalom )

Haszprus: Íllítólag igen. De ha jól emlékszem, a mostani betaverzió még nem tudja...
mefi: nem mondod, hogy az Opera 9 nem ismeri? Én úgy tudtam, hogy már a 8-as is tudja.

Ellenben ha már itt tartunk, nem tudjátok hogy lehet kiolvasni egy css-ben deklarált értéket js-ből?



mefi: Opera9b nagyon jól tudja, a hiba benned van. Az IE7b2pre még nem tudja, csak a :hover-t tetszőleges elemre, nagyon kíváncsi vagyok, hogy a kész b2 mit fog hozni. Apró trükként az első elemeknek mindig megadok egy .first osztályt, ezzel kerülöm meg az IE semmitnemtudását.

És szemét vagy, Haszprus. [obszcén káromkodások selfcensored]

ezt a hoverdolgot cáfolnám, sőt, egész addig elmennék, hogy pár oldalon az _a:hover_ se működött (nekem).

Ezt tekintsük bugnak, feltehetően nem fogják az a:hovert kivenni az IE tudásából

Nálam is csinált érdekeseket a :hover-rel, de azért legtöbbször működött minden elemre. Szóval úgy tűnt, hogy azt szeretnék, ha menne mindenre, csak valamit elrontottak

Haszprus: ezen nem fogunk összeveszni de néhány wordpress szájt elér érdekesen tud kinézni ie-ben. (nálam a small tagek ignorálódnak egyfolytában; de mostmár nem offolok tovább. (de ha valaki tud hasonlóról adhatna linket.))

8# Balazs: mutass egy oldalt, ahol lathatom. Mar lattam egy parat, es egyiken sem mukodott (mig Firefox alatt igen).

Honnét a búsból lehet letölteni az O9‐et?


melyviz: A Wordpress kód kicsit másabb kategória. Bár az is HTML de azt mutáns űrlények állítják elő és az IE "Alien Mode"-ban rendereli!

eddig eljutottam, linket pls.

Hát az nincs sajna!


Akármit is, most jött ki a wordpress 2.01, valami 150 környéki bugfix-szel. Nem kizárt, hogy ott lesz a probléma megoldása

Nah kíváncsian várom, hogy a képbeszúrást vajon javították-e!
Hozzászólásod:


Nem vagy bejelentkezve, de...

A)
hozzászólhatsz regisztrálatlanul...

B)
ha regisztrálva vagy, bejelentkezhetsz...