css selector พื้นฐานที่ต้องจำให้ได้ 3
อ่าน 10 css selector แรก ที่ควรจำ และ อีก 10 css selector ที่ควรจำ จะได้ไม่ งง เมื่ออ่านบทความนี้ครับ
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
ในที่นี้ pseudoElement ก็คือ คำสั่ง ที่จะกระทำต่อ X จากตัวอย่าง เราเป็นการเลือก first-line ของ p element โดยสิ่งหนึ่งที่ต้องจำเพิ่มเติมก็คือ จะใช้ได้เฉพาะกรณีที่เป็น block element เท่านั้น
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
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
li:nth-last-child(2) {
color: red;
}
เอามาใช้ในกรณีที่เรามี element จำนวนมากๆ เรียงกันเลย จนไม่รู้ว่า อันสุดท้ายมีเท่าไร แล้วถ้าต้องใช้ selector กำหนดให้อันท้ายๆ จะทำอย่างไรดี ก็คือเราก็เอา nth-last-child เข้ามาใช้นั่นเอง คล้ายกับการใช้ nth-child แต่ว่าเป็นการนับจากท้ายมาต้นเท่านั้นเอง
การรองรับ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
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
div p:only-child {
color: red;
}
อันนี้เป็นการเลือกแบบมีเงื่อนไขอีกแล้ว ก็คือเป็นการเลือกแบบเจาะจง คล้าย X+Y เหมือนอย่างที่เราเคยเจอมา แต่ว่า อันนี้จะเป็นเงื่อนไข ที่เจาะจง เช่นจากตัวอย่าง จะมีผล ตามเมื่อ p เป็น child เดียวใน div นั้นเท่านั้น ถ้าใน div มี p มากกว่า 1 ก็จะไม่ทำงาน
การรองรับ
- IE9+
- Firefox
- Chrome
- Safari
- Opera
บทความนี้จะดูน้อยหน่อย เพราะว่าบางอันน่าจะได้ใช้น้อย เลยไม่เขียนดีกว่า อีกอย่างก็คือมันจะต้องใช้ IE 9 ด้วย ซึ่งปัจจุบันคนยังใช้น้อยมากครับ
เท่านี้ก็น่าจะครบถ้วนพอที่จะเอาไปทำงานได้จริงแล้วนะครับ จริงๆ หลายๆตัวอย่างถ้าเห็นภาพแล้วจะเข้าใจ เอาเป็นว่าถ้ามีเวลาผมจะมี review กันอย่างละเอียดอีกทีครับ อยากให้ความรู้เยอะๆครับ เท่าที่เวลาผมจะเอื้ออำนวยให้ได้ ถ้าให้ได้ผมให้เต็มที่ไม่มีกั๊ก ยิ่งให้ก็ยิ่งได้ครับ เชื่ออย่างนั้น