หน้าแรก

Contextual selectors ใน CSS


  การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ

Example
<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>

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

วิธีรักษาสุขภาพ

วิธีลดน้ำหนัก

วิธีรักษาสุขภาพ

วิธีรักษาสุขภาพ


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

Example

<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="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<br><br>

แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<br>
<br>

แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id="imgspecial_box">
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
</div>

</body>
</html>

Output

   

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

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

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

Example

<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>

Output



การเขียนคำสั่ง Style Sheet การกำหนดลักษณะ ตัวอักษรด้วย CSS
บทความที่เกี่ยวข้อง

ดูบทความ CSS ทั้งหมด »