ตัวเลือก CSS จะเลือกองค์ประกอบที่คุณสามารถปรับใช้สไตล์ได้ ตัวเลือกพื้นฐานที่สุดคือตัวเลือกองค์ประกอบ ซึ่งเลือกองค์ประกอบตามชื่อ ตัวเลือกอื่นๆ ได้แก่ id, class, universal และ descendant selector

Selectors เป็นหนึ่งในสองส่วนของคำสั่ง CSS ตัวเลือกใช้เพื่อกำหนดเป้าหมายองค์ประกอบบนหน้า HTML สำหรับรูปแบบเฉพาะ

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

คู่มือนี้จะสำรวจพื้นฐานของตัวเลือกใน CSS ว่าคุณจะใช้ประโยชน์จากตัวเลือกที่ใช้บ่อยที่สุดในโค้ดได้อย่างไร

ตัวเลือก CSS

ตัวเลือก CSS ระบุองค์ประกอบ HTML ที่คุณต้องการใช้สไตล์ CSS Selectors สามารถเลือกองค์ประกอบตามชื่อ ID คลาส และแอตทริบิวต์อื่นๆ ตัวเลือกปรากฏขึ้นก่อนวงเล็บเหลี่ยมในกฎ CSS

ใน CSS กฎจะใช้เพื่อกำหนดสไตล์ที่ควรนำไปใช้กับองค์ประกอบหรือช่วงขององค์ประกอบ กฎมีสององค์ประกอบ:ตัวเลือกและการประกาศ

นี่คือตัวอย่างกฎใน CSS:

h1 {
	color: pink;
}

กฎ CSS นี้กำหนดสีขององค์ประกอบ h1 ทั้งหมดบนหน้าเว็บเป็นสีชมพู องค์ประกอบสองประการของกฎของเราคือ:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

• h1 ซึ่งเป็นองค์ประกอบที่ใช้สไตล์ของเรา สิ่งนี้เรียกว่าตัวเลือก
• สี :ชมพู ซึ่งเป็นสไตล์ที่ใช้กับองค์ประกอบในตัวเลือกของเรา นี่เรียกว่าการประกาศ ในตัวอย่างนี้ เราเปลี่ยนสีขององค์ประกอบ h1 ทั้งหมดเป็นสีชมพู

ตัวเลือก CSS เป็นส่วนพื้นฐานของการออกแบบสไตล์เว็บ ตัวเลือกช่วยให้คุณบอกเบราว์เซอร์ว่าองค์ประกอบใดควรใช้สไตล์เฉพาะ ตัวอย่างเช่น คุณอาจมีตัวเลือกที่สั่งให้เบราว์เซอร์กำหนดรูปแบบทั้งหมด

องค์ประกอบหรือทั้งหมด

องค์ประกอบบนหน้าเว็บ

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

CSS มีตัวเลือกที่หลากหลาย ให้เราสำรวจตัวอย่างตัวเลือกหลักที่คุณน่าจะพบเมื่อคุณออกแบบกฎ CSS

ตัวเลือกตามองค์ประกอบ CSS

ตัวเลือกแบบอิงองค์ประกอบทำให้คุณสามารถใช้สไตล์กับอินสแตนซ์ทั้งหมดขององค์ประกอบในเอกสารที่กฎสอดคล้องกัน ตัวอย่างเช่น คุณสามารถใช้ตัวเลือกองค์ประกอบเพื่อใช้สไตล์กับทั้งหมด

แท็กในหน้า

สมมติว่าเราต้องการเปลี่ยนสีของข้อความตามย่อหน้าทั้งหมดบนหน้าเว็บเป็นสีเทา เราสามารถทำได้โดยใช้รหัสนี้:

p {
	color: gray;
}

การประกาศภายในตัวเลือก “p” ของเราจะถูกนำไปใช้กับทุกย่อหน้า (HTML

tag) บนหน้าเว็บของเรา

ตัวเลือก CSS id

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

สมมติว่าเราต้องการตั้งค่าแอตทริบิวต์ความสูงของ CSS ขององค์ประกอบที่เรียกว่า "box9" บนหน้าของเราเป็น 150px เราสามารถทำได้โดยใช้รหัสนี้:

#box9 {
	height: 150px;
}

กฎนี้จะกำหนดความสูงขององค์ประกอบด้วยรหัส “box9” เป็น 150px

ตัวเลือกคลาส CSS

ตัวเลือกคลาส CSS ค้นหาองค์ประกอบที่มีแอตทริบิวต์คลาสเฉพาะ ไวยากรณ์ของตัวเลือกคลาสคือจุด (.) ตามด้วยชื่อของคลาสที่คุณต้องการเลือก

ดังนั้น หากคุณต้องการกำหนดเป้าหมายคลาส “boxMiddle” คุณจะต้องใช้ตัวเลือก “.boxMiddle”

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

.pinkBox {
	color: pink;
}

ทุกองค์ประกอบบนหน้าเว็บที่มีคลาส “pinkBox” จะถูกตั้งค่าเป็นสีชมพู

นอกจากนี้ คุณยังสามารถระบุได้ว่าสไตล์ควรได้รับผลกระทบจากองค์ประกอบเฉพาะที่มีคลาสเฉพาะ เมื่อใช้เฉพาะตัวเลือกคลาส ทุกองค์ประกอบที่มีคลาสเฉพาะจะได้รับผลกระทบจากสไตล์ที่คุณกำหนด

หากเราใช้ตัวเลือกคลาสที่นำหน้าด้วยประเภทองค์ประกอบ เราสามารถใช้สไตล์กับองค์ประกอบเฉพาะกับบางคลาสได้เท่านั้น สมมติว่าเราต้องการสีพื้นหลังของทุก HTML

div.pinkBox {
	color: pink;
}

* {
	text-align: center;
}

li a {
	background-color: yellow;
}

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

h2, .alignCenter {
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size 18px;
	font-weight: normal;
}

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}