การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div

Re: การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div

by mindphp » 13/11/2019 6:52 pm

ศึกาเพิ่มเติมบทเรียน css
https://www.mindphp.com/%E0%B8%9A%E0%B8 ... 9-css.html

การใช้ CSS selectors เพื่ออ้างอิง h1 tag ที่อยุ่ข้างใน div

by bankjittapol » 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 ซ้อนอีกชั้น
Image

Code: Select all

<div class="outside">
  <div class="inside">
    <h1>CSS SELECTORS</h1>
  </div>
</div>
กำหนด CSS ให้ h1

Code: Select all

<style media="screen">
  .outside .inside h1{
    color: red;
    font-weight: bold;
  }
</style>
.outside อ้างอิง class div ชั้นแรก
.inside อ้างอิง class div ชั้นใน
h1 อ้างอิง h1 tag

ผลลัพธ์ที่ได้
Image

Top