css selector พื้นฐานที่ต้องจำให้ได้
การเขียน CSS เพื่อการจัด layout และการ ปรับรูปแบบการแสดงผล เราจะเจอปัญหาอยู่สองเรื่อง เรื่องแรกคือเรื่อง selector ไม่โดนจุด คือไม่รู้ว่าจะอ้างอิง CSS ให้กับตำแหน่งนี้อย่างไร เช่น p ที่อยู่ ใน div ซึ่งเราอาจจะเขียนได้ว่า div>p หรือ div p แล้วแต่กรณี แต่ปัญหานี้เรามักจะเลี่ยงด้วยการตั้ง id ให้กับ p tag เลยแล้วไปอ้างอิง id เอา แต่ id มันก็คงจะเยอะแยะเต็มหน้าไปหมดอีก สำหรับอีกปัญหาหนึ่งก็คือ การเรียกใช้คำสั่งไม่เหมาะสมกับสิ่งที่เรา apply CSS เข้าไป ปัญหานี้ประสบการณ์ และความจำเท่านั้น ที่จะช่วยได้ครับ
สำหรับบทความนี้ เราก็จะพูดถึงปัญหาแรกเลย ก็คือการอ้างอิงตำแหน่ง DOM จุดต่างๆ ของหน้าเว็บ เมื่อยามที่เราเขียน CSS หรือที่เรียกว่า CSS selector
โดยในบทความนี้ หลาย selector ก็จะใช้ใน CSS 3 ด้วยครับ
** {
margin: 0;
padding: 0;
}
เป็นการเลือกทั้งหมด ทุก DOM ในเอกสารเลย แต่ปกติเราจะเอามาใช้เฉพาะส่วนมากกว่าเช่น
#container * {
border: 1px solid black;
}
ก็จะหมายความว่าเลือกทุก child ของ #container ให้มี border: 1px solid สีดำ
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
#X
#container {
width: 960px;
margin: auto;
}
เป็นการเลือก id ที่ชื่อ X เป็น selector ที่ใช้บ่อยมาก แต่ว่ามีข้อกำหนดก็คือ ในหนึ่งหน้าที่แสดงผล จะมี id ซ้ำกันไม่ได้ และถ้าเป็นไปได้ ก็ควรเลี่ยงไปใช้ tag name เลยจะดีกว่า(ใน html5 มี tag name ให้ใช้ค่อนข้างเยอะอยู่แล้ว)
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
.error{
color: red;
margin: auto;
}
เป็นการเลือก class ซึ่งต่างจาก id เพราะว่า class นั้นเมื่อสร้างมาแล้ว สามารถนำเอาไปใช้ซ้ำกี่ครั้งก็ได้แม้ว่าจะเป็นหน้าเดียวกันก็ตาม
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
li a {
color: red;
margin: auto;
}
แบบนี้เรียกว่า descendant หรือ เรียกใช้ที่ส่วนย่อย โดยจากตัวอย่าง เป็นการเลือก tag a ที่อยู่ภายใต้ li (a ที่เป็น child node ของ li)
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
X
a {
color: red;
}
เป็นการเลือก tag ตัวนั้นเลย จากตัวอย่างก็คือ tag a ซึ่งก็คือ tag link ที่เราเขียนกันนั่นเอง โดยจะเป็นการเลือกทุกๆจุดที่ใช้ tag นี้
การรองรับ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
a:link { color: red; }
a:visited { color: purple; }
เราจะใช้ :link เพื่อเลือกทุกลิ้งค์ ในจังหวะที่มีการคลิก และ :visited คือการเลือกทุกลิ้งค์ที่เคยเปิดแล้ว จากตัวอย่างก็เลือกเพื่อกำหนดสีธรรมดา
การรองรับ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X + Y
ul + p {
color: red;
}
เป็นการเลือก โดยรูปแบบที่ต้องการ จากตัวอย่างนี้ tag p จะถูกเลือก โดยมีเงื่อนไขว่า ต้องปรากฏ tag ul ก่อน p จึงจะทำให้ tag p นั้นถูกเลือก
การรองรับ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X > Y
div#container > ul {
border: 1px solid black;
}
ทำงานได้คล้ายกับ X Y เลย แต่ว่า X>Y จะเป็นเงื่อนไขมากกว่า ก็คือ จะเป็นการเลือกให้ลึกลงไปเพียงแค่ 1 ชั้นเท่านั้น เกินกว่านั้นไม่สนใจ เช่น กรณีจากตัวอย่าง ถ้าใน div id container มี ul แล้วใน ul ก็มี ul อีก selector ตัวนึ้จะเลือกชั้นแรกเท่านั้น คือ ul ตัวแรก เท่านั้นเอง
โดยการทำงานแบบนี้ จะทำให้ performance ดีขึ้นด้วย
การรองรับ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X~Y
ul ~ p {
color: red;
}
จะเป็นการเลือก โดยอ้างอิงรูปแบบการจัดเรียงคล้าย X + Y แต่ว่ามีเงื่อนไขเจาะจงที่ต่ำกว่า ก็คือ กรณี X + Y จะเป็นการเลือกเฉพาะ Y ตัวแรกเท่านั้น สำหรับกรณีที่มี Y หลายตัว แต่เมื่อใช้ X ~ Y จะเป็นการเลือกใช้ Y ทุกตัวเลย
การรองรับ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[title]
a[title] {
color: green;
}
เป็นการเลือก X โดยอาศัย attribute ช่วย โดยจากตัวอย่าง หมายความว่า เราจะเลือก a ที่มี attribute title เท่านั้น
การรองรับ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
เอาไปเท่านี้ก่อนครับ เยอะเกิน เดี๋ยวจำไม่หมด แต่สัญญาว่ามีอีกแน่นอนครับ จะมีประมาณ 30 อันครับ ทั้งนี้ อยากให้เอาไปลองเขียนลองใช้ ลองกำหนดให้คล่องก่อน เพราะอย่างที่บอกครับ ว่า CSS สำคัญที่เรื่อง selector เพราะว่าถ้าเขียน CSS แต่ว่าเรียก selector ไม่ได้ ก็ตายตั้งแต่เริ่มแล้วล่ะครับ
tag : ใช้งาน css, css selector, css3,css, เขียน css, พื้นฐาน css
