Contextual selectors การประกาศ class หรือ id ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง
p ul{
background:#000000;
}
แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ
ส่วน
ul อื่นๆ ถ้าไม่อยู่ใน
p ก็จะเป็นปกติ
ใช้ในกรณีไหนล่ะ? ก็เช่นว่า เมื่อคุณสร้างขอบเขต div มา 1 อัน ต้องการทำเป็น กล่องสำหรับ content ประกอบด้วย thumbnail และเนื้อหานิดหน่อย สมมติว่า คุณต้องการให้รูป ในกล่องนี่มี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆทั้งหมดใน page ทำไงล่ะ คุณอาจจะเขียน class ขึ้นมาว่า
.borderimage{
border-width:2px;
border-color:grey;
}
แล้วใส่ คลาส นี้ ไปในทุกรูป ที่คุณต้องการให้มี border แต่จะดีกว่านั้น หากเราเขียนแบบนี้
#contentbox img{
border-width:2px;
border-color:grey;
}
เท่านี้ รูป ทุกรุป ที่อยู่ในขอบเขต
<div id=”contentbox”>
<img>
<img>
</div>
ก็จะมี border 2px สีเทา แบบนี้ทำให้คุณลดการโค้ดลงกว่าเดิม คุณสามารถเขียน ซ้อนกัน 3 หรือ 4 ชั้น ได้ ไม่มีปัญหา ถ้าคุณจะไม่งงซะเอง
Related Articles
คราวที่แล้วเราพูดถึง simple selectors ไปแล้ว มาเพิ่มเติมกันต่อ simple selectors สามารถที่จะมี class และ id ที่ต่างกันได้ ตัวอย่าง
p.class1{ color:#ffffff } หรือ p.class2{ color:#000000 }
ตัวอย่าง มี 2 คลาส ชื่อว่า class1 และ class2เมื่อนำไปใช้ในไฟล์ html จะเป็นดังนี้
<p class=”class1″>จะได้ตัวหนังสือสีขาว </p>
หรือ
<p class=”class2″>จะได้ตัวหนังสือสีดำ </p>
อีกรูปแบบหนึ่งคือกำหนดแต่คลาสอย่างเดียว ไม่ต้องมี selectors เช่น
.small { font-size:10px }
รูปแบบนี้สามารถ นำคลาสไปใส่ที่ใดก็ได้ ภายในขอบเขตนั้น ก็จะมี ฟ้อนต์เท่ากับ 10 เช่น
<div class=”small”> ตัวหนังสือ </div>
จะสังเกตุเห้นว่า class จะมี . นำหน้า แต่ ID นั้น จะใช้ # นำหน้า ตัวอย่างการกำหนด ID เช่น
#bgw { backgroung-colour:#ffffff }
เมื่อนำไปใช้
<p id=”bgw”> ภายในนี้จะมี bg สีขาว </p>
แล้ว ID กับ Class ใช้ในกรณีไหนล่ะ? ID จะใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer ส่วน class ใช้เมื่อ จะมีการทำซ้ำหลายๆครั้ง เช่น .boxcontent
การตั้งชื่อ class และ id ก็ควรให้มีความสัมพันธ์กับส่วนที่นำไปใช้ และควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และ ตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่าบางชนิดครับ
Related Articles
Selectors
อธิบายง่ายๆก็คือ tag ธรรมชาติที่เราใช้ๆกัน ใน html นั่นเอง ในไฟล์ .css เราจะเขียนเป็นรูปแบบ เช่น
body {
color:#000000;
font-size:14px;
}
หรือ
p {
color:red;
font-size:16px
}
รูปแบบจะเป็นแบบนี้ คือ tag { property : value ; } แต่ถ้ามีหลายๆ property ในบรรทัดสุดท้าย ไม่ต้องปิดด้วย ; ก็ได้ ให้ผลเหมือนกัน แต่ผมมักจะเขียน ; ทุกบรรทัดเพราะ กันพลาดนะครับ เมื่อกำหนดแบบนี้แล้ว text ที่อยู่ใน body ทั้งหมด จะเป็นสีดำ ฟ้อนต์ 14 และ ถ้าอยู่ใน <p>…..</p>จะเป็นสีแดง ขนาด 16
Related Articles
Recent Comments