Selector ใช้เลือก HTML เพื่อเอามากำหนด Style

CSS Selector หลักๆจะมี 3 อย่าง คือ

• Selector => เลือกตาม Elements หรือ Attribute
• Pseudo Selectors => เลือกตามสถานะ
• Combination Selector => เลือกตามความสัมพันธ์

Selector

Universal Selectors

เลือกทุก Elements ในหน้าเว็บ (เลือกทั้งหมดเลย)

index.html

<div>
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>

style.css

* {
	margin: 0;
	padding: 0;
}

Element Selectors

เลือก Elements ตามชื่อแท็ก เช่น <p> หรือ <h1>

index.html

<h1>Heading</h1>
<p>This is the first paragraph.</p>

style.css

p {
	line-height: 1.5;
	font-size: 16px;
}

Attribute Selectors

เลือก Elements ที่มี Attribute ที่กำหนด เช่น href, type

index.html

<a href="https://example.com">Example Link</a>
<a target="_blank">Open in new tab</a>
<button type="submit">Submit</button>

style.css

a[href] {
	color: blue;
}

button[type="submit"] {
	background-color: green;
	color: white;
}

Class Selectors

เลือก Elements ที่มีชื่อคลาสตามที่กำหนด เช่น btn

index.html

<button class="btn">Primary Button</button>
<button>Secondary Button</button>

style.css

.btn {
	padding: 10px 20px;
	border-radius: 4px;
}

.btn-secondary {
	background-color: gray;
	color: white;
}

ID Selectors

เลือก Elements ตาม ID (ควรมีแค่ตัวเดียวในหน้าเว็บ)

index.html

<header id="header">Welcome to the Website</header>
<button type="submit">Submit</button>

style.css

#header {
	font-size: 24px;
	text-align: center;
}

Nesting Selectors

การซ้อน Selectors ใช้ใน SCSS เพื่อทำให้อ่านง่ายขึ้น

index.html

<div class="container full-width">
  <!-- Content here -->
</div>

style.scss

.container {
	background-color: #fff;

	&.full-width {
		width: 100%;
	}
}

Pseudo

ใช้จัดการกับ สถานะ (state) หรือ ตำแหน่ง (position) ของ Elements บางอย่าง เช่น เมาส์ชี้, คลิก, หรือเลือก Elements

Pseudo-elements

ใช้ใส่หรือปรับแต่งเนื้อหาที่ไม่มีใน HTML เอง เช่น เติมข้อความต่อท้าย

index.html

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>

style.css

p:last-of-type::after {
	content: " - The last paragraph";
	color: gray;
}

Pseudo-classes

ใช้จัดการกับสถานะพิเศษ เช่น เมื่อเอาเมาส์ไปชี้ (:hover)

index.html

<a href="#">Hover over this link</a>

style.css

a:hover {
	text-decoration: underline;
	color: red;
}

Combinators Selector

ใช้เลือก Elements ที่สัมพันธ์กัน

Child

เลือกเฉพาะลูกที่อยู่ตรงชั้นถัดไปของพ่อ

index.html

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
</ul>

style.css

ul > li {
	list-style-type: none;
	color: blue;
}

Descendant Combinator

เลือกทุกลูกหลานในชั้นไหนก็ได้

index.html

<div>
  <p><a href="#">Nested link</a></p>
  <a href="#">Direct child link</a>
</div>

style.css

div a {
	color: green;
}

Next-sibling Combinator

เลือก Elements ที่อยู่ข้างๆ ต่อจาก Element ที่เลือก

index.html

<div>Block 1</div>
<p>Paragraph directly after Block 1</p>
<p>Another paragraph</p>

style.css

div + p {
	font-weight: bold;
}

Subsequent-sibling Combinator

เลือก Elements ทุกตัวที่เป็นพี่น้องถัดไป

index.html

<div>Block 1</div>
<p>First sibling</p>
<p>Second sibling</p>

style.css

div ~ p {
	font-style: italic;
}

Selector List

เลือกหลาย Elements พร้อมกันโดยใช้ ,

index.html

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>

style.css

h1, h2, h3 {
	color: #333;
	font-family: Arial, sans-serif;
}