Làm việc với CSS Pseudo Classes

Chúng ta có thể thêm các style cụ thể cho các phần tử HTML hiện có bằng cách sử dụng CSS Pseudo-classes, chọn một phần tử ở một trạng thái đặc biệt như (hover, visited, disabled, v.v.)

LƯU Ý: Để phân biệt CSS Pseudo Classes với Pseudo Elements, trong CSS3, pseudo classes sử dụng ký hiệu dấu hai chấm đơn (:).

Cú pháp

Selector:pseudo-class {
  css-property: /*value*/;
}

Danh sách đầy đủ các CSS Pseudo Classes

Ví dụ 1: Sử dụng :target, :last-child, :hover, :active, :visited

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
  div {
    color: #000;
    padding: 20px;
    background-image: linear-gradient(135deg, grey 0%, white 100%);
    text-align: center;
  }
  .anchor { color: #FF8A00; }
  .anchor:last-child { color: #03A9F4; }
  .anchor:visited { color: #FEDC11; }
  .anchor:hover { color: #C303C3; }
  .anchor:active { color: #4CAF50; }
</style>
<body>
  <div>
    <h1>Search Engines</h1>
    <a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
    <a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
  </div>
</body>
</html>

Kết quả

Ví dụ 2: Sử dụng :nth-of-type và :hover

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  .child {
    display: inline-block;
    height: 40px; width: 40px;
    color: white; border: 4px solid black;
  }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
  .child:hover { background-color: #000; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Pseudo-Classes</legend>
      <div id="container">
        <div class="child"></div><div class="child"></div><div class="child"></div>
        <div class="child"></div><div class="child"></div><div class="child"></div>
      </div><br>
    </fieldset>
  </form>
</body>
</html>

Kết quả

Khi KHÔNG di chuột qua các div:

Khi di chuột qua các div: