กำหนด selector โดย ID หรือ Class

ถ้าเราได้กำหนด element ใดๆเอาไว้ในรูปแบบ id หรือ class แล้วนั้น เราก็จะสามารถเลือกเจาะจง กำหนดรูปแบบที่เฉพาะตัวให้กับ id หรือ class นั้นๆได้ โดยที่ id หรือ class อื่นจะไม่ได้รับผลกระทบใดๆเลย

<body>
<div id=”cc1″>
<h2>หัวข้อที่ 1</h2>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
</div>
<div id=”cc2″>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</div>
</body>
สิ่งเพิ่มเติมที่ 9.9 โค้ด ที่มีการแบ่ง id ออกเป็นสอง id แต่เนื้อหา มีในลักณะที่คล้ายกัน เราจะเอาไปกำหนด id ให้ต่างกันเพื่อนดูความแต่ต่างเมื่อเรียกใช้งาน

การกำหนดรูปแบบให้ id ใดๆโดยเฉพาะเจาะจง
1.พิมพ์ #
2.ไม่ต้องเคาะวรรคใดๆ ให้พิมพ์ชื่อ id ลงไปได้ทันที โดยที่ id จะต้องไม่ซ้ำกัน เพราะว่ามาตรฐานกำหนดว่า id ใดๆจะต้องมีได้เพียง 1 เดียวในแต่ละหน้า เท่านั้น

div#cc1 {color: red;}
สิ่งเพิ่มเติมที่ 9.10 รูปแบบนี้คือการกำหนดให้ id ชื่อ cc1 มีสีแดง

การกำหนดรูปแบบให้ class ใดๆ โดยเฉพาะเจาะจง
1.พิมพ์ .
2.ไม่ต้องเคาะวรรคใดๆ ให้พิมพ์ชื่อ class ลงไปได้ทันที โดยที่ class จะต้องไม่ซ้ำกัน เพราะว่ามาตรฐานกำหนดว่า class ใดๆจะต้องมีได้เพียง 1 เดียวในแต่ละหน้า เท่านั้น

เพิ่มเติม
- เราสามารถใช้ class และ id เพื่อการกำหนดรูปแบบเพียงแค่จุดเดียว เช่น .news { color: red;} ก็จะมีผลต่อเฉพาะจุดที่เรียกใช้ class ที่ชื่อ news แล้วเท่านั้น แต่ขณะที่ h1.news {color: red; } จะทำให้ h1 element ที่มี class ที่ชื่อ news นั้น จะได้รับผลการเปลี่ยนแปลงนี้


สิ่งเพิ่มเติมที่ 9.11 จะเห็นว่าเฉพาะ id cc1 เท่านั้น ที่รูปแบบเปลี่ยนไปตามที่เราได้เขียน style เอาไว้

No comments yet.
You must be logged in to post a comment.