การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม
แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ
- E[foo] คือ Element ใดๆ ที่มี Attribute ชื่อ foo เช่น div id=”main-contents”> ถ้านำมาเขียน CSS ก็จะเป็น div[id]{} หมายถึง div ที่มี attribute id อยู่
ตัวอย่างที่ 1
CSS:
div[id] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}
XHTML:
<div id="main-contents">
<p>Content goes here</p></div>
- E[foo="bar"] คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute เป็น bar เช่น div id=”main-contents” ถ้านำมาเขียน CSS ก็จะเป็น div[id="main-contents"]{} หมายถึง div ที่มี attribute id ชื่อ main-contents อยู่
ตัวอย่างที่ 2
CSS:
div[id="main-contents"] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em; }
XHTML:
<div id="main-contents">
<p>Content goes here</p></div>
- E[foo~="bar"] คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งเท่ากับ bar จากการเว้นช่องว่าง เช่น จะเป็น div[class~="สิทธิพร"] {} หมายถึง div ที่มี attribute class ชื่อ สิทธิพร รวมอยู่ด้วย
ตัวอย่างที่ 3
div[class~="สิทธิพร"] { background: rgb(220, 220, 220); width: 74em; border: solid 0.02em rgb(200, 200, 200); margin: 0 auto; min-height: 5em; }XHTML:
<div class="สิทธิพร รดิส ไทยซีเอสเอส">
<p>Content goes here</p>
</div>
-
E[foo^="bar"] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งขึ้นต้นด้วยคำว่า bar
ตัวอย่างที่ 4
CSS:
span[class^="กรรม"] { color: rgb(29,54,50); }XHTML:
<span class="กรรมการ">รดิส</span> | <span class="กรรมกร">สิทธิพร</span>อธิบาย: คือ ให้กระทำการกับ span ที่มี class ซึ่งขึ้นต้นด้วยคำว่า กรรม…
-
E[foo$="bar"] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งลงท้ายด้วยคำว่า bar
ตัวอย่างที่ 5
CSS:
span[class$="การ"] { text-decoration: underline; font-weight: bold; }XHTML:
<p><span class="กรรมการ">รดิส</span> | <span class="กรรมกร">สิทธิพร</span></p>อธิบาย: คือ ให้กระทำการกับ span ที่มี class ซึ่งลงท้ายด้วยคำว่า การ
- E[foo*="bar"] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งตรงกับคำว่า bar
ตัวอย่างที่ 6
CSS:
span[class*="มก"] { font-style: italic; }XHTML:
<p><span class="กรรมการ">รดิส</span> | <span class="กรรมกร">สิทธิพร</span></p>อธิบาย: คือ ให้กระทำการกับ span ที่มี class มีส่วนใดส่วนหนึ่งมีคำว่า มก อยู่ ในนั้น สังเกตว่า รูปแบบการเขียน Attribute Selector ในลักษณะนี้ ไม่จำเป็นว่าต้องเลือกแบบเป็นคำเสมอไป เพียงแค่เจาะจงให้ถูกอักขระก็เป็นใช้ได้ แต่ในทาง Semantic แล้ว เราควรจะเลือกรู้แบบการสร้างชื่อให้สื่อความหมาย เพื่อความสมบูรณ์ของเอกสารอีกนัยหนึ่ง
ตัวอย่างการเขียน Attribute Selector
สำหรับบทความนี้ ผมขอพักเรื่องราวของ Attribute Selector เอาไว้ตรงนี้ก่อน สำหรับเว็บ ThaiCSS นั้น ได้ใช้ Attribute Selector มากพอสมควร อย่างไรนั้น ก็เลือกดูกันเอาเองนะครับ สำหรับคราวหน้า ผมจะมาเล่าวิธีการนำ Attribute Selector ต่างๆ เหล่านี้ไปใช้งานจริงๆ ว่ามันจะเกิดประโยชน์ มากมายยังไง
มีความสุขกับการใช้ชีวิตครับ
บทความมีประโยชน์มากครับ กำลังอยากเริ่มต้นกับ css3 อยู่พอดี
ดูไปดูมาก็คล้ายๆ regular expression เหมือนกันนะเจ้า attribute selector เนี่ย
;)
ไม่เข้าใจอ่ะคับ อ่านแล้วงง…
ขอบคุณมากครับ
ขอบคุณมากค่ะ
มีตัวอย่างประกอบด้วย เข้าใจง่ายขึ้น
อยากจาเอาไปใช้บ้าง
แต่ ie6 มันไม่รองรับ ก็ต้องเป็นไปตามนั้น
ie6 ตอนนี้ไม่รองรับก็ช่างแล้วอะครับ
ผมคิดว่า คนที่ใช้ ie 6 เปรียบเสมือนกับใช้ทีวี ขาวดำ
ส่วนบราวเซอร์ใหม่ๆ ที่รองรับ css 3 เปรียบเสมือน ทีวีสี
ถ้าอยากดู ภาพยนต์ที่มีสี ก็ไปหาทีวีสีมาดูซะ!
หุหุ อ่านตั้งนาน นึกว่าจะเข้าใจ
เยี่ยม
ก็แค่ซัพพอร์ต regula expresstion !
หมา Funky โง่หรือเปล่า ถึงอ่านไม่เข้าใจ
ja
ให้ความรู้มากเลยครับ ต้องขอขอบคุณมากสำหรับการแบ่งปันความรู้ครับ