Child Selectors (Bộ chọn con) trong CSS

Bộ chọn con (child selector) trong CSS dùng để chọn tất cả các phần tử con trực tiếp của một phần tử cha cụ thể.

Cú pháp

element > element { /*declarations*/ }

Ví dụ 1: article > div, div > p

<!DOCTYPE html>
<html>
<head>
<style>
* { padding: 5px; }
article > div {
  border: dashed midnightblue;
  width: 45%;
}
div > p {
  font-size: 20px;
  font-style: italic;
  box-shadow: inset 0 0 8px orange;
}
</style>
</head>
<body>
<h2>Chi tiết kỳ thi</h2>
<article>
  <div>Thông tin kỳ thi</div>
  <div><p>Kỳ thi bắt đầu lúc 11AM.</p></div>
  <span><div> Không mang điện thoại.</div></span>
  <div>
    <div>Thí sinh phải đến trước 10:45.</div>
    <br/>
    Thí sinh cần mang thẻ dự thi.
  </div>
</article>
</body>
</html>

Kết quả

Ví dụ 2: div > div lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: auto;
  width: 200px;
  padding: 30px;
  background-color: moccasin;
}
div > div {
  box-shadow: inset 0 0 8px mediumseagreen;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
</style>
</head>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

Kết quả

Child selector vs Descendant selector:

Ví dụ: ul > li chọn li trực tiếp trong ul, không chọn li trong ol lồng trong ul.