เรียวเลยขอสรุปการใช้ Selector แบบคร่าว ๆ ว่าเวลาเราจะอ้างถึงอิีลิเมนต์ต่าง ๆ นั้นต้องเขียนยังไงและมีความหมายอย่างไร
| a | > | อ้างถึง tag a |
| #id | > | อ้างถึง tag ใดๆ ที่มี id ตามที่กำหนด |
| .class | > | อ้างถึง tag ใดๆ ที่มี class ตามที่กำหนด |
| a#id.class | > | อ้างถึง tag a ที่มี id และ class ตามที่กำหนด |
| a.class | > | อ้างถึง tag a ที่มี class ตามที่กำหนด |
| * | > | อ้างถึง tag ทั้งหมด |
| E | > | อ้างถึง tag E ทั้งหมด |
| E F | > | อ้างถึง tag F ทั้งหมด ที่อยู่ภายใน tag E โดยไม่จำเป็นต้องเป็นลูกเท่านั้น |
| E > F | > | อ้างถึง tag F ทั้งหมด ที่อยู่ภายใน tag E โดยจำเป็นต้องเป็นลูกเท่านั้น |
| E + F | > | อ้างถึง tag F ทั้งหมด ที่ tag F ติดอยู่กับ tag E |
| E ~ F | > | อ้างถึง tag F ทั้งหมด ที่อยู่ต่อจาก tag E ที่เป็น tag ในระดับเดียวกัน |
| E:has(F) | > | อ้างถึง tag E ทั้งหมด ที่มี tag F อย่างน้อย 1 tag อยู่ภายใน |
| E.C | > | อ้างถึง tag E ทั้งหมด ที่มี Class คือ C |
| E#I | > | อ้างถึง tag E ทั้งหมด ที่มี ID คือ I |
| E[A] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า อะไรก็ได้ |
| E[A=V] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า V |
| E[A!=V] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่ไม่ใช่ค่า V |
| E[A^=V] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่ขึ้นต้นด้วย V |
| E[A$=V] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่จบด้วย V |
| E[A*=V] | > | อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่มีคำว่า V |
| :first | > | อ้างถึงเฉพาะ element ตัวแรกสุด |
| :last | > | อ้างถึงเฉพาะ element ต้วท้ายสุด |
| :first-child | > | อ้างถึงเฉพาะ child element ตัวแรกสุด |
| :last-child | > | อ้างถึงเฉพาะ child element ตัวท้ายสุด |
| :only-child | > | อ้างถึงเฉพาะ child element |
| :nth-child(n) | > | อ้างถึงเฉพาะ child element ตำแหน่งที่ n |
| :nth-child(even) | > | อ้างถึงเฉพาะ child element ที่เป็นตำแหน่ง เลขคู่ |
| :nth-child(odd) | > | อ้างถึงเฉพาะ child element ที่เป็นตำแหน่ง เลขคี่ |
| :nth-child(Xn+Y) | > | อ้างถึงเฉพาะ child element ที่ได้มาจากสูตรคำนวณ เช่น 3n หรือ 5n+1 เป็นต้น |
| :eq(n) | > | อ้างถึงเฉพาะ element ตำแหน่งที่ n |
| :gt(n) | > | อ้างถึง element ทั้งหมด ที่อยุ่หลังจากตำแหน่งที่ n |
| :lt(n) | > | อ้างถึง element ทั้งหมด ที่อยุ่ก่อนหน้าตำแหน่งที่ n |
| :input | > | อ้างถึง element ทั้งหมดที่เป็น tag input, tag select, tag textarea, tag button |
| :password | > | อ้างถึง element ทั้งหมดที่เป็น password ได้แก่ input[type=password] |
| :text | > | อ้างถึง element ทั้งหมดที่เป็น text ได้แก่ input[type=text] |
| :checkbox | > | อ้างถึง element ทั้งหมดที่เป็น checkbox ได้แก่ input[type=checkbox] |
| :radio | > | อ้างถึง element ทั้งหมดที่เป็น radio ได้แก่ input[type=radio] |
| :button | > | อ้างถึง element ทั้งหมดที่เป็น button ได้แก่ input[type=submit], input[type=reset], input[type=button], button |
| :reset | > | อ้างถึง element ทั้งหมดที่เป็น reset button ได้แก่ input[type=reset] |
| :submit | > | อ้างถึง element ทั้งหมดที่เป็น submit button ได้แก่ input[type=submit], button[type=submit] |
| :image | > | อ้างถึง element ทั้งหมดที่เป็น image ได้แก่ input[type=image] |
| :file | > | อ้างถึง element ทั้งหมดที่เป็น file ได้แก่ input[type=file] |
| :checked | > | อ้างถึง element ทั้งหมดที่เป็น checkbox หรือ radio ที่กำลังถูกเลือกอยู่ ( checked ) |
| :selected | > | อ้างถึง element ทั้งหมดที่ถูกเลือก ( option ของ select ที่ถูกเลือก ) |
| :disabled | > | อ้างถึง element ทั้งหมดที่ถูก disabled อยู่ |
| :enabled | > | อ้างถึง element ทั้งหมดที่ถูก enabled อยู่ |
| :hidden | > | อ้างถึง element ทั้งหมดที่ถูก ซ่อน อยู่ |
| :visible | > | อ้างถึง element ทั้งหมดที่ถูก เห็นอยู่ |
| :animated | > | อ้างถึง element ทั้งหมดที่อยู่ภายใต้การควบคุมของ animated control |
| :header | > | อ้างถึง element ทั้งหมดที่เป็น header ได้แก่ h1, h2, h3, h4, h5, h6 |
| :parent | > | อ้างถึง element ทั้งหมดที่มี child element อยู่ภายใน ( ไม่รวม empty elements ) |
| :contains(foo) | > | อ้างถึง element ทั้งหมดที่ภายใน tag มีคำว่า foo |
| :not(filter) | > | อ้างถึง element ทั้งหมดที่ ยกเว้นที่ตรงใน filter เช่น input:not(:checkbox), div p:not(:hidden), :checkbox:checked:enabled |
| :empty | > | อ้างถึง element ทั้งหมดที่ภายใน tag ไม่มีอะไรอยู่เลย เช่น |
credit : เว็บไซต์ http://www.function.in.th
ไม่มีความคิดเห็น:
แสดงความคิดเห็น