:first-child CSS Pseudo-class
شبه کلاس first-child:
در CSS، اولین عنصر از میان گروهی از عناصر خویشاوند یا همرده را هدف می گیرد.
نحوه نوشتار
/* انتخاب اولین انتخابگر <p> از میان تمام انتخابگرهای خویشاوند تگ */ p:first-child { color: lime; }
در مثال زیر عملکرد شبه کلاس first-child:
را میبینیم:
html
<div> <p>این متن انتخاب می شود.</p> <p>این متن انتخاب نمی شود.</p> </div> <div> <h3>این متن جزو انتخابگرهای 'p' نمی باشد.</h3> <p> این متن انتخاب نمی شود چون اولین عنصر فرزند نیست.</p> </div>
css
p:first-child { color: lime; background-color: black; padding: 5px; }
مشاهده و ویرایش کد در حالت تمام صفحه
در مثال دیگری از این شبه کلاس میبینیم:
html
<ul> <li>شماره۱ </li> <li>شماره ۲</li> <li>شماره ۳ <ul> <li>شماره ۳.۱</li> <li>شماره ۳.۲</li> <li>شماره ۳.۳</li> </ul> </li> </ul>
css
ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.