css selector พื้นฐานที่ต้องจำให้ได้ 3

css selector พื้นฐานที่ต้องจำให้ได้ 3

อ่าน 10 css selector แรก ที่ควรจำ และ อีก 10 css selector ที่ควรจำ จะได้ไม่ งง เมื่ออ่านบทความนี้ครับ


X::pseudoElement p::first-line { font-weight: bold; font-size: 1.2em; }

 ในที่นี้ pseudoElement ก็คือ คำสั่ง ที่จะกระทำต่อ X จากตัวอย่าง เราเป็นการเลือก first-line ของ p element โดยสิ่งหนึ่งที่ต้องจำเพิ่มเติมก็คือ จะใช้ได้เฉพาะกรณีที่เป็น block element เท่านั้น

การรองรับ

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera


X:nth-child(n) li:nth-child(3) { color: red; }

 ในบางครั้ง เราก็ต้องการ select เพียงแค่บาง element ที่อยู่ใน จำนวนมากๆและเรียงกันอยู่เป็นลำดับ เราก็เอา nth-child เข้ามาช่วยได้ เพราะว่าสามารถระบุตำแหน่งได้อย่างละเอียดเลย

แต่มีข้อสังเกตุก็คือ เราจะใช้ตัวเลขในการกำหนดค่าตำแหน่งเท่านั้น และไม่ได้นับจาก 0 โดยหากต้องการเลือก element ที่ 2 ก็ใส่เลขสองไปเลย

และที่ยิ่งกว่านั้น เราสามารถกำหนดเงื่อนไขได้มากกว่าด้วยการเพิ่มเงื่อนไขพิเศษเช่น li:nth-child(4n) จะมีผลต่อทุกตำแหน่ง ที่หารด้วย 4 ได้ เช่น 4,8, 12, 16 ....

การรองรับ

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari


X:nth-last-child(n) li:nth-last-child(2) { color: red; }

 เอามาใช้ในกรณีที่เรามี element จำนวนมากๆ เรียงกันเลย จนไม่รู้ว่า อันสุดท้ายมีเท่าไร แล้วถ้าต้องใช้ selector กำหนดให้อันท้ายๆ จะทำอย่างไรดี ก็คือเราก็เอา nth-last-child เข้ามาใช้นั่นเอง คล้ายกับการใช้ nth-child แต่ว่าเป็นการนับจากท้ายมาต้นเท่านั้นเอง

การรองรับ

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera


X:first-child ul li:first-child { border-top: none; }

 เป็นการเลือก child element ลำดับแรก โดยทั้งนี้ ใช้ได้ทั้ง first-child และ last-child โดย first child ก็คือ child ในลำดับแรก ส่วน last child ก็คือ child element ในลำดับสุดท้าย

การรองรับ

  • IE7+(สำหรับ last child ได้เฉพาะ 8+)
  • Firefox
  • Chrome
  • Safari
  • Opera


X:only-child div p:only-child { color: red; }

 อันนี้เป็นการเลือกแบบมีเงื่อนไขอีกแล้ว ก็คือเป็นการเลือกแบบเจาะจง คล้าย X+Y เหมือนอย่างที่เราเคยเจอมา แต่ว่า อันนี้จะเป็นเงื่อนไข ที่เจาะจง เช่นจากตัวอย่าง จะมีผล ตามเมื่อ p เป็น child เดียวใน div นั้นเท่านั้น ถ้าใน div มี p มากกว่า 1 ก็จะไม่ทำงาน

การรองรับ

  • IE9+
  • Firefox 
  • Chrome
  • Safari
  • Opera

บทความนี้จะดูน้อยหน่อย เพราะว่าบางอันน่าจะได้ใช้น้อย เลยไม่เขียนดีกว่า อีกอย่างก็คือมันจะต้องใช้ IE 9 ด้วย ซึ่งปัจจุบันคนยังใช้น้อยมากครับ

เท่านี้ก็น่าจะครบถ้วนพอที่จะเอาไปทำงานได้จริงแล้วนะครับ จริงๆ หลายๆตัวอย่างถ้าเห็นภาพแล้วจะเข้าใจ เอาเป็นว่าถ้ามีเวลาผมจะมี review กันอย่างละเอียดอีกทีครับ อยากให้ความรู้เยอะๆครับ เท่าที่เวลาผมจะเอื้ออำนวยให้ได้ ถ้าให้ได้ผมให้เต็มที่ไม่มีกั๊ก ยิ่งให้ก็ยิ่งได้ครับ เชื่ออย่างนั้น

Create: Modify : 2010-11-30 09:51:53 Read : 9857 URL :