ตัวเลือกพี่น้องทั่วไป CSS ใช้เพื่อเลือกองค์ประกอบทั้งหมดที่ตามหลังองค์ประกอบแรก โดยที่ทั้งคู่เป็นลูกของพาเรนต์เดียวกัน
ไวยากรณ์
ไวยากรณ์สำหรับตัวเลือก CSS พี่น้องทั่วไปมีดังนี้
element ~ element {
/*declarations*/
} ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวเลือกพี่น้องทั่วไปของ CSS -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding-left: 14px;
list-style: none;
}
p ~ ul {
box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding: 10px;
list-style: none;
}
img ~ p {
background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
