ตัวเลือก CSSExplained

53 of 53 rows

ตัวเลือก↕	จับคู่กับอะไร↕	ตัวอย่าง↕
พื้นฐาน
⤢type	ทุก element ที่ใช้แท็กนั้น	button { }
⤢.class	element ที่มี class นั้น	.active { }
⤢#id	element เดียวที่มี id นั้น	#header { }
⤢*	ทุก element	* { box-sizing: border-box; }
⤢:root	รากของเอกสาร ตำแหน่งมาตรฐานสำหรับ custom property ระดับโกลบอล	:root { --gap: 1rem; }
⤢A, B	element ที่เข้ากับ A หรือ B (การจัดกลุ่ม)	h1, h2, h3 { }
Combinator
⤢A B	B ใดก็ได้ที่เป็นลูกหลานของ A	nav a { }
⤢A > B	B ที่เป็นลูกโดยตรงของ A	ul > li { }
⤢A + B	B ที่อยู่ถัดจาก A ทันที โดยมี parent เดียวกัน	h1 + p { }
⤢A ~ B	ทุก B ที่อยู่หลัง A โดยมี parent เดียวกัน	h1 ~ p { }
Pseudo-class (สถานะ)
⤢:hover	element ในขณะที่ตัวชี้อยู่เหนือมัน	a:hover { }
⤢:focus	element ที่ได้รับโฟกัสจากคีย์บอร์ด	input:focus { }
⤢:first-child	element ที่เป็นลูกตัวแรกของ parent	li:first-child { }
⤢:nth-child(n)	ลูกตัวที่ n รับสูตรอย่าง 2n ได้	tr:nth-child(2n) { }
⤢:not()	element ที่ไม่เข้ากับตัวเลือกภายในใด ๆ รับลิสต์ได้ตั้งแต่ Selectors 4	li:not(:first-child, .skip) { }
⤢:checked	checkbox, radio หรือ option ที่ถูกเลือก	input:checked { }
⤢:disabled	input หรือปุ่มที่ถูกปิดใช้งาน	button:disabled { }
⤢:has()	parent ที่มี element เข้ากับตัวเลือกภายในอยู่ข้างใน	li:has(ul) { }
⤢:is()	ตัวเลือกใดก็ได้ในลิสต์ specificity เท่ากับค่าสูงสุดในลิสต์	:is(ol, ul) li { }
⤢:where()	เหมือน :is() แต่ specificity เป็นศูนย์	:where(ol, ul) li { }
⤢:focus-visible	โฟกัสที่ควรแสดงวงแหวน มักมาจากคีย์บอร์ด	a:focus-visible { }
⤢:focus-within	element ที่ตัวมันเองหรือลูกหลานมีโฟกัส	form:focus-within { }
⤢:last-child	element ที่เป็นลูกตัวสุดท้ายของ parent	li:last-child { }
⤢:only-child	element ที่ไม่มีพี่น้อง	p:only-child { }
⤢:nth-of-type(n)	พี่น้องตัวที่ n ที่ใช้แท็กเดียวกัน รับสูตรอย่าง 2n ได้	p:nth-of-type(2n) { }
⤢:first-of-type, :last-of-type	พี่น้องตัวแรกหรือตัวสุดท้ายที่ใช้แท็กเดียวกัน	p:first-of-type { }
⤢:empty	element ที่ไม่มีลูกและไม่มีข้อความ	td:empty { }
⤢:link, :visited	ลิงก์ที่ยังไม่เคยเข้า กับลิงก์ที่เข้าไปแล้ว	a:visited { }
⤢:required, :optional	input ที่กำหนด required กับ input ที่เป็นทางเลือก	input:required { }
⤢:valid, :invalid	input ที่ค่าผ่านหรือไม่ผ่านกฎการตรวจสอบของมัน	input:invalid { }
⤢:read-only	input ที่ผู้ใช้แก้ไขไม่ได้	input:read-only { }
⤢:target	element ที่ id ตรงกับส่วน fragment ของ URL	#note:target { }
⤢:default	option ที่เลือกไว้ล่วงหน้าหรือปุ่มเริ่มต้นของกลุ่ม	input:default { }
⤢:indeterminate	checkbox ที่สคริปต์ตั้งเป็นสถานะ indeterminate	input:indeterminate { }
⤢:defined	element ในตัวใดก็ได้ หรือ custom element เมื่อถูก register แล้ว	my-widget:defined { }
⤢:lang()	element ที่อยู่ในภาษาที่กำหนด	p:lang(fr) { }
Pseudo-element
⤢::before	โหนดเนื้อหาที่สร้างขึ้นก่อน element	label::before { content: ""; }
⤢::after	โหนดเนื้อหาที่สร้างขึ้นหลัง element	code::after { content: ";"; }
⤢::first-letter	ตัวอักษรแรกของบล็อกข้อความ	p::first-letter { }
⤢::placeholder	ข้อความ placeholder ของ input	input::placeholder { }
⤢::first-line	บรรทัดแรกของบล็อกข้อความ	p::first-line { }
⤢::selection	ข้อความที่ผู้ใช้ไฮไลต์ไว้	::selection { }
⤢::marker	จุดนำหน้าหรือเลขกำกับของรายการในลิสต์	li::marker { }
⤢::backdrop	พื้นที่ด้านหลัง element แบบเต็มจอหรือ dialog	dialog::backdrop { }
⤢::file-selector-button	ปุ่มเรียกดูไฟล์ที่อยู่ภายใน input แบบไฟล์	input::file-selector-button { }
⤢::part()	ส่วนของ shadow DOM ที่ host เปิดเผยไว้	my-widget::part(header) { }
ตัวเลือกแอตทริบิวต์
⤢[attr]	element ที่มีแอตทริบิวต์นั้น ไม่สนค่า	[required] { }
⤢[attr=val]	แอตทริบิวต์มีค่าเท่ากับ val แบบตรงตัว	[type="submit"] { }
⤢[attr^=val]	แอตทริบิวต์ขึ้นต้นด้วย val	a[href^="https"] { }
⤢[attr$=val]	แอตทริบิวต์ลงท้ายด้วย val	a[href$=".pdf"] { }
⤢[attr*=val]	แอตทริบิวต์มี val อยู่ข้างใน	a[href*="login"] { }
⤢[attr~=val]	ลิสต์ที่คั่นด้วยช่องว่างและมี val เป็นหนึ่งในค่า	[class~="badge"] { }
⤢[attr|=val]	ค่าเท่ากับ val หรือขึ้นต้นด้วย val ตามด้วยเครื่องหมายขีดกลาง	[lang|="en"] { }