Bộ chọn anh chị em chung CSS được sử dụng để chọn tất cả các phần tử theo sau phần tử đầu tiên sao cho cả hai đều là con của cùng một cha mẹ.
Cú pháp
Cú pháp cho bộ chọn chung CSS như sau
element ~ element {
/*declarations*/
} Các ví dụ sau minh họa bộ chọn chung CSS -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
