Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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.
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 để:
Bài viết này được đăng tại [free tuts .net]
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
