รูปแบบการกำหนด CSS property
โค้ด: เลือกทั้งหมด
:first-child {
// CSS property
}
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>first child selector</title>
<style>
h1 {
color:blue;
}
p:first-child {
background-color: navy;
color:white;
font-weight:bold;
}
body {
text-align:center;
}
</style>
</head>
<body>
<p>Mindphp</p>
<h1>Mindphp</h1>
<h2>:first-child Selctor</H2>
<p>Mindphp</p>
<div>
<p>php</p>
<p>ERP</p>
</div>
</body>
</html>
ตัวอย่างที่สอง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>first child selector</title>
<style>
h1 {
color:blue;
}
h1, h2 {
text-align:center;
}
li:first-child {
background: navy;
color:#aec4e8;
}
body {
width:70%;
}
</style>
</head>
<body>
<h1>Mindphp</h1>
<h2>:first-child Selector</h2>
<ul>
<li>Data Structure</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
<ol>
<li>Java</li>
<li>Ruby</li>
<li>Pascal</li>
</ol>
</body>
</html>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP