Bộ chọn anh em liền kề

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 4 trên 43.

Bộ chọn phần tử anh em liền kề (+) dùng để định kiểu cho một phần tử nằm ngay sau một phần tử cụ thể. Cả hai phải có cùng phần tử cha, và “liền kề” nghĩa là “nằm ngay cạnh nhau”.

Ví dụ:

<h2>Heading</h2>
<p>This paragraph is styled</p>

Với CSS này:

h2 + p {
  font-weight: bold;
}

Đoạn văn này có kiểu định dạng vì nó nằm ngay sau một phần tử h2.

Thử thách

Dễ

Tạo bộ chọn CSS chỉ nhắm đến các đoạn văn (<p>) nằm ngay sau phần tử <h2> mô tả một trận bóng rổ. Đặt màu chữ của các đoạn văn này là xanh dương và cỡ chữ là 18px.

Tự làm thử

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>