w3ii 'อ้างอิง CSS มีการทดสอบเป็นประจำกับเบราว์เซอร์ที่สำคัญทั้งหมด
CSS Selectors
ใน CSS, เตอร์จะรูปแบบที่ใช้ในการเลือก element(s) คุณต้องการสไตล์
"CSS" บ่งบอกว่าในรุ่น CSS ทรัพย์สินที่ถูกกำหนด (CSS1, CSS2, or CSS3)
| ผู้เลือก | ตัวอย่าง | ตัวอย่างคำอธิบาย | CSS |
|---|---|---|---|
| . class | .intro | เลือกองค์ประกอบทั้งหมดที่มี class="intro" | 1 |
| # id | #firstname | เลือกองค์ประกอบที่มี id="firstname" | 1 |
| * | * | เลือกองค์ประกอบทั้งหมด | 2 |
| element | p | เลือกทั้งหมด <p> องค์ประกอบ | 1 |
| element,element | div, p | เลือกทั้งหมด <div> องค์ประกอบและทุก <p> องค์ประกอบ | 1 |
| element element | div p | เลือกทั้งหมด <p> องค์ประกอบภายใน <div> องค์ประกอบ | 1 |
| element > element | div > p | เลือกทั้งหมด <p> องค์ประกอบที่ผู้ปกครองเป็น <div> องค์ประกอบ | 2 |
| element + element | div + p | เลือกทั้งหมด <p> องค์ประกอบที่จะถูกวางไว้ทันทีหลังจาก <div> องค์ประกอบ | 2 |
| element1 ~ element2 | P ~ UL | เลือกทุก <ul> องค์ประกอบที่นำหน้าด้วย <p> องค์ประกอบ | 3 |
| [ attribute ] | [target] | เลือกองค์ประกอบทั้งหมดที่มีคุณลักษณะเป้าหมาย | 2 |
| [ attribute = value ] | [target=_blank] | เลือกองค์ประกอบทั้งหมดที่มี target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | เลือกองค์ประกอบทั้งหมดที่มีคุณลักษณะชื่อที่มีคำว่า "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ lang เริ่มต้นด้วย "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | เลือกทุก <a> องค์ประกอบที่มี href ค่าแอตทริบิวต์เริ่มต้นด้วย "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | เลือกทุก <a> องค์ประกอบที่มีค่าแอตทริบิวต์ href จบลงด้วย ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | เลือกทุก <a> องค์ประกอบที่มี href ค่าแอตทริบิวต์ประกอบด้วยอักขระย่อย "w3ii" | 3 |
| :active | a:active | เลือกการเชื่อมโยงการใช้งาน | 1 |
| ::after | p::after | ใส่บางสิ่งบางอย่างหลังเนื้อหาของแต่ละ <p> องค์ประกอบ | 2 |
| ::before | p::before | ใส่บางสิ่งบางอย่างก่อนที่เนื้อหาของแต่ละ <p> องค์ประกอบ | 2 |
| :checked | input:checked | เลือกทุกการตรวจสอบ <input> องค์ประกอบ | 3 |
| :disabled | input:disabled | เลือกทุกคนพิการ <input> องค์ประกอบ | 3 |
| :empty | p:empty | เลือกทุก <p> องค์ประกอบที่ไม่มีเด็ก (including text nodes) | 3 |
| :enabled | input:enabled | เลือกเปิดใช้งานทุก <input> องค์ประกอบ | 3 |
| :first-child | p:first-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนแรกของแม่ | 2 |
| ::first-letter | p::first-letter | เลือกตัวอักษรตัวแรกของทุก <p> องค์ประกอบ | 1 |
| ::first-line | p::first-line | เลือกบรรทัดแรกของทุก <p> องค์ประกอบ | 1 |
| :first-of-type | p:first-of-type | เลือกทุก <p> องค์ประกอบที่เป็นครั้งแรก <p> องค์ประกอบของแม่ | 3 |
| :focus | input:focus | เลือกองค์ประกอบเข้าซึ่งมีโฟกัส | 2 |
| :hover | a:hover | เลือกการเชื่อมโยงบนเมาส์มากกว่า | 1 |
| :in-range | input:in-range | เลือกองค์ประกอบการป้อนข้อมูลที่มีค่าที่อยู่ในช่วงที่ระบุ | 3 |
| :invalid | input:invalid | เลือกองค์ประกอบการป้อนข้อมูลทั้งหมดที่มีค่าไม่ถูกต้อง | 3 |
| :lang( language ) | p:lang(it) | เลือกปรับทุก <p> องค์ประกอบที่มี lang แอตทริบิวต์เท่ากับ "it" (Italian) | 2 |
| :last-child | p:last-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนสุดท้ายของแม่ | 3 |
| :last-of-type | p:last-of-type | เลือกทุก <p> องค์ประกอบที่เป็นวันสุดท้าย <p> องค์ประกอบของแม่ | 3 |
| :link | a:link | เลือกการเชื่อมโยง unvisited ทั้งหมด | 1 |
| :not( selector ) | :not(p) | เลือกองค์ประกอบที่ไม่ได้เป็นทุก <p> องค์ประกอบ | 3 |
| :nth-child( n ) | p:nth-child(2) | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของแม่ | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของแม่นับจากเด็กที่ผ่านมา | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | เลือกทุก <p> องค์ประกอบที่เป็นที่สอง <p> องค์ประกอบของแม่นับจากเด็กที่ผ่านมา | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | เลือกทุก <p> องค์ประกอบที่เป็นที่สอง <p> องค์ประกอบของแม่ | 3 |
| :only-of-type | p:only-of-type | เลือกทุก <p> องค์ประกอบที่นี้ที่เดียว <p> องค์ประกอบของแม่ | 3 |
| :only-child | p:only-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกชายคนเดียวของแม่ | 3 |
| :optional | input:optional | เลือกองค์ประกอบการป้อนข้อมูลที่ไม่มี "required" แอตทริบิวต์ | 3 |
| :out-of-range | input:out-of-range | เลือกองค์ประกอบการป้อนข้อมูลที่มีค่านอกช่วงที่ระบุ | 3 |
| :read-only | input:read-only | เลือกองค์ประกอบการป้อนข้อมูลด้วย "readonly" แอตทริบิวต์ที่ระบุ | 3 |
| :read-write | input:read-write | เลือกองค์ประกอบการป้อนข้อมูลด้วย "readonly" แอตทริบิวต์ไม่ระบุ | 3 |
| :required | input:required | เลือกองค์ประกอบการป้อนข้อมูลกับ "required" แอตทริบิวต์ที่ระบุ | 3 |
| :root | :root | เลือกองค์ประกอบรากของเอกสาร | 3 |
| ::selection | ::selection | เลือกส่วนหนึ่งขององค์ประกอบที่เลือกโดยผู้ใช้ | |
| :target | #news:target | เลือกองค์ประกอบ #news งานอยู่ในปัจจุบัน (คลิกที่ URL ที่มีชื่อสมอนั้น) | 3 |
| :valid | input:valid | เลือกองค์ประกอบการป้อนข้อมูลทั้งหมดที่มีค่าที่ถูกต้อง | 3 |
| :visited | a:visited | เลือกการเชื่อมโยงเข้ามาเยี่ยมชมทั้งหมด | 1 |