css selector พื้นฐานที่ต้องจำให้ได้ 2

css selector พื้นฐานที่ต้องจำให้ได้ 2

อ่าน 10 css selector แรก ที่ควรจำ จะได้ไม่ งง เมื่ออ่านบทความนี้ครับ

X[href="foo"] a[href="http://meewebfree.com"] { color: #1f6053; /* green */ }

 เป็นการเลือกทั้งหมด tag ที่ระบุ attribute href อย่างเจาะจงค่า จากตัวอย่างก็คือ a ที่มี href= ไปที่ http://meewebfree.com

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X[href*="foo"] a[href*="free"] { color: #1f6053; /* green */ }

เป็นการเลือก แบบกึ่งค้นหา จากตัวอย่าง หากว่าในส่วนหนึ่งของ href มีคำว่า free ก็จะทำงานทันที ไม่ว่าจะปรากฏ ณ จุดใดก็ตามใน attribute นั้นๆ

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[href^="http"] .a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

 เป็นการเลือก โดยอ้างอิงค่าใน href อีกครั้ง แต่เปลี่ยนเงื่อนไขเป็น ค่าที่ขึ้นต้นด้วย .... จากตัวอย่างก็ค้นหาเฉพาะค่าที่ขึ้นต้นด้วย http ก็ให้ทำงานโดยการกำหนด background ลงไป

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[href$=".jpg"] a[href$=".jpg"] { color: red; }

เป็นการเลือก โดยอ้างอิงค่าใน href อีกครั้ง แต่เปลี่ยนเงื่อนไขเป็น ค่าที่ลงท้ายด้วย .... จากตัวอย่างก็ค้นหาเฉพาะค่าที่ลงท้ายด้วย .jpg ก็ให้ทำงานโดยการกำหนดเป็นสีแดง

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X[data-*="foo"] a[data-filetype="image"] { color: red; }

เป็นการเลือก โดยอ้างอิงค่า attribute โดยจากตัวอย่าง จุดใดที่มี attribute เป็น data-filetype="image" ก็ให้แสดงจุดนั้นเป็นสีแดง

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[foo~="bar"]  a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }

 เป็นการเลือก โดยอ้างอิงค่า attribute เหมือนข้างบน แต่ว่าต่างกันตรงที่ เราสามารถเรียกจากการที่ผสมกันก็ได้ เช่นใน attribute มีแบบนี้ data-info="external image" ก็จะทำงานทั้งเป็นสีแดง และมีกรอบสี่เหลี่ยมพร้อมกันด้วยเลย

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X:checked input[type=radio]:checked { border: 1px solid black; }

เป็นการเลือก ณ ตำแหน่งใดๆที่ถูก checked (ทั้งแบบ radio button และ select ขึ้นอยู่กับที่เรากำหนด) โดยเมื่อมีการเลือกเมื่อไร css ก็จะมีผลทันที

การรองรับ

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X:after .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

รูปแบบนี้ จะมีทั้ง before และ after โดยเป็นการบอกว่า ก่อน หรือ หลังจากที่เรียกใช้ selector จุดใดแล้ว ให้ทำงานอะไรต่อ ตัวอย่างที่เห็น ก็คือ หลังจากการ clearfix ไปแล้ว ให้ส่วนแสดงผลหลังจากนั้น เป็น block และ visibility เป็น hidden , font-size,height เป็น 0 ทั้งหมด คือไม่ให้ปรากฏอะไรนั่นเอง

การรองรับ

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X:hover div:hover { background: #e3e3e3; }

เป็นการเลือก ในกรณีที่เราเอา mouse ไปวางเหนือ element นั้นๆ แต่มีข้อจำกัดในเรื่องของ internet explorer version เก่าๆ ที่จะทำงานไม่ได้ในทุก element และแถมให้อีกนิดก็คือ หากเรากำหนด hover ให้กับตัวหนังสือ แล้วตั้งค่าว่า text-decoration: underline; นั้น แนะนำว่าให้ใช้เป็น border-bottom: 1px solid black; จะดีกว่า

การรองรับ

  • IE6+ (แต่ IE6 จะใช้ได้เฉพาะ anchor element เท่านั้น )
  • Firefox
  • Chrome
  • Safari
  • Opera

 

X:not(selector) div:not(#container) { color: blue; }

เป็นการเลือก โดยยกเว้นเงื่อนไขที่กำหนด จากตัวอย่างคือการเลือก div ทุกอันที่ไม่ใช่ id container ให้เป็นสีน้ำเงิน

การรองรับ

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 วันนี้ ก็จบแต่เพียงเท่านี้ คาดว่าหลายท่าน น่าจะได้เปิดประสบการณ์ใหม่ๆขึ้นบ้างนะครับ ว่าแต่ละแบบนั้นเป็นอย่างไร ใช้งานอย่างไร จะเอามาประยุกต์ใช้ได้อย่างไร ทั้งนี้เรายังมีอีก 10 อันที่จะต้องให้จำ ซึ่งจะเป็นบทความสุดท้ายแล้วครับ ติดตามกันต่อไปนะครับ

Create: Modify : 2010-11-16 22:50:35 Read : 8588 URL :