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.
<![CDATA[<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'>950797 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 
