การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div
โพสต์แล้ว: 13/11/2019 6:49 pm
การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div
การใช้ Selectors จะใช้เพื่อให้เราสามารถ เลือกกำหนด style ให้แก่ elements ต่างๆที่เราต้องการได้ ไม่ว่าจะกำหนด หลาย elements หรือเฉพาะเจาะจงที่ตำแหน่งนั้นๆ ก็สามารถทำได้
ซึ่งการอ้างอิง ที่ใช้กันมากๆ ก็มี อ้างอิง โดย class id html tag เป็นต้น
ซึ่งสามารถศึกษาเพิ่มเติมได้ ดังนี้
CSS การใช้งาน Selectors (Grouping Selectors)
CSS การใช้งาน Selectors (id Selector)
CSS การใช้งาน Selectors (class Selector)
ตัวอย่าง แท็ค h1 ซึ่งอยู่ใน div ซ้อนอีกชั้น
กำหนด CSS ให้ h1
.outside อ้างอิง class div ชั้นแรก
.inside อ้างอิง class div ชั้นใน
h1 อ้างอิง h1 tag
ผลลัพธ์ที่ได้
การใช้ Selectors จะใช้เพื่อให้เราสามารถ เลือกกำหนด style ให้แก่ elements ต่างๆที่เราต้องการได้ ไม่ว่าจะกำหนด หลาย elements หรือเฉพาะเจาะจงที่ตำแหน่งนั้นๆ ก็สามารถทำได้
ซึ่งการอ้างอิง ที่ใช้กันมากๆ ก็มี อ้างอิง โดย class id html tag เป็นต้น
ซึ่งสามารถศึกษาเพิ่มเติมได้ ดังนี้
CSS การใช้งาน Selectors (Grouping Selectors)
CSS การใช้งาน Selectors (id Selector)
CSS การใช้งาน Selectors (class Selector)
ตัวอย่าง แท็ค h1 ซึ่งอยู่ใน div ซ้อนอีกชั้น
โค้ด: เลือกทั้งหมด
<div class="outside">
<div class="inside">
<h1>CSS SELECTORS</h1>
</div>
</div>
โค้ด: เลือกทั้งหมด
<style media="screen">
.outside .inside h1{
color: red;
font-weight: bold;
}
</style>
.inside อ้างอิง class div ชั้นใน
h1 อ้างอิง h1 tag
ผลลัพธ์ที่ได้