CSS Pseudo Classes


Pseudo classes trong CSS dùng để định nghĩa trạng thái đặc biệt của 1 thẻ. Ví dụ như trạng thái của thẻ a, khi chưa click vào a, khi click vào a, hoặc là khi hover con trỏ vào a thì thế nào. Ta xem ví dụ sau nhé.

/* CSS */
<style>
 /* a ở trạng thái ban đầu */
  a:link {
   color:red;
  }
 /* a khi ta đã click vào */
  a:visited {
   color: green;
  }

 /* a khi con trỏ chuột hover lên */
  a:hover {
   color: pink;
   background-color:gray;
  }

 /* a khi ta click vào */
  a:active {
   font-weight: bold;
   font-size: 40px;
  }


</style>

<!-- HTML -->
<a href="#">click me</a>

click me

Ta thấy là ban đầu a có màu red. khi ta hover lên thì chuyển sang màu pink và background chuyển màu gray, khi ta click vào a thì link a tăng font size lên 40px và font-weight là bold. Sau khi ta click xong thì a có màu green.

Ta có thể thêm trạng thái hover cho một div, cách làm cũng giống như trên.

/* CSS */
<style>

  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }  
  div:hover {
    background-color: red;
  }
</style>

<!-- HTML -->
<div></div>

Hoặc ta cũng có thể thêm hover cho một class.

/* CSS */
<style>

  div.myDiv2 {
    width: 100px;
    height: 100px;
   background-color: blue;
  }  
  div.myDiv2:hover {
    background-color: green;
  }
</style>

<!-- HTML -->
<div class="myDiv2"></div>

Ví dụ ta có 1 checkbox. Ta muốn thêm css vào checkbox khi checkbox được click (checked).

<style>
  input:checked + label {
    color:red;
    text-decoration: line-through;
  }
</style>


<input type="checkbox" checked="checked" name="todo"> 
<label for="todo">Buy milk</label>

Ta xem 1 ví dụ khác, nếu ta có 1 input là text. Ta muốn khi focus vào input thì sẽ đổi background của input đó sang màu vàng.

<style>

input:focus {
  background:yellow;
}

</style>


<input type="text" name="user" placeholder="username" size="30px"> 

Ngoài ra input còn có thuộc tính disabled. Thẻ input dạng button có thuộc tính disabled thì lúc này ta không click được. Ta có thể thêm css vào button dựa vào thuộc tính disabled.

<style>
  input:disabled {
   color:red;
   background-color:yellow;
  }

</style>

<input type="button" value="Submit" disabled >

Ngoài ra ta còn các css pseudo classes khác như p:first-child ( thẻ p đầu tiên), p:last-child (thẻ p cuối cùng) và còn rất nhiều css pseudo classes khác.