Quan hệ bộ chọn và trạng thái phần tử

Cùng là p nhưng nằm ở đâu?

Ta có thể chỉ muốn tô màu các đoạn trong một khu vực hoặc đổi màu liên kết khi người đọc đưa chuột vào. Bộ chọn giúp nêu điều kiện vị trí và trạng thái ấy.

Đọc khoảng trắng và dấu kết hợp

`article p` chọn p là hậu duệ của article, kể cả qua nhiều cấp. `article > p` chỉ chọn p là con trực tiếp. `h2 + p` chọn p liền sau h2 và cùng cha; dấu phẩy liệt kê nhiều bộ chọn độc lập. Lớp giả như :hover, :focus mô tả trạng thái; :first-child dựa vào vị trí trong các phần tử con. Phần tử giả như ::first-letter chọn một phần của nội dung. Không phải tên class do người viết đặt trong thuộc tính class. Khi dùng :hover để báo tương tác, vẫn cần xét người dùng bàn phím hoặc màn hình cảm ứng; :focus giúp biểu thị phần tử đang nhận tiêu điểm.

Con trực tiếp và hậu duệ

```html <article> <p>Đoạn A</p> <section><p>Đoạn B</p></section> </article> ``` article p khớp cả A và B. article > p chỉ khớp A vì B có cha trực tiếp là section, dù vẫn nằm trong article.

Thử vận dụng

Bộ chọn nào áp dụng khi liên kết a đang được đưa con trỏ chuột lên?

Aa.hoverBa:hoverCa::hoverDhover a

Chữ đầu đoạn

```css p::first-letter { font-size: 2em; } a:focus { outline: 2px solid blue; } ``` Quy tắc đầu định dạng phần chữ đầu của p. Quy tắc sau giúp nhận ra liên kết đang nhận tiêu điểm. Cả hai không đòi thêm class mang tên first-letter hoặc focus trong HTML.

Ví dụ xem cách làm

Trong ví dụ A/B, thay article > p bằng article, p có còn cùng nghĩa không?

Ví dụ xem cách làm

p:first-child có chọn p đầu tiên ở bất cứ vị trí nào trong cha không?

Những điều cần nhớ

Dấu chấm, khoảng trắng, >, dấu phẩy và dấu hai chấm có nghĩa khác nhau. Đọc đúng tập phần tử được chọn trước khi xét quy tắc định dạng.