9. 1.
Descendant
Selector
li
em
{
color:
green;
}
แบบนี้จะเลือกทุก ๆ em ที่อยู่ภายใต้ li โดยเลือกทั้งหมดไม่ว่า
em จะซ้อนด้วยแท็กอื่นอีกที ขอแค่ให้มี li ครอบอยู่ก่อนหน้านั้น
<ul>
<li>Item
One</li>
<li>Item
<em>two</em></li>
</ul>
<p>An
<em>italicized</em>
words.</p>
?
10. 2.
Parent-‐Child
Selector
body
>
p
{
font-‐weight:
bold;
}
แบบนี้จะเลือกเฉพาะ p ที่เป็น
element ลูกโดยตรงของ
body ไม่นับพวกที่โดนซ้อนอยู่
อีกโดย tag อื่น
<body>
<div
class="sidebar">
<p
id="para1">This
is
the
sidebar.</p>
</div>
<p
id="para2">Welcome
to
the
web
site!
Here's
a
list</p>
<ul>
<li>
<p
id="para3">This
is
the
first
paragraph
in
the
list.
It's
also
the
last.</p>
</li>
</ul>
</body>
11. 3.
Adjacent
Selector
h1+h2
{
margin-‐top:
11px; }
จากตัวอย่างเป็นการบอกให้ h2 ตัวแรกที่อยู่ติดกับ h1 มีช่องว่าง
ด้านบน 11 px
<h1>This
is
important
stuff!</h1>
<h2>First
important
item</h2>
<h2>Second
important
item</h2>
จากตัวอย่าง แท็ก h2 บรรทัดที่ 2 จะห่างจาก h1 ขนาด 11 px
แต่จะไม่มีผลกับ h2 ในบรรทัดที่สาม
15. Selector
ที่เป็น
ID
aZribute
เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ใหกับ HTML element ผาน ID
attribute เหมือนกับ Class แตตางกันที่ ID จะใชกับ element ที่มีเพียง
อันเดียวในเอกสาร HTML การประกาศใช # นำหนา ID
#chapter
{color:red;
font-‐weight:bold}
<p id="chapter">Chapter ขอความในนี้จัดวางกึ่งกลาง
และเปนสีแดง ตัวหนา</p>