ìm hiểu về pseudo-class trong CSS - Học CSS căn bản & nâng cao

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.

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ó

selector:pseudo-class {
   thuộc tính: giá trị;
}

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ử).

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:visited, a: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.

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.

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.

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.

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).

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.

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ị.

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ị .

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ị.

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.

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

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.

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

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