CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Tìm hiểu về Pseudo-Elements trong CSS

Ở bài trước mình đã tìm hiểu về Pseudo-classes là gì, và mình cũng đã lấy ví dụ cho một số pseudo-class.

Trong bài học này mình tìm hiểu về Pseudo-Elements là gì? CSS hỗ trợ những pseudo-element nào. Mình cùng tìm hiểu trong bài học này nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

 1. Pseudo-Element là gì

 Pseudo-Element được sử dụng để định kiểu các phần được chỉ định của một phần tử.

Ví dụ, nó có thể được sử dụng để:

Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử. 

Chèn nội dung trước hoặc sau nội dung của một phần tử.

Cú pháp
selector::pseudo-element {
property:value;
}

Lưu ý ký hiệu hai dấu hai chấm - ::first-line so với :first-line

Dấu hai chấm kép đã thay thế ký hiệu dấu hai chấm đơn cho các pseudo-element trong CSS3. Đây là một nỗ lực từ W3C để phân biệt giữa pseudo-classes và pseudo-element.

Cú pháp dấu hai chấm đơn được sử dụng cho cả hai pseudo-classes và pseudo-element trong CSS2 và CSS1.

Để tương thích ngược, cú pháp dấu hai chấm đơn được chấp nhận cho các pseudo-element trong CSS2 và CSS1.

2. Một số pseudo-element

Trong CSS có tất cả các pseudo-element sau ::first-line, ::first-letter, ::before, ::after, ::selection

::first-line

 ::first-line được sử dụng để thêm style CSS cho dòng đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho dòng đầu tiên của phần tử p

Ví dụ RUN
p::first-line {color: red;};
span::first-line {color: red;}

Và kết quả của ví dụ trên:

css pseudo element first line PNG

Từ kết quả trên ta có một số điểm lưu ý sau:

::first-line chỉ áp dụng cho phần tử block như div, p, h1-h6 ...

Các thuộc tính sau được áp dụng cho ::first-line:

  • các thuộc tính font
  • các thuộc tính color
  • các thuộc tính background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter

::first-letter được sử dụng để thêm style CSS cho ký tự đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho ký tự đầu tiên của phần tử p

Ví dụ RUN
p::first-letter {color: red; }
span::first-letter {color: red;}

Và kết quả của ví dụ trên:

css pseudo element first letter PNG

Từ kết quả trên ta có một số điểm lưu ý sau:

::first-letter chỉ áp dụng cho phần tử block như div, p, h1-h6 ...

Các thuộc tính sau được áp dụng cho ::first-letter:

  • Các thuộc tính font
  • Các thuộc tính color 
  • Các thuộc tính background 
  • Các thuộc tính margin 
  • Các thuộc tính padding 
  • Các thuộc tính border 
  • text-decoration
  • vertical-align (chỉ khi "float" là "none")
  • text-transform
  • line-height
  • float
  • clear

::before

::before được sử dụng để chèn một số nội dung trước nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười ở phía trước nội dung của phần tử h1

Ví dụ RUN
h1::before {
   content: url(https://freetuts.net/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và kết quả của ví dụ trên:

css pseudo element before PNG

::after

::after dùng để chèn một số nội dung sau nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười sau nội dung của phần tử h1.

Ví dụ RUN
h1::after {
   content: url(https://freetuts.net/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và kết quả của ví dụ trên:

css pseudo element after PNG

::selection

::selection dùng để thiết lập style CSS cho nội dung phần tử được chọn bởi người dùng (bằng thao tác như double-click vào nội dung hay giữ chuột trái để chọn nội dung).

Ở ví dụ này, mình sẽ thiết lập màu nền (background) là màu vàng và màu chữ (color) là màu đỏ nội dung được chọn của phần tử p, div, span.

Ví dụ RUN
::-moz-selection {
   color: red;
   background: yellow;
}
::selection {
   color: red;
   background: yellow;
}

Lưu ý:

::selection không được hỗ trợ cho trình duyệt Internet Explorer 8 và phiên bản trước đó.

Firefox hỗ trợ pseudo-element thay thế đó là ::-moz-selection

Một số thuộc tính CSS sau có thể áp dụng cho ::selection như colorbackgroundcursor, và outline.

3. Lời kết

Như vậy là mình đã trình bày xong pseudo-element trong CSS là gì và cũng đã lấy vị dụ cho các pseudo-element như ::before, ::after, ::selection, ::first-line, ::first-letter.

Trong quá trình viết không tránh khỏi sai sót, nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để bài viết của mình ngày một tốt hơn.

Cám ơn các bạn đã đọc. Chúc các bạn vận dụng tốt.

Tham khảo: w3shool.com

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top