วันศุกร์ที่ 14 มกราคม พ.ศ. 2554

First child CSS Selector

Share it Please
วันนี้จะมาเขียนเรื่องการใช้งาน CSS Selector ในส่วนของ First child element ซึ่งหมายถึงการระบุว่าจะทำงานกับ element แรกเท่านั้นดังตัวอย่าง

<html>
  <head>
    <title>CSS Selector</title>
  </head>
  <body>
    <div>
      <p>div1 line1</p>
      <p>div1 line2</p>
      <p>div1 line3</p>
    </div>
    <div>
      <p>div2 line1</p>
      <p>div2 line2</p>
      <p>div2 line3</p>
    </div>
  </body>
</html>

หากโจทย์ต้องการให้กำหนดสีให้กับ <p> แรกของแต่ละ div จะทำได้โดยใช้ :first-child ต่อหลัง tag ดังตัวอย่าง

<style type="text/css">
  div > p:first-child { color: red;}
</style>

เท่านั้น div1 line1 และ div2 line1 ก็จะมีตัวอักษรสีแดงแล้วครับ

Blogroll

About