Chọn phần tử con với CSS

Giới thiệu

Bộ kết hợp con (child combinator) trong CSS được 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ú pháp

Cú pháp của bộ kết hợp con trong CSS:

Selector > Selector { 
  attribute: /*giá trị*/ 
}

Bộ kết hợp cháu (descendant combinator) được dùng để chọn tất cả các phần tử con cháu (bất kỳ cấp độ nào) của một phần tử cha.

Cú pháp:

Selector Selector { 
  attribute: /*giá trị*/ 
}

Ví dụ 1: Child combinator (>)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
article > * { 
  text-align: center; 
  border: 10px groove tomato; 
} 
::first-line { 
  box-shadow: inset 0 0 7px cornflowerblue; 
} 
</style> 
</head> 
<body> 
<article> 
<h2>Donec rutrum a erat vitae interdum. </h2> 
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p> 
<img src="https://images.unsplash.com/photo-1612840666989-a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" /> 
</article> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: Descendant combinator (khoảng trắng)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body > * { 
  margin: 20px; 
} 
article p { 
  font-size: 24px; 
  box-shadow: -10px 1px 0 rgba(12,43,180, 0.6); 
} 
</style> 
</head> 
<body> 
<article> 
<p>Neque porro quisquam </p> 
<p>est qui dolorem ipsum quia dolor sit amet,</p> 
<div><p>consectetur, adipisci velit.....</p></div> 
</article> 
<div> 
<p> consectetur, adipisci velit</p> 
<article> 
<p> consectetur, adipisci velit</p> 
</article> 
</div> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: