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-class trong CSS

Trong bài viết này chúng ta sẽ cùng tìm hiểu về Pseudo-classes trong CSS. 

Vậy Pseudo-classes là gì? Mình sẽ cùng tìm hiểu trong mục sau.

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-classes là gì

Pseudo-classes dùng để xác định trạng thái đặc biệt của một phần tử.

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

Thiết lập thuộc tính style cho phần tử khi người dùng di chuyển (hover) qua nó

Cú pháp
selector:pseudo-class {
   thuộc tính: giá trị;
}
Ví dụ pseudo-class RUN
div:hover {
   background-color: red;
   color: yellow;
}
div {
   border: 1px solid black;
}

2. Một số pseudo-class

Trong CSS có hỗ trợ một số pseudo-class sau:

  • :active
  • :checked
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid 
  • :lang(language) 
  • :last-child
  • :last-of-type
  • :link 
  • :not(selector) 
  • :nth-child(n) 
  • :nth-last-child(n) 
  • :nth-last-of-type(n) 
  • :nth-of-type(n)
  • :only-of-type
  • :only-child
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited

Mình sẽ lấy ví dụ cho các pseudo-class trên cho các bạn dễ hiểu. 

3. Ví dụ về pseudo-class

Có rất nhiều pseudo-class trong mục 2, ở mục 3 mình chỉ lấy ví dụ cho một số pseudo-class thôi nhé :)

:link, :visited, :hover, :active.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) cho phần tử liên kết (a) khi gặp các pseudo-class như :link, :visited, :hover, :active.

Trong đó:

  • :link: khi liên kết chưa được truy cập lần nào.
  • :visited: khi liên kết đã được truy cập. (:link, :visited dành cho liên kết, không áp dụng cho các phần tử khác như div, span ...)
  • :hover: khi di chuyển chuột lên phần tử.
  • :active: khi phần tử được chọn (tức là click chuột vào phần tử).
Ví dụ RUN
a:link {
   color: red;
}
a:visited {
   color: green;
}
a:hover {
   color: yellow;
}
a:active {
   color: blue;
}

Lưu ý: a:hover áp dụng sau a:link and a:visiteda:active áp dụng sau a:hover. Tên Pseudo-class không phân biệt chữ hoa thường.

tooltip :hover.

Ở ví dụ này, mình sẽ thiết lập khi rê chuột (hover) lên phần tử div, sẽ hiển thị phần tử p có màu nền (background-color) là màu vàng và padding là 20px.

Ví dụ RUN
p {
   display: none;
   background-color: yellow;
   padding: 20px;
}
div:hover p {
   display: block;
}

:first-child.

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

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

:checked.

Ở ví dụ này, mình sẽ thiết lập độ rộng (width) là 30px và chiều cao (height) là 30px cho tất cả phần tử input được checked.

Demo RUN
input:checked {
   height: 30px;
   width: 30px;
}

:disabled, :enabled

Ở ví dụ này, mình sẽ thiết lập màu nền (background) cho tất cả phần tử input bị disable là màu xám, và tất cả phần tử input được enable sẽ được thiết lập màu nền (background) là đỏ, màu chữ (color) là vàng.

Demo RUN
input:enabled {
   background: red;
   color: yellow;
}
input:disabled {
   background: gray;
}

:empty

Ở ví dụ này, mình sẽ lập màu nền (background) là màu vàng cho phần tử p có nội dung rỗng (empty).

Demo RUN
p:empty {
   width: 500px;
   height: 20px;
   background: yellow;
}

:last-child

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color) là màu đỏ, màu chữ (color) là màu vàng cho phần tử p cuối cùng.

Demo RUN
p:last-child {
   background-color: red;
   color: yellow;
}

:required

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color) là màu đỏ cho phần tử input bắt buộc (required) nhập giá trị.

Demo RUN
input:required {
   background-color: red;
}

:optional

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color) là màu đỏ cho phần tử input không bắt buộc (optional) nhập giá trị .

Demo RUN
input:optional {
   background-color: red;
}

:read-only

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color)  là màu đỏ cho phần tử input chỉ được phép đọc (read-only) giá trị.

Demo RUN
input:read-only {
   background-color: red;
}

:root

Ở ví dụ này, mình sẽ thiết lập màu nền (background) cho phần tử root là màu đỏ.  Trong HTML, phần tử root là phần tử html.

Demo RUN
:root {
   background: red;
}

:valid

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color) là màu xanh cho phần tử input có giá trị hợp lệ (valid).

Demo RUN
input:valid {
   background-color: green;
}

:target

Ở ví dụ này, mình sẽ thiết lập màu nền (background-color) là màu đỏ và thiết lập border cho phần tử target.

Demo RUN
:target {
   border: 2px solid black;
   background-color: yellow;
}

:out-of-range

Ở ví dụ này, mình sẽ thiết lập border là màu đỏ cho phần tử input khi có giá trị vượt ra ngoài phạm vi 5 và 10.

Demo RUN
input:out-of-range {
   border: 2px solid red;
}

4. Lời kết

Như vậy là mình đã trình bày xong pseudo-class trong CSS là gì. Và các bạn cũng đã biết cách sử dụng các pseudo-class như :link, :hover, :target, :read-only ... như thế nào rồi. Chúc các bạn hiểu và vận dụng tốt.

Cuối cùng 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.

Tham khảo: w3school.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