Sử dụng Pseudo Class trong CSS

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng Pseudo Class là như thế nào?

1. Pseudo Class là gì

Chúng ta sử dụng pseduo class để thêm hiệu ứng cho một số thành phần trong web, ví dụ khi người dùng sử dụng con chuột di chuyển qua các phần tử web mình có thể xây dựng các hiệu ứng cho hành động này hoặc khi người dùng rê chuột vào một đường link mình có thể thêm hiệu ứng thay đổi màu sắc. Mình không cần dùng javascript để làm hiệu ứng mà cái này có sẳn trong css

  • Cú pháp như sau
1
selector:pseudo-class {property: value}
  • Hoặc ta cũng có thể kết hợp với css class
1
selector.class:pseudo-class {property: value}

2. Hiệu ứng :link pseudo-class

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

pseudo1

  • Link Backlink sẽ có màu đen

2. Hiệu ứng :visited pseudo-class

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

pseudo2

  • Khi click vào link sẽ có hiệu ứng biến màu của link thành màu xanh lục.

3. Hiệu ứng :hover pseudo-class

Khi di chuyển chuột ngang qua đường link thì sẽ đổi màu

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html> 

4. Hiệu ứng :active pseudo-class

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

5. Hiệu ứng :focus pseudo-class

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html> 

6. Hiệu ứng phần tử con đầu tiên

Trong ví dụ này ta có thẻ div, bên trong nó có 2 thẻ P . Nhưng bây giờ chúng ta chỉ muốn lấy thẻ p đầu tiên. Ta sử dụng first-child

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

pseudo3

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments