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

Cho thêm vào selector các pseudo-element trong CSS để chọn, chèn thêm và thiết lập trình bày cho thành phần cấu tạo nên phần tử như ::after ::before ::first-line ::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)

Đây là văn bản để kiểm tra
khi người dùng chọn
sẽ đổi màu chữ vàng, nền xanh

::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::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>

Bên trong phần tử

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ả:

Đây là văn bản để kiểm tra
định dạng lại ký tự đầu tiên của phần tử

::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ả:

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới