:target trong css3

Nói một cách đơn giản thì :target được dùng để thay đổi css khi người dùng bấm vào link có thẻ hash(dấu #). Nói chung là cũng hơi khó giải thích, bạn hãy xem ví dụ dưới đây thì sẽ dễ hiểu hơn

1. Làm nổi bật phần tử khi click

Kết quả của ví dụ này là khi bạn bấm vào thẻ <a> thì thẻ <h1> sẽ có background màu vàng và chữ màu đỏ

target css

Bạn có thể xem demo tại đây . Chúng ta cũng có thể chỉ định cụ thể :target cho từng thẻ hash khác nhau, ví dụ

bấm vào đây để xem demo

2. Sử dụng để làm tab

Nhiều bạn nghĩ rằng muốn tạo ra 1 tab panel thì phải sử dụng thư viện bên ngoài hoặc dùng javascript. Nhưng điều đó giờ đây không cần thiết, ta có thể thực hiện điều này chỉ bằng css

Xem kết quả tại đây

3. Tạo Yellow Fade Technique

Nếu bạn chưa biết Yellow fade technique là gì thì có thể xem tại đây

Xem kết quả tại đây

4. Tạo Modal dialog

Xem kết quả tại đây

Tham khảo: w3school.com, css-trick.com

Chuyên mục: CSS Tags: