ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Contextual selectors

การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้
ดังเช่นตัวอย่างต่อไปนี้ 
ตัวอย่าง 
<html>
<head>
<style type="text/css">
h1 { color: blue; background-color:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body> <h1>สารปนเปื้อนในอาหาร</h1>
<h1>ดินประสิว</h1>
<h1><em>สารหนู </em></h1>
<h1><u>ตะกั่ว </u></h1>
</body>
</html>


ผลลัพธ์ 
ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่

สารปนเปื้อนในอาหาร

ดินประสิว

สารหนู

ตะกั่ว


อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectors

ตัวอย่าง 
<html>
<head>
<style type="text/css">
/*ให้ img ทั่วไป ขอบสีเทา หนา 2*/
img {
border:solid;
border-width:2px;
border-color:#999999;
}
/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำหนด HTML tag เฉพาะ*/
.borderimage {
border:solid;
border-width:5px;
border-color:red;
}

/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดง หนา5*/
#imgspecial_box img {
border:solid;
border-width:5px;
border-color:red;
}

</style>
</head>
<body>
<img src="http://img.kapook.com/image/icon/23.gif" />
<img src="http://img.kapook.com/image/icon/23.gif" />
<img src="http://img.kapook.com/image/icon/23.gif" />
<br><br>
แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src="http://img.kapook.com/image/icon/23.gif" class="borderimage" />
<img src="http://img.kapook.com/image/icon/23.gif" class="borderimage" />
<img src="http://img.kapook.com/image/icon/23.gif" class="borderimage" />
<br>
<br>
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id="imgspecial_box">
<img src="http://img.kapook.com/image/icon/23.gif" />
<img src="http://img.kapook.com/image/icon/23.gif" />
<img src="http://img.kapook.com/image/icon/23.gif" />
</div>
</body>
</html>
Output
  

แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป
  

แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
  

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

ตัวอย่าง
<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
a.boldlink { color:blue; font-weight:bold; }
</style>
</head>
<body>
<a href="http://www.enjoyday.net/webtutorial/html/index.html"class="boldlink">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html"class="boldlink">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html"class="boldlink">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html"class="boldlink">JavaScript</a>
</body>
</html>

แก้ไขใหม่เขียนแบบ Contextual selectors

<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
#boldlink_box a { color:blue; font-weight:bold; }
</style>
</head>
<body>
<div id="boldlink_box">
<a href="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div>
</body>
</html>


ผลลัพธ์
เขียนโดย ที่