Cách xác định bộ chọn của "một thành phần" của phần tử (Pseudo-element) - 20

Cách xác định bộ chọn của “một thành phần” của phần tử (Pseudo-element) – 20

– Đã 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.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        #test01 > h1:first-letter{
            color:red;
        }
    </style>
</head>
<body>
    <div id="test01">
        <p>Lập Trình Web 01</p>
        <div>Lập Trình Web 02</div>
        <h1>Lập Trình Web 03</h1>
        <span>Lập Trình Web 04</span>
        <h1>Lập Trình Web 05</h1>
    </div>
    <hr>
    <div id="test02">
        <p>Lập Trình Web 01</p>
        <div>Lập Trình Web 02</div>
        <h1>Lập Trình Web 03</h1>
        <span>Lập Trình Web 04</span>
        <h1>Lập Trình Web 05</h1>
    </div>
</body>
</html>

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>

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        div::first-line{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>- Có thể bạn không phải là dân chuyên ngành Công nghệ thông tin, hoặc chưa biết gì về "lập trình web" nhưng lại rất muốn học để tự tay mình xây dụng một website. Tuy nhiên, bạn lo lắng rằng không biết liệu mình có thể học được hay không, tốn bao nhiêu thời gian, và phải bắt đầu từ đâu !? Chúng tôi xin khẳng định rằng: "Bạn hoàn toàn có thể học và làm được website nếu mỗi ngày dành ra một ít thời gian để tìm hiểu về lập trình web. Tùy vào mức độ chăm chỉ của mỗi người, tuy nhiên nếu trung bình mỗi ngày bỏ ra 2 giờ đồng hồ thì không quá 06 tháng, bạn sẽ có đủ kiến thức để bắt tay vào việc xây dựng một website"</p>
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        h1::selection{
            background-color:yellow;
            color:red;
        }
    </style>
</head>
<body>
    <p>- Có thể bạn không phải là dân chuyên ngành Công nghệ thông tin, hoặc chưa biết gì về "lập trình web" nhưng lại rất muốn học để tự tay mình xây dụng một website. Tuy nhiên, bạn lo lắng rằng không biết liệu mình có thể học được hay không, tốn bao nhiêu thời gian, và phải bắt đầu từ đâu !?</p>
    <h1>- Có thể bạn không phải là dân chuyên ngành Công nghệ thông tin, hoặc chưa biết gì về "lập trình web" nhưng lại rất muốn học để tự tay mình xây dụng một website. Tuy nhiên, bạn lo lắng rằng không biết liệu mình có thể học được hay không, tốn bao nhiêu thời gian, và phải bắt đầu từ đâu !?</h1>
    <h2>- Có thể bạn không phải là dân chuyên ngành Công nghệ thông tin, hoặc chưa biết gì về "lập trình web" nhưng lại rất muốn học để tự tay mình xây dụng một website. Tuy nhiên, bạn lo lắng rằng không biết liệu mình có thể học được hay không, tốn bao nhiêu thời gian, và phải bắt đầu từ đâu !?</h2>
</body>
</html>

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>

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        p{
            border:1px solid black;
        }
        p::before{
            content:"Hello - ";
            color:red;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p>Tài liệu học Lập Trình Web</p>
</body>
</html>

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>

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        p{
            border:1px solid black;
        }
        p::after{
            content:"- End";
            color:red;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p>Tài liệu học Lập Trình Web</p>
</body>
</html>