:first-child - Haszprus überblog

:first-child

©   Haszprus   |   fejlesztés, howto, css

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.

<table class="ircquote"> <tr> <td>Balázs</td> <td>melyik php fgv is csinál md5-öt egy karaktersorozatból?</td> </tr> <tr> <td>Haszprus</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!