HTML for Kids · บทเรียน

ประเภทของตัวเลือก

ประเภทของตัวเลือก เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน

บทนำ

สวัสดีค่ะ/ครับ

ในบทเรียนนี้ เราจะเพิ่มพูนความรู้เกี่ยวกับ CSS ด้วยตัวเลือกที่ซับซ้อนยิ่งขึ้น

การกำหนดรูปแบบหลายรายการ

เราสามารถกำหนดรูปแบบหลายรายการได้โดยใส่เครื่องหมายอัฒภาคคั่นระหว่างรูปแบบแต่ละรายการ

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

มีเอกสาร HTML ที่ซับซ้อนยิ่งขึ้น

ที่ผ่านมา เราได้ทำงานกับตัวเลือกแท็ก ID และคลาสอย่างง่าย แต่ในบางกรณี เมื่อส่วนติดต่อผู้ใช้มีความซับซ้อน เราจะต้องใช้ตัวเลือกที่ซับซ้อนยิ่งขึ้น

ในตัวอย่างด้านล่าง มีเอกสาร HTML ที่ซับซ้อนยิ่งขึ้น

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

วิเคราะห์ตัวอย่าง

ตอนนี้มาวิเคราะห์โค้ดของเรากัน

มี div ที่มี ID เป็น my-area ซึ่งทำหน้าที่เป็นตัวครอบภายในส่วนเนื้อหาของหน้า และเป็นบรรพบุรุษขององค์ประกอบทั้งหมดที่อยู่ภายใน div นี้
องค์ประกอบ p ที่มีคลาส firstเป็นองค์ประกอบพี่น้องขององค์ประกอบ div ที่มีคลาส second
องค์ประกอบที่สามเป็นองค์ประกอบลูกขององค์ประกอบที่สอง และองค์ประกอบ my-areaถือเป็นบรรพบุรุษขององค์ประกอบที่สามได้

คำเตือน

คุณสามารถมองโครงสร้าง HTML เป็นแผนผังครอบครัวตามตัวอักษรได้

คุณอาจได้รับการถ่ายทอดทางพันธุกรรมจากปู่ของคุณ

แต่หากการถ่ายทอดนี้เปลี่ยนแปลงที่พ่อของคุณ ยีนของพ่อจะมีอิทธิพลมากกว่า และลักษณะที่ได้รับจากปู่จะเปลี่ยนแปลงไป

การผสมตัวเลือก

ตอนนี้มาดูวิธีสร้างการผสมตัวเลือกกัน

คำสั่งต่อไปนี้ระบุว่าองค์ประกอบที่มีคลาส second เป็นองค์ประกอบสืบทอด (องค์ประกอบลูกหรือลูกหลาน) ขององค์ประกอบที่มีคลาส third

หากมีช่องว่างระหว่างคลาสทั้งสอง หมายความว่าคลาสทางซ้ายกำลังค้นหาองค์ประกอบสืบทอด

.second .third{
	color:red;
}

ตัวเลือกลูก

ในตัวอย่างด้านล่าง

หมายถึงการเลือกคลาส third ซึ่งเป็นองค์ประกอบลูกของคลาส second

เครื่องหมายมากกว่า หมายถึงการเลือกองค์ประกอบลูกขององค์ประกอบที่เกี่ยวข้อง

.second > .third{
	color:red;
}

เราสามารถผสมตัวเลือกแท็กและคลาสเพื่อเลือกองค์ประกอบได้

ในขณะเดียวกัน เราสามารถผสมตัวเลือกแท็กและคลาสเพื่อเลือกองค์ประกอบได้

ตัวอย่างด้านล่างจะเลือกองค์ประกอบ p ที่มีคลาส third

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

สมมติว่าเราต้องการเลือก div ที่มีคลาส first

สมมติว่าเราต้องการเลือก div ที่มีคลาส first

ในตัวอย่างด้านล่าง หมายถึงการเลือกองค์ประกอบที่มีคลาส first ซึ่งเป็นองค์ประกอบลูกขององค์ประกอบ div ที่มี ID เป็น my-area

การทำเช่นนี้จะเพิ่มความจำเพาะขององค์ประกอบที่จะเลือก


div#my-area > .first{
color:red;
}

การเลือกทั้งหมด

เครื่องหมายดอกจัน (*) มีความสำคัญในบรรดาตัวเลือก

เครื่องหมายนี้หมายถึงการเลือกทั้งหมด

ในตัวอย่างด้านล่าง ตัวเลือกหมายความว่าองค์ประกอบที่มี ID เป็น my-area ควรเลือกองค์ประกอบสืบทอดทั้งหมด

สิ่งที่เราต้องระวังคือ ตัวเลือกนี้ไม่ได้เลือกเฉพาะองค์ประกอบลูก แต่เลือกองค์ประกอบสืบทอดทั้งหมด

หากเราต้องการเลือกเฉพาะองค์ประกอบลูก เราจะต้องใส่เครื่องหมายมากกว่าหน้าดอกจัน

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

ตัวเลือกพี่น้องที่อยู่ติดกัน

เราได้ใช้ตัวเลือกองค์ประกอบสืบทอดและตัวเลือกลูกแล้ว ตอนนี้มาเรียนรู้เกี่ยวกับตัวเลือกพี่น้องกัน

ตัวเลือกพี่น้องใช้เครื่องหมาย + เพื่อเลือกองค์ประกอบพี่น้องถัดไป

ในตัวอย่างของเรา ตัวเลือกจะทำให้สีพื้นหลังขององค์ประกอบย่อหน้าที่ 3 เปลี่ยนเป็นสีเหลือง

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

ตัวเลือกพี่น้องทั่วไป

หากเราต้องการเลือกไม่ใช่แค่พี่น้องลำดับถัดไป แต่เลือกพี่น้องทั้งหมดที่ตามมา เราจะใช้เครื่องหมายตัวหนอน (~)

สัญลักษณ์ตัวหนอนเรียกอีกอย่างว่าตัวเชื่อมพี่น้องถัดมา

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

พิวโดคลาสและคลาส CSS

นิพจน์ที่ไม่ใช่คลาสแต่ทำงานเหมือนคลาสเรียกว่าพิวโดคลาส

เราไม่ได้กำหนดพิวโดคลาสให้กับองค์ประกอบใดใน HTML

เมื่อเบราว์เซอร์แปลความหมายโค้ด เบราว์เซอร์จะถือว่าพิวโดคลาสเหล่านี้มีอยู่ ดังนั้นเราจึงสามารถใช้พิวโดคลาสในตัวเลือก CSS ได้

พิวโดคลาส :hover

ในบรรดาพิวโดคลาสทั้งหลาย :hover เป็นพิวโดคลาสที่รู้จักกันดีที่สุดอย่างไม่ต้องสงสัย

Hover (:hover) คือพิวโดคลาสที่เบราว์เซอร์กำหนดให้กับองค์ประกอบที่เกี่ยวข้องโดยอัตโนมัติ เมื่อนำเมาส์ไปวางเหนือองค์ประกอบนั้น

พิวโดคลาสจะถูกใช้หลังสัญลักษณ์โคลอน (:) ในคำสั่งตัวเลือก

ตัวอย่างไวยากรณ์สำหรับการใช้พิวโดคลาสแสดงไว้ด้านล่าง

selector:pseudo-class {
   property: value;
}

การกำหนดรูปแบบลิงก์ด้วย :hover

ตอนนี้มาสร้างลิงก์และดูว่าลิงก์จะแสดงผลอย่างไรเมื่อวางเมาส์ไว้เหนือ

คำเตือน: เนื่องจากอุปกรณ์เคลื่อนที่ไม่มีเหตุการณ์ hover เหมือนบนเว็บ เอฟเฟกต์นี้จึงไม่แสดงในแอปพลิเคชัน CoddyKit บนอุปกรณ์เคลื่อนที่

ในตัวอย่างด้านล่าง มาสังเกตกันว่าเมื่อเราเลื่อนเมาส์ไปไว้เหนือลิงก์ สีของลิงก์จะเปลี่ยนเป็นสีเขียว

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

:first-child พิวโดคลาส

หนึ่งในพิวโดคลาสที่ทำให้สับสนมากที่สุดคือ :first-child

โดยทั่วไป เมื่อดูจากชื่อ เราอาจตีความได้ว่าเป็นการเลือกองค์ประกอบลูกแรกขององค์ประกอบหนึ่ง

แต่จริง ๆ แล้ว การตีความนี้ไม่ถูกต้อง

พิวโดคลาสนี้ใช้เลือกองค์ประกอบแรกในกลุ่มองค์ประกอบพี่น้องขององค์ประกอบนั้น

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

:last-child พิวโดคลาส

last-child คือสิ่งที่ตรงข้ามกับพิวโดคลาส first-child โดยใช้เลือกองค์ประกอบสุดท้ายในกลุ่มองค์ประกอบพี่น้อง

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

::before พิวโดอิลิเมนต์

หากเราต้องการเพิ่มบางสิ่งไว้หน้าองค์ประกอบ จะใช้ตัวเลือกพิวโด ::before

ในตัวอย่างด้านล่าง เราเพิ่มเนื้อหา 'Hello' ไว้หน้าองค์ประกอบส่วนหัว

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

::after พิวโดอิลิเมนต์

พิวโดอิลิเมนต์ ::after ซึ่งตรงข้ามกับพิวโดอิลิเมนต์ ::before ใช้เพื่อเพิ่มเนื้อหาใหม่หลังองค์ประกอบ

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

คลาสเทียมของรายการ

เราได้เรียนรู้คลาสเทียมที่ใช้บ่อยที่สุดแล้ว อย่างไรก็ตาม ยังมีคลาสเทียมอีกมากมาย

คุณสามารถดูรายการคลาสเทียมทั้งหมดได้จากลิงก์ด้านล่าง และเลือกใช้คลาสใดก็ได้เมื่อต้องการ

ขอแสดงความยินดี

ขอแสดงความยินดี 🎉

ในส่วนนี้ เราได้เรียนรู้ประเภทของตัวเลือก

ในส่วนถัดไป เราจะเรียนรู้คุณสมบัติ CSS ที่ใช้บ่อยที่สุด

คำถามที่พบบ่อย

บทเรียน “ประเภทของตัวเลือก” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ประเภทของตัวเลือก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ประเภทของตัวเลือก”

ประเภทของตัวเลือก คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน

บทเรียน “ประเภทของตัวเลือก” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม

ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

← กลับไปที่ HTML for Kids