Lựa chọn theo pseudo-element trong CSS

• Pseudo Element
• ::selection
• ::first-line
• ::before và after
• ::first-letter
• ::placeholder

Pseudo Element trong CSS

Pseudo Element khá giống với Pseudo class cho thêm vào selector từ khoá để chọn ra thành phần của phần tử HTML, để thêm Pseudo Element dùng ký hiệu hai dấu hai chấm :: sau đó là tên (từ khoá). Một số từ khoá Pseudo Element là:

• ::first-line - chọn dòng text đầu tiên của phần tử
• ::first-letter - chọn ký tự đầu tiên trong phần tử
• ::selection - chọn thành phần đang được người dùng chọn (::highlight)
• ::before - chèn thêm nội dung vào trước phần tử
• ::after - chèn thêm nội dung vào sau phần tử
• ::placeholder - chọn placeholder của control

::selection trong CSS

::selection chọn các văn bản đang được người dùng highlight (lựa chọn).

Ví dụ:

<style>
    /* chọn thì đổi sang chữ vàng, nền xanh */
    .test::selection {
        color: yellow;
        background-color: blue;
    }
</style>

<div class="test">
    Đây là văn bản để kiểm tra<br>
    khi người dùng chọn<br>
    sẽ đổi màu chữ vàng, nền xanh
</div>

Kết quả: (bạn hãy chọn để kiểm tra)

::first-line trong CSS

Chon dòng text đầu tiên trong phần tử

<style>
    .exam1::first-line {
        color: red;
        font-weight: bold;
    }
</style>

<p class="exam1">Dòng chữ 1<br>Dòng chữ 2<br>Dòng chữ 3</p>

Dòng chữ 1
Dòng chữ 2
Dòng chữ 3

::before và ::after trong CSS

::before và ::after được dùng để lựa chọn, thêm vào phía trước và phía sau một phần tử. Thường sử dụng thuộc tính content để thêm nội dung.

<style>
    .exam2::before {
        display: inline-block;
        height: 30px;
        content: url("https://cdn4.iconfinder.com/data/icons/famous-character-vol-2-flat/48/Avatar_Famous_Characters-20-128.png");
    }
    .exam2::after {
        content: 'Thêm sau phần tử';
        background: green;
        color: whitesmoke;
        display: inline-block;
        padding: 3px;
    }

</style>

<div class="exam2">
    Bên trong phần tử
</div>

Chú ý phần content trong ::after và ::before

::first-letter trong CSS

Chọn ký tự đầu tiên trong phần tử.

Ví dụ:

<style>
    .intro::first-letter {
        font-size: 50px;
        color: red;
    }
</style>

<div class="intro">
    Đây là văn bản để kiểm tra<br>
    định dạng lại ký tự đầu tiên của phần tử<br>
</div>

Kết quả:

::placeholder trong CSS

Chọn placeholder của phần tử (các phần tử <input> <textarea>) khi dữ liệu nhập bị trống thì hiện thị placeholder.

Ví dụ:

<style>
    #username::placeholder {
        color: red;
    }
</style>

<input type="text" id="username" placeholder="Hãy nhập Username" />

Kết quả: