Xác định bộ chọn của "một thành phần" của phần tử

- Đã có bao giờ các bạn muốn định dạng cho "một thành phần nào đó" của phần tử, ví dụ như dòng chữ đầu tiên, ký tự đầu tiên, dòng chữ đang bị bôi đen, . . . . nhưng lại không biết cách xác định bộ chọn của chúng !? Nếu có thì ở trong bài học này, tôi sẽ hướng dẫn các bạn cách giải quyết vấn đề đó bằng việc xác định bộ chọn của phần tử kết hợp với các pseudo-element.

1) Pseudo-element là gì !?

- Pseudo-element dịch sang tiếng Việt có thể tạm gọi là phần tử giả, mỗi pseudo-element sẽ được xác định bởi một từ khóa bằng tiếng Anh, nó dùng để đại diện cho "một thành phần nào đó" của phần tử.

- Hiện nay CSS hỗ trợ năm loại pseudo-element:

::first-letter	- Ký tự đầu tiên.
::first-line	- Dòng chữ đầu tiên.
::selection	- Phần văn bản đang bị người dùng bôi đen.
::before	- Thành phần nằm ở ngay phía trước nội dung của phần tử.
::after	- Thành phần nằm ở ngay phía sau nội dung của phần tử.

2) Cách xác định bộ chọn của một thành phần nào đó của phần tử

- Để xác định bộ chọn của "một thành phần nào đó" của phần tử thì chúng ta phải ghép tên pseudo-class của thành phần đó nằm ở ngay sát phía sau phần tử.

Ví dụ 1:

- Thiết lập chữ màu đỏ cho ký tự đầu tiên của các phần tử <h1>

- Lưu ý: Các phần tử <h1> này phải là con của phần tử #test01.

#test01 > h1:first-letter{
    color:red;
}

Xem ví dụ

Ví dụ 2:

- Thiết lập nền màu vàng cho dòng chữ đầu tiên bên trong các phần tử <div>

div::first-line{
    background-color:yellow;
}

Xem ví dụ

Ví dụ 3:

- Thiết lập nền vàng & chữ đỏ cho phần văn bản bên trong phần tử <h1> đang bị người dùng bôi đen

h1::selection{
    background-color:yellow;
    color:red;
}

Xem ví dụ

Ví dụ 4:

- Thiết lập nội dung Hello - có nền vàng & chữ đỏ nằm ở ngay phía trước nội dung của phần tử <p>

p::before{
    content:"Hello - ";
    color:red;
    background-color:yellow;
}

Xem ví dụ

Ví dụ 5:

- Thiết lập nội dung - End có nền vàng & chữ đỏ nằm ở ngay phía sau nội dung của phần tử <p>

p::after{
    content:"- End";
    color:red;
    background-color:yellow;
}

Xem ví dụ