close

Chọn Phần Tử Nâng Cao Trong CSS - Các Kỹ Thuật và Ví dụ

Pseudo-classes (Lớp giả)

Pseudo-classes cho phép bạn chọn các trạng thái hoặc vị trí cụ thể của một phần tử. Ví dụ: :hover chọn phần tử khi con trỏ chuột di chuyển qua phần tử, :focus chọn phần tử khi nó được chọn hoặc đang có trạng thái focus, :nth-child() chọn phần tử con cụ thể trong một nhóm.

Ví dụ:

/* Chọn tất cả các liên kết khi con trỏ chuột di chuyển qua chúng */
a:hover {
  color: red;
}

/* Chọn phần tử <input> khi nó đang có trạng thái focus */
input:focus {
  border: 2px solid blue;
}

/* Chọn phần tử thứ 2 trong một nhóm phần tử <li> */
li:nth-child(2) {
  color: green;
}

 

Pseudo-elements (Phần tử giả)

Pseudo-elements cho phép bạn tạo ra các phần tử ảo để tùy chỉnh phần tử hiện có. Ví dụ: ::before và ::after tạo ra phần tử trước và sau một phần tử, ::first-line và ::first-letter chọn phần tử đầu tiên của dòng và chữ đầu tiên trong phần tử.

Ví dụ:

/* Thêm một nội dung trước mỗi phần tử <p> và tạo kiểu cho nó */
p::before {
  content: ">> ";
  font-weight: bold;
  color: gray;
}

/* Tạo kiểu cho chữ đầu tiên trong phần tử <h1> */
h1::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}

 

Combinators (Kết hợp phần tử)

Combinators cho phép bạn kết hợp các bộ chọn để chọn các phần tử dựa trên mối quan hệ giữa chúng. Ví dụ: element1 element2 chọn các phần tử element2 nằm trong element1, element1 > element2 chọn các phần tử element2 là con trực tiếp của element1, element1 + element2 chọn phần tử element2 ngay sau element1.

Ví dụ:

/* Chọn các phần tử <span> nằm trong phần tử có lớp là "container" */
.container span {
  color: purple;
}

/* Chọn các phần tử <li> là con trực tiếp của phần tử <ul> */
ul > li {
  list-style-type: square;
  color: blue;
}

 

Attribute selectors (Bộ chọn thuộc tính)

Bộ chọn thuộc tính cho phép bạn chọn các phần tử dựa trên giá trị của thuộc tính của chúng. Ví dụ: [attribute] chọn các phần tử có thuộc tính attribute, [attribute=value] chọn các phần tử có giá trị của thuộc tính attribute bằng value, [attribute^=value] chọn các phần tử có giá trị của thuộc tính attribute bắt đầu bằng value.

Ví dụ:

/* Chọn tất cả các phần tử có thuộc tính data-type */
[data-type] {
  font-weight: bold;
  color: orange;
}

/* Chọn tất cả các phần tử <a> có thuộc tính href bắt đầu bằng "https://" */
a[href^="https://"] {
  color: blue;
  text-decoration: underline;
}

 

:not() selector (:not() bộ chọn)

Bộ chọn :not() cho phép bạn chọn các phần tử không phù hợp với một bộ chọn cụ thể. Ví dụ: :not(.class) chọn các phần tử không có lớp class, :not(#id) chọn các phần tử không có Id id.

Ví dụ:

/* Chọn tất cả các phần tử <div> không có lớp hidden */
div:not(.hidden) {
  display: block;
  background-color: lightgray;
}

/* Chọn tất cả các phần tử <input> không có Id email-input */
input:not(#email-input) {
  border: 1px solid gray;
}

 

Các ví dụ trên cho thấy cách chọn phần tử nâng cao trong CSS và cung cấp ví dụ cụ thể về cách áp dụng chúng. Bạn có thể tùy chỉnh và sử dụng chúng để tạo kiểu và tùy chỉnh các phần tử trên trang web của bạn theo mong muốn.