CSS Selectors
อ้างอิงด่วนสำหรับตัวเลือก CSS ทั้งหมด
Basic Selectors
| Selector | Description | Example |
|---|---|---|
*
|
Universal selector — matches every element | * { box-sizing: border-box; } |
div
|
Type selector — matches all elements of a given tag name | p { color: #333; } |
.class
|
Class selector — matches elements with this class attribute | .btn { padding: 8px 16px; } |
#id
|
ID selector — matches the element with this unique id | #header { height: 60px; } |
.class1.class2
|
Multiple classes — matches elements having both classes | .btn.btn-primary { background: blue; } |
div, p, span
|
Selector list (group) — matches any element in the list | h1, h2, h3 { font-family: sans-serif; } |
div.class
|
Type + class — matches div elements with this class | a.active { font-weight: bold; } |
div#id
|
Type + ID — matches div element with this specific ID | section#main { max-width: 1200px; } |
:root
|
Matches the root element (html in HTML documents) | :root { --primary: #007bff; } |
html
|
Matches the top-level html element | html { font-size: 16px; } |
Combinators
| Selector | Description | Example |
|---|---|---|
A B
|
Descendant combinator — B anywhere inside A | nav a { color: white; } |
A > B
|
Child combinator — B that is a direct child of A | ul > li { list-style: disc; } |
A + B
|
Adjacent sibling combinator — B immediately after A | h1 + p { margin-top: 0; } |
A ~ B
|
General sibling combinator — all B siblings after A | h2 ~ p { color: #666; } |
A || B
|
Column combinator — B within a table column A (CSS Grid Level 1) | col.selected || td { background: yellow; } |
Pseudo-classes
| Selector | Description | Example |
|---|---|---|
:hover
|
Matches when the user hovers the mouse over the element | a:hover { text-decoration: underline; } |
:focus
|
Matches when the element is focused (keyboard/click) | input:focus { outline: 2px solid blue; } |
:focus-visible
|
Matches focus only when it should be visually indicated | button:focus-visible { outline: 3px solid orange; } |
:active
|
Matches when the element is being activated (clicked) | button:active { transform: scale(0.98); } |
:visited
|
Matches anchor links that have been visited | a:visited { color: purple; } |
:link
|
Matches unvisited anchor links | a:link { color: blue; } |
:checked
|
Matches checked checkboxes, radio buttons, or options | input:checked + label { font-weight: bold; } |
:disabled
|
Matches form elements that are disabled | input:disabled { opacity: 0.5; } |
:enabled
|
Matches form elements that are enabled | input:enabled { border-color: #ccc; } |
:required
|
Matches form elements with the required attribute | input:required { border-left: 3px solid red; } |
:optional
|
Matches form elements without the required attribute | input:optional { border-color: #eee; } |
:valid
|
Matches form elements whose value is valid | input:valid { border-color: green; } |
:invalid
|
Matches form elements whose value is invalid | input:invalid { border-color: red; } |
:placeholder-shown
|
Matches an input element displaying placeholder text | input:placeholder-shown { font-style: italic; } |
:first-child
|
Matches an element that is the first child of its parent | li:first-child { border-top: none; } |
:last-child
|
Matches an element that is the last child of its parent | li:last-child { margin-bottom: 0; } |
:nth-child(n)
|
Matches elements based on their position among siblings | tr:nth-child(even) { background: #f5f5f5; } |
:nth-last-child(n)
|
Matches elements counting from the last sibling | li:nth-last-child(2) { color: red; } |
:first-of-type
|
Matches the first sibling of its type | p:first-of-type { font-size: 1.2em; } |
:last-of-type
|
Matches the last sibling of its type | p:last-of-type { margin-bottom: 0; } |
:nth-of-type(n)
|
Matches siblings of its type at position n | p:nth-of-type(odd) { background: #fafafa; } |
:only-child
|
Matches an element that is the only child of its parent | li:only-child { list-style: none; } |
:only-of-type
|
Matches an element that is the only sibling of its type | img:only-of-type { display: block; margin: auto; } |
:empty
|
Matches elements that have no children or text | div:empty { display: none; } |
:not(selector)
|
Negation pseudo-class — matches elements that do not match | input:not([type=submit]) { border: 1px solid #ccc; } |
:is(selector-list)
|
Matches any element in the selector list (forgiving) | :is(h1, h2, h3) { line-height: 1.2; } |
:where(selector-list)
|
Like :is() but with zero specificity | :where(header, footer) a { color: inherit; } |
:has(selector)
|
Matches parent if it contains the given selector | div:has(img) { padding: 0; } |
:target
|
Matches the element whose id matches the URL fragment | :target { background: yellow; } |
:lang(code)
|
Matches elements with a specific language attribute | :lang(fr) { font-style: italic; } |
Pseudo-elements
| Selector | Description | Example |
|---|---|---|
::before
|
Inserts content before the element's actual content | .quote::before { content: '\201C'; } |
::after
|
Inserts content after the element's actual content | .required::after { content: ' *'; color: red; } |
::first-line
|
Matches the first line of a block-level element | p::first-line { font-weight: bold; } |
::first-letter
|
Matches the first letter of a block-level element | p::first-letter { font-size: 2em; float: left; } |
::selection
|
Matches the portion of text selected by the user | ::selection { background: #005fcc; color: white; } |
::placeholder
|
Matches the placeholder text of form inputs | input::placeholder { color: #aaa; font-style: italic; } |
::marker
|
Matches the marker box of a list item (bullet/number) | li::marker { color: red; font-size: 1.2em; } |
::backdrop
|
Matches the backdrop behind dialog or fullscreen elements | dialog::backdrop { background: rgba(0,0,0,0.5); } |
::file-selector-button
|
Matches the button of a file input element | input[type=file]::file-selector-button { padding: 4px 8px; } |
Attribute Selectors
| Selector | Description | Example |
|---|---|---|
[attr]
|
Matches elements with the attribute present (any value) | [disabled] { opacity: 0.5; } |
[attr=value]
|
Matches elements where attr equals value exactly | [type=submit] { background: blue; } |
[attr~=value]
|
Matches elements where attr contains value as a whole word in a space-separated list | [class~=btn] { cursor: pointer; } |
[attr|=value]
|
Matches elements where attr equals value or starts with value- (for language codes) | [lang|=en] { font-family: Georgia; } |
[attr^=value]
|
Matches elements where attr starts with value | a[href^=https] { color: green; } |
[attr$=value]
|
Matches elements where attr ends with value | a[href$=.pdf]::after { content: ' (PDF)'; } |
[attr*=value]
|
Matches elements where attr contains value as a substring | a[href*=example] { color: orange; } |
[attr=value i]
|
Case-insensitive attribute value matching | [type=TEXT i] { border: 1px solid #ccc; } |
[attr=value s]
|
Case-sensitive attribute value matching (explicit) | [data-theme=Dark s] { background: #000; } |
คำถามที่พบบ่อย
Specificity ของ CSS กำหนดว่ากฎสไตล์ใดมีความสำคัญมากกว่าเมื่อหลายกฎกำหนดเป้าหมายที่องค์ประกอบเดียวกัน คำนวณเป็นค่าสี่ส่วน (inline, ID, คลาส/แอตทริบิวต์/pseudo-class, องค์ประกอบ/pseudo-element) สไตล์ inline ได้คะแนน (1,0,0,0) ID selector (#id) ได้ (0,1,0,0) class selector, attribute selector และ pseudo-class แต่ละอันได้ (0,0,1,0) element selector และ pseudo-element ได้ (0,0,0,1) ตัวเลือกที่มี specificity สูงสุดจะชนะ เมื่อ specificity เท่ากัน กฎที่ปรากฏทีหลังใน stylesheet จะมีผล การประกาศ !important จะแทนที่กฎ specificity ทั้งหมด
เครื่องหมายสองจุดเดี่ยว (:) แสดง pseudo-class ซึ่งเลือกองค์ประกอบตามสถานะหรือตำแหน่ง เช่น :hover, :focus, :nth-child() หรือ :not() เครื่องหมายสองจุดคู่ (::) แสดง pseudo-element ซึ่งเลือกและจัดรูปแบบส่วนเฉพาะของ element เช่น ::before, ::after, ::first-line หรือ ::placeholder ไวยากรณ์สองจุดคู่ถูกนำมาใช้ใน CSS3 เพื่อแยกความแตกต่างระหว่าง pseudo-element กับ pseudo-class เพื่อความเข้ากันได้กับเวอร์ชันก่อนหน้า เบราว์เซอร์ส่วนใหญ่ยังคงยอมรับเครื่องหมายสองจุดเดี่ยวสำหรับ pseudo-element เก่า เช่น :before และ :after
:nth-child(n) เลือกองค์ประกอบที่เป็นลูกคนที่ n ของพ่อแม่ โดยไม่คำนึงถึงประเภทองค์ประกอบ ดังนั้น p:nth-child(2) จะเลือก
เฉพาะเมื่อมันเป็นลูกคนที่สองของพ่อแม่เท่านั้น :nth-of-type(n) เลือกพี่น้องคนที่ n ที่มีประเภทองค์ประกอบเดียวกัน ดังนั้น p:nth-of-type(2) จะเลือก
คนที่สองในหมู่พี่น้อง โดยไม่คำนึงถึงตำแหน่งของมันท่ามกลางประเภทองค์ประกอบอื่น ในทางปฏิบัติ :nth-of-type() มักจะคาดเดาได้ง่ายกว่าเมื่อมีประเภทองค์ประกอบผสมกันภายใน container
ตัวเลือกแอตทริบิวต์จับคู่องค์ประกอบตามการมีอยู่หรือค่าของแอตทริบิวต์ HTML [attr] เลือกองค์ประกอบที่มีแอตทริบิวต์นั้น [attr="ค่า"] เลือกองค์ประกอบที่แอตทริบิวต์เท่ากับค่าพอดี [attr^="ค่า"] ตรงกันถ้าแอตทริบิวต์เริ่มต้นด้วยค่า [attr$="ค่า"] ตรงกันถ้าสิ้นสุดด้วยค่า [attr*="ค่า"] ตรงกันถ้าแอตทริบิวต์มีค่าอยู่ที่ใดก็ได้ [attr~="ค่า"] ตรงกันถ้าแอตทริบิวต์เป็นรายการที่คั่นด้วยช่องว่างซึ่งมีค่านั้น ตัวอย่างเช่น a[href^="https"] กำหนดเป้าหมายลิงก์ทั้งหมดที่เริ่มต้นด้วย "https"
ได้ คุณสามารถรวม selector ได้หลายวิธี การจัดกลุ่ม (A, B) ใช้สไตล์เดียวกันกับ selector หลายตัว การเชื่อมโยง (A.B หรือ A:hover) กำหนดเป้าหมายองค์ประกอบที่ตรงตามทุกเงื่อนไขพร้อมกัน เช่น div.active ตรงกับ
ที่มีคลาส "active" ตัวรวมกำหนดความสัมพันธ์: ช่องว่าง (A B) กำหนดเป้าหมายลูกหลาน, > (A > B) กำหนดเป้าหมายลูกโดยตรง, + (A + B) กำหนดเป้าหมายพี่น้องที่อยู่ติดกัน และ ~ (A ~ B) กำหนดเป้าหมายพี่น้องทั้งหมดที่ตามมา การรวมเทคนิคเหล่านี้ช่วยให้คุณเขียนกฎที่เฉพาะเจาะจงมากโดยไม่ต้องใช้คลาสหรือ ID เพิ่มเติม