ทำความเข้าใจ 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

    XHTML:


    <div class="สิทธิพร รดิส ไทยซีเอสเอส">
    <p>Content goes here</p>
    </div>

  4. E[foo^=”bar”] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งขึ้นต้นด้วยคำว่า bar

    ตัวอย่างที่ 4

    CSS:

    XHTML:

    อธิบาย: คือ ให้กระทำการกับ span ที่มี class ซึ่งขึ้นต้นด้วยคำว่า กรรม

  5. E[foo$=”bar”] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งลงท้ายด้วยคำว่า bar

    ตัวอย่างที่ 5

    CSS:

    XHTML:

    อธิบาย: คือ ให้กระทำการกับ span ที่มี class ซึ่งลงท้ายด้วยคำว่า การ

  6. E[foo*=”bar”] คือ คือ Element ใดๆ ที่มี Attribute ชื่อ foo และค่าของ attribute มีส่วนใดส่วนหนึ่งตรงกับคำว่า bar

    ตัวอย่างที่ 6

    CSS:

    XHTML:

    อธิบาย: คือ ให้กระทำการกับ span ที่มี class มีส่วนใดส่วนหนึ่งมีคำว่า มก อยู่ ในนั้น สังเกตว่า รูปแบบการเขียน Attribute Selector ในลักษณะนี้ ไม่จำเป็นว่าต้องเลือกแบบเป็นคำเสมอไป เพียงแค่เจาะจงให้ถูกอักขระก็เป็นใช้ได้ แต่ในทาง Semantic แล้ว เราควรจะเลือกรู้แบบการสร้างชื่อให้สื่อความหมาย เพื่อความสมบูรณ์ของเอกสารอีกนัยหนึ่ง

ตัวอย่างการเขียน Attribute Selector

สำหรับบทความนี้ ผมขอพักเรื่องราวของ Attribute Selector เอาไว้ตรงนี้ก่อน สำหรับเว็บ ThaiCSS นั้น ได้ใช้ Attribute Selector มากพอสมควร อย่างไรนั้น ก็เลือกดูกันเอาเองนะครับ สำหรับคราวหน้า ผมจะมาเล่าวิธีการนำ Attribute Selector ต่างๆ เหล่านี้ไปใช้งานจริงๆ ว่ามันจะเกิดประโยชน์ มากมายยังไง

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

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0

Back to Top

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

  1. แอ๋ม

    บทความมีประโยชน์มากครับ กำลังอยากเริ่มต้นกับ css3 อยู่พอดี

    ดูไปดูมาก็คล้ายๆ regular expression เหมือนกันนะเจ้า attribute selector เนี่ย

    ;)

    Reply

  2. FunkyDog

    ไม่เข้าใจอ่ะคับ อ่านแล้วงง…

    Reply

  3. happiness

    ขอบคุณมากครับ

    Reply

  4. choococat

    ขอบคุณมากค่ะ

    มีตัวอย่างประกอบด้วย เข้าใจง่ายขึ้น

    อยากจาเอาไปใช้บ้าง

    แต่ ie6 มันไม่รองรับ ก็ต้องเป็นไปตามนั้น

    Reply

  5. da

    ie6 ตอนนี้ไม่รองรับก็ช่างแล้วอะครับ
    ผมคิดว่า คนที่ใช้ ie 6 เปรียบเสมือนกับใช้ทีวี ขาวดำ
    ส่วนบราวเซอร์ใหม่ๆ ที่รองรับ css 3 เปรียบเสมือน ทีวีสี

    ถ้าอยากดู ภาพยนต์ที่มีสี ก็ไปหาทีวีสีมาดูซะ!

    Reply

  6. gooaood

    หุหุ อ่านตั้งนาน นึกว่าจะเข้าใจ

    Reply

  7. ayukacha

    เยี่ยม

    Reply

  8. goo

    ก็แค่ซัพพอร์ต regula expresstion !

    Reply

  9. Funky Dad

    หมา Funky โง่หรือเปล่า ถึงอ่านไม่เข้าใจ

    Reply

  10. pornantha

    ja

    Reply

  11. เครื่องเข้าเล่มสันกาว

    ให้ความรู้มากเลยครับ ต้องขอขอบคุณมากสำหรับการแบ่งปันความรู้ครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial