ทำความเข้าใจ Attribute Selector ของ CSS

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

1. 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>


2. 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>


3. 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>


4. 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 ซึ่งขึ้นต้นด้วยคำว่า กรรม…

5. 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 ซึ่งลงท้ายด้วยคำว่า การ

6. 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 ต่างๆ เหล่านี้ไปใช้งานจริงๆ ว่ามันจะเกิดประโยชน์ มากมายยังไง

มีความสุขกับการใช้ชีวิตครับ