Rate this post

Trong thế giới phát triển web, CSS (Cascading Style Sheets) đóng vai trò thiết yếu trong việc tạo ra giao diện người dùng cuốn hút và tương tác. Một trong những khía cạnh mạnh mẽ nhất của CSS chính là sự linh hoạt và mạnh mẽ của các selector. CSS selectors cho phép các nhà phát triển web chọn lọc và áp dụng các quy tắc thiết kế đến các phần tử HTML một cách chính xác. Trong bài viết này, chúng ta sẽ đi sâu vào việc tìm hiểu về CSS selectors nâng cao, một công cụ quan trọng giúp tối ưu hóa và làm phong phú thêm quá trình thiết kế web.

CSS selectors là các quy tắc mà qua đó, các nhà phát triển có thể “chọn” các phần tử HTML dựa trên ID, class, loại, thuộc tính, và nhiều tiêu chí khác. Trong khi các selector cơ bản như ID và class là công cụ mạnh mẽ, các selector nâng cao như attribute selectors, pseudo-classes và pseudo-elements mở rộng khả năng này, cho phép tạo ra các mô hình thiết kế tinh vi và đáp ứng chính xác hơn đối với nhu cầu ngày càng phức tạp trong thiết kế web.

Sử dụng CSS selectors nâng cao không chỉ giúp tạo ra các trang web đẹp mắt và chuyên nghiệp mà còn giúp cải thiện hiệu suất tải trang và tối ưu hóa trải nghiệm người dùng. Trong bối cảnh công nghệ ngày nay, khả năng kiểm soát chặt chẽ mỗi yếu tố trên trang web không chỉ là một lợi thế mà còn là yêu cầu cần thiết. Việc hiểu rõ và sử dụng thành thạo các CSS selectors nâng cao sẽ mở ra cánh cửa cho vô số khả năng trong việc tạo ra các trang web độc đáo và tương tác cao.

Trong các phần tiếp theo của bài viết, chúng ta sẽ khám phá chi tiết từng loại CSS selectors nâng cao, cách sử dụng chúng, và một số mẹo và thủ thuật để tối ưu hóa việc sử dụng chúng trong dự án phát triển web của bạn.

Đặc tính CSS selector

Trước khi đi sâu vào lĩnh vực của các selectors CSS nâng cao, điều quan trọng là phải hiểu cách thức hoạt động của tính cụ thể CSS, để chúng tôi biết cách sử dụng đúng các selectors của mình và tránh mất hàng giờ để gỡ lỗi cho một vấn đề CSS có thể dễ dàng khắc phục nếu chúng tôi chỉ phải trả tiền chú ý đến tính cụ thể.

Khi viết CSS, chúng ta phải lưu ý rằng một số selectors sẽ xếp hạng cao hơn những selectors khác trong flow, selectors mới nhất mà chúng tôi đã viết sẽ không phải lúc nào cũng ghi đè các selectors trước đó mà chúng tôi đã viết cho các phần tử giống nhau.

Vì vậy, làm thế nào để bạn tính toán cụ thể của một selectors cụ thể? Khá đơn giản nếu bạn tính đến tính cụ thể đó sẽ được biểu thị dưới dạng bốn số được phân tách bằng dấu phẩy, như: 1, 1, 1, 1 hoặc 0, 2, 0, 1

  • Chữ số đầu tiên (a) luôn bằng 0, trừ khi có một attributes style được áp dụng cho phần tử đó trong chính phần đánh dấu
  • Chữ số thứ hai (b) là tổng số ID trong selectors đó
  • Chữ số thứ ba © là tổng của các selectors attributes khác và các lớp giả trong selectors đó. Các lớp (.example) và selectors attributes (ví dụ: li [id = red]) được bao gồm ở đây.
  • Chữ số thứ tư (d) đếm các phần tử (như bảng, p, div, v.v.) và các phần tử giả (như: dòng đầu tiên)
  • selectors phổ quát (*) có độ đặc hiệu bằng 0
  • Nếu hai selectors có cùng tính cụ thể, selectors đứng cuối cùng trên biểu định kiểu sẽ được áp dụng

Hãy xem một vài ví dụ để dễ hiểu hơn:

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

Từ các selectors sau, selectors đầu tiên là selectors sẽ được áp dụng cho phần tử, vì nó có độ đặc hiệu cao hơn:

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

Điều quan trọng là bạn phải có ít nhất hiểu biết cơ bản về cách hoạt động của tính cụ thể, nhưng các công cụ như Firebug rất hữu ích để cho chúng tôi biết selectors nào đang được áp dụng cho một phần tử cụ thể bằng cách liệt kê tất cả các selectors CSS theo thứ tự tính cụ thể của chúng khi bạn đang kiểm tra một phần tử .

Firebug cho phép bạn dễ dàng xem selectors nào đang được áp dụng cho một phần tử.

Sử Dụng Hiệu Quả Các Attribute Selectors trong CSS

Attribute selectors trong CSS là một công cụ mạnh mẽ, cho phép bạn áp dụng các quy tắc CSS dựa trên các thuộc tính cụ thể của các phần tử HTML. Bạn có thể chọn nhắm mục tiêu vào các phần tử dựa trên sự hiện diện, giá trị, hoặc thậm chí là một phần của giá trị thuộc tính của chúng. Điều này mang lại sự linh hoạt lớn trong việc tùy chỉnh giao diện của các phần tử trên trang web.

Có sáu loại attribute selectors chính:

  • [att="value"]: Áp dụng cho các phần tử có giá trị thuộc tính chính xác.
  • [att~="value"]: Lựa chọn các phần tử có thuộc tính chứa giá trị cụ thể trong một danh sách các từ.
  • [att|="value"]: Chọn các phần tử có thuộc tính khớp chính xác với giá trị hoặc bắt đầu bằng giá trị đó theo sau là dấu gạch ngang.
  • [att^="value"]: Nhắm mục tiêu các phần tử có thuộc tính bắt đầu bằng giá trị cụ thể.
  • [att$="value"]: Chọn các phần tử có thuộc tính kết thúc bằng giá trị cụ thể.
  • [att*="value"]: Áp dụng cho các phần tử chứa giá trị cụ thể trong thuộc tính của chúng.

Ví dụ, để áp dụng màu nền cho các phần tử <div> nào đó chứa từ khóa nhất định trong class của họ, bạn có thể sử dụng:

div[class*="keyword"] {
  background-color: #f0f0f0;
}

Một ứng dụng khác của attribute selectors là tạo kiểu dáng khác biệt cho các loại input. Chẳng hạn, để phân biệt rõ ràng các trường nhập liệu kiểu văn bản so với các loại khác:

input[type="text"] {
  border: 2px solid #000;
}

Cuối cùng, bạn có thể sử dụng attribute selectors để tạo hiệu ứng đặc biệt cho các liên kết dẫn đến các loại tệp cụ thể. Ví dụ, để thêm icon đặc trưng cho các liên kết tải xuống hình ảnh, PDF, hoặc tài liệu:

a[href$=".png"] {
  background: url(icon-image.png) no-repeat left center;
  padding-left: 25px;
}

a[href$=".pdf"] {
  background: url(icon-pdf.png) no-repeat left center;
  padding-left: 25px;
}

a[href$=".docx"] {
  background: url(icon-doc.png) no-repeat left center;
  padding-left: 25px;
}

Trong ví dụ này, các selectors nhắm mục tiêu tới các liên kết với đuôi file .png, .pdf, và .docx. Các biểu tượng tương ứng được thêm vào bên trái của liên kết, cung cấp thông tin trực quan và nâng cao trải nghiệm người dùng.

Điều quan trọng cần lưu ý là hầu hết các trình duyệt hiện đại đều hỗ trợ attribute selectors, nhưng cần kiểm tra tính tương thích với các phiên bản cũ hơn để đảm bảo trải nghiệm người dùng không bị ảnh hưởng.

Sử Dụng Child Selectors trong CSS

Child selectors, biểu thị qua ký hiệu “>”, là một công cụ hiệu quả để nhắm mục tiêu các phần tử con trực tiếp của một phần tử cha cụ thể trong CSS. Điều này giúp tạo ra một cấu trúc CSS rõ ràng và chính xác hơn, ngăn chặn việc áp dụng kiểu không mong muốn lên các phần tử không liên quan.

Chẳng hạn, bạn muốn áp dụng kiểu cho tất cả các tiêu đề <h2> nằm ngay trong một <div> cụ thể, nhưng không muốn ảnh hưởng đến các <h2> khác không trực tiếp nằm trong <div> đó. Bạn có thể sử dụng child selector như sau:

div#sidebar > h2 {
  font-size: 18px;
}

Điều này đảm bảo rằng chỉ các <h2> là con trực tiếp của div#sidebar sẽ được thay đổi kích thước font, trong khi các <h2> khác trong tài liệu sẽ không bị ảnh hưởng.

Bạn cũng có thể kết hợp nhiều child selectors để nhắm mục tiêu cụ thể hơn. Ví dụ, bạn muốn chỉnh sửa các phần tử <blockquote> nằm trực tiếp trong một <div>, và <div> này cũng phải là con trực tiếp của phần tử <body>:

body > div > blockquote {
  margin-left: 20px;
}

Trong trường hợp này, chỉ các <blockquote> nằm trực tiếp trong <div><div> nằm trực tiếp trong <body> mới được áp dụng kiểu.

Lưu ý rằng, tương tự như attribute selectors, child selectors không được hỗ trợ bởi Internet Explorer 6. Điều này có thể đặt ra một số hạn chế khi muốn đảm bảo trang web của bạn hiển thị đúng trên tất cả các trình duyệt. Do đó, nếu việc sử dụng child selectors là quan trọng với thiết kế tổng thể của bạn, bạn có thể cần xem xét các giải pháp thay thế hoặc phương pháp tiếp cận khác để duy trì khả năng tương thích trên các trình duyệt cũ.

Sử Dụng Selectors Kết Hợp trong CSS

Trong CSS, có hai loại selectors kết hợp được sử dụng để xác định mối quan hệ giữa các phần tử: kết hợp anh chị em kế cận và kết hợp anh em chung. Chúng được biểu diễn qua dấu cộng “+”, cho phép chúng ta tạo mối liên kết giữa hai hoặc nhiều phần tử dựa trên cấu trúc của chúng trong DOM.

Một ví dụ về việc sử dụng kết hợp anh chị em kế cận là khi bạn muốn tùy chỉnh các tiêu đề <h2> xuất hiện ngay sau một đoạn văn <p>. Điều này hữu ích trong việc điều chỉnh khoảng cách giữa văn bản và các tiêu đề:

p + h2 {
  margin-top: 15px;
}

Bạn có thể làm cho quy tắc này cụ thể hơn bằng cách áp dụng nó chỉ trong một phần tử cha cụ thể, như trong một <div> mang class “content”:

div.content p + h2 {
  margin-top: 15px;
}

Thêm vào đó, bạn có thể tận dụng selectors kết hợp để tạo ra các hiệu ứng phức tạp hơn. Ví dụ, bạn muốn chuyển đổi đoạn văn đầu tiên sau mỗi tiêu đề <h1> trong bài viết thành chữ viết hoa nhỏ:

.article h1 + p::first-line {
  font-variant: small-caps;
}

Ở đây, selector này sẽ chọn dòng đầu tiên của đoạn văn <p> ngay sau mỗi tiêu đề <h1> trong các phần tử có class “article”, và áp dụng kiểu chữ viết hoa nhỏ lên nó.

Những kỹ thuật này mở ra khả năng tùy chỉnh phong cách của các trang web một cách chính xác và tinh tế, giúp tạo ra các bố cục và thiết kế hấp dẫn hơn.

Sử Dụng General Sibling Selectors trong CSS

General sibling selectors, được biểu thị qua ký hiệu “~”, cho phép bạn áp dụng các quy tắc CSS lên các phần tử không nhất thiết phải là anh chị em kế cận trực tiếp nhưng chia sẻ cùng một phần tử cha. Điều này mở rộng khả năng sử dụng CSS để tạo ra các quy tắc phong phú và linh hoạt hơn.

Ví dụ, bạn muốn áp dụng kiểu chữ đặc biệt cho tất cả các đoạn văn <p> xuất hiện sau một tiêu đề <h1> trong một section cụ thể, không chỉ là đoạn văn liền kề:

.section h1 ~ p {
  color: #555555;
}

Trong trường hợp này, tất cả các phần tử <p> chia sẻ cùng một phần tử cha với <h1> và nằm sau nó trong DOM sẽ có màu chữ được chỉ định.

Về hỗ trợ trình duyệt, cần lưu ý rằng Internet Explorer 6 không hỗ trợ general sibling selectors. Tuy nhiên, với sự phát triển của các trình duyệt hiện đại, việc này ít khi trở thành vấn đề. Trong trường hợp cần hỗ trợ IE6, có thể cần xem xét sử dụng các phương pháp thay thế hoặc kỹ thuật CSS khác để duy trì khả năng tương thích.

Sử dụng general sibling selectors không chỉ giúp tối ưu hóa mã HTML mà còn cho phép bạn tạo ra các bố cục và thiết kế phức tạp mà không cần thêm các class hoặc ID không cần thiết. Điều này làm cho mã của bạn trở nên sạch sẽ và dễ quản lý hơn.

Selectors Pseudo-Classes

Lớp Giả Động trong CSS

Lớp giả động trong CSS, hay còn gọi là dynamic pseudo-classes, đề cập đến các lớp giả không tồn tại trong cấu trúc HTML nhưng được kích hoạt qua các hành động của người dùng trên trang web. Chúng bao gồm các pseudo-classes đối với liên kết và tương tác người dùng.

Có hai nhóm chính của dynamic pseudo-classes: liên kết và tương tác người dùng. Pseudo-classes liên kết bao gồm :link:visited, trong khi các tương tác người dùng được biểu diễn bởi :hover, :active:focus.

Pseudo-classes :link áp dụng cho các liên kết chưa từng được truy cập, còn :visited áp dụng cho các liên kết đã truy cập, đảm bảo chúng không gây xung đột lẫn nhau.

Pseudo-classes :hover được kích hoạt khi người dùng di chuyển con trỏ qua một phần tử mà không nhất thiết phải tương tác trực tiếp. Trong khi đó, :active áp dụng khi có sự tương tác trực tiếp, như một cú nhấp chuột. :focus thường được sử dụng cho các phần tử nhập liệu trong form, khi chúng đang được người dùng tương tác.

Một ví dụ thực tế là việc áp dụng nhiều lớp giả động cho một phần tử, ví dụ như thay đổi màu nền của một trường nhập liệu tùy thuộc vào việc người dùng đang di chuột qua hoặc tập trung vào nó:

input:focus {
  background-color: #E0E0E0;
  border-color: #707070;
}

input:hover:focus {
  background-color: #D0D0D0;
}

Trong đoạn mã trên, input:focus thay đổi màu nền và viền khi trường nhập liệu được tập trung, trong khi input:hover:focus thay đổi màu nền khi người dùng di chuột qua trường đó trong khi nó đang được tập trung.

Về hỗ trợ trình duyệt, các dynamic pseudo-classes được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Tuy nhiên, cần lưu ý là Internet Explorer 6 chỉ hỗ trợ :hover cho các phần tử liên kết (<a>), và chỉ từ IE8 trở đi mới hỗ trợ trạng thái :active trên các phần tử khác ngoài liên kết.

Sử Dụng Pseudo-class ::first-child trong CSS

Pseudo-class ::first-child là một công cụ hữu ích trong CSS cho việc chỉ định kiểu dáng đối với phần tử con đầu tiên trong một nhóm phần tử. Điều này cho phép bạn tạo ra các quy tắc kiểu dáng cụ thể cho phần tử đầu tiên, mà không ảnh hưởng đến các phần tử khác.

Ví dụ, để thêm một lề trên cho mục đầu tiên trong một danh sách có thứ tự, bạn có thể sử dụng:

ol > li:first-child {
  margin-top: 15px;
}

Trong ví dụ này, mục đầu tiên trong danh sách sẽ có một lề trên, tạo ra khoảng cách với phần tử trên cùng.

Lấy một ví dụ khác, giả sử bạn muốn tất cả các tiêu đề <h3> trong một section cụ thể có một khoảng cách trên, ngoại trừ tiêu đề đầu tiên để giữ cho nó sát với tiêu đề chính:

.section > h3 {
  margin-top: 20px;
}

.section > h3:first-child {
  margin-top: 0;
}

Trong trường hợp này, ::first-child sẽ đảm bảo rằng tiêu đề đầu tiên không có khoảng cách trên, giúp tạo ra một sự chuyển tiếp mượt mà từ tiêu đề chính.

Tuy nhiên, cần lưu ý rằng Internet Explorer 6 không hỗ trợ pseudo-class ::first-child. Trong hầu hết các trường hợp, việc này không gây ra vấn đề lớn về bố cục; ví dụ, nếu ::first-child được sử dụng để chỉnh sửa lề, trang vẫn sẽ hiển thị được trong IE6 nhưng có thể trông hơi khác biệt. Tuy nhiên, nếu ::first-child được dùng để điều chỉnh các thuộc tính có tác động mạnh mẽ hơn đến bố cục, như lề trái và phải trong một chuỗi các phần tử nổi, điều này có thể gây ra sự không nhất quán đáng kể giữa các trình duyệt.

Sử Dụng Pseudo-class Ngôn Ngữ trong CSS

Pseudo-class ngôn ngữ, được biểu thị bằng cú pháp :lang(), cung cấp khả năng so khớp và áp dụng kiểu dáng CSS cho các phần tử dựa trên ngôn ngữ mà chúng được đánh dấu. Điều này rất hữu ích trong việc tạo ra các bố cục đa ngôn ngữ hoặc khi bạn muốn tùy chỉnh kiểu dáng của các phần tử tùy thuộc vào ngôn ngữ của trang.

Ví dụ, bạn muốn thay đổi hình ảnh nền cho một nút hoặc liên kết dựa trên ngôn ngữ của trang web. Bạn có thể thiết lập các quy tắc như sau:

:lang(es) > a#language-icon {
  background-image: url(spanish-icon.png);
}

:lang(de) > a#language-icon {
  background-image: url(german-icon.png);
}

Trong ví dụ này, nếu ngôn ngữ của trang được đặt là “es” (Tây Ban Nha) hoặc “de” (Đức), thì liên kết với ID language-icon sẽ hiển thị một biểu tượng ngôn ngữ tương ứng.

Mặt khác, về hỗ trợ trình duyệt, cần lưu ý rằng Internet Explorer phiên bản 8 là phiên bản duy nhất của trình duyệt này hỗ trợ pseudo-class :lang(). Tuy nhiên, hầu hết các trình duyệt hiện đại khác đều cung cấp hỗ trợ tốt cho pseudo-class này. Do đó, khi thiết kế các trang web đa ngôn ngữ, đây là một công cụ hữu ích để cung cấp trải nghiệm người dùng được cá nhân hóa dựa trên ngôn ngữ của họ.

Sử Dụng Pseudo-class :target trong CSS3

Pseudo-class :target trong CSS3 là một công cụ tuyệt vời cho việc đánh dấu hoặc nổi bật một phần tử cụ thể trên trang mà người dùng đang tương tác, đặc biệt khi sử dụng các liên kết gắn với các phần tử nhận dạng cụ thể thông qua ID.

Chẳng hạn, bạn có một trang web với nhiều nội dung, bao gồm các đoạn và tiêu đề <h3>, cùng với một menu định hướng giúp người dùng di chuyển nhanh đến các mục cụ thể. Để giúp người dùng dễ dàng nhận biết phần tử họ đã chọn từ menu, bạn có thể sử dụng :target để thay đổi kiểu dáng của phần tử đó:

h3:target {
  border-left: 5px solid #FAFAFA;
  background-color: #EAEAEA;
}

Trong trường hợp này, tiêu đề <h3> mà người dùng chọn từ menu sẽ nổi bật với một nền màu khác và một đường viền bên trái.

Tuy nhiên, cần lưu ý rằng Internet Explorer không hỗ trợ pseudo-class :target. Điều này có nghĩa là trong IE, các phần tử không sẽ thay đổi kiểu dáng khi được chọn qua liên kết. Opera cũng có một số hạn chế liên quan đến sử dụng :target, đặc biệt là khi tương tác với các nút điều hướng quay lại và tiếp tục. Tuy nhiên, pseudo-class

Sử Dụng Pseudo-classes Trạng Thái Của Phần Tử trong CSS

Trong CSS, có những pseudo-classes đặc biệt dành cho việc định dạng trạng thái cụ thể của các phần tử giao diện, như các trường nhập liệu, nút radio, hoặc checkbox. Chúng bao gồm trạng thái như :disabled cho các phần tử không hoạt động và :checked cho các phần tử được chọn.

Ví dụ, để định dạng một trường nhập liệu bị vô hiệu hóa với nền màu xám nhạt và đường viền đứt đoạn, bạn có thể sử dụng:

input:disabled {
  background-color: #E0E0E0;
  border: 1px dashed #AAAAAA;
}

Trong trường hợp này, bất kỳ trường nhập liệu nào được đánh dấu là disabled sẽ có kiểu dáng theo định nghĩa trên.

Thêm vào đó, bạn có thể tạo kiểu cho các hộp kiểm khi chúng được chọn. Chẳng hạn, để tăng lề trái cho các hộp kiểm được chọn, làm cho chúng nổi bật hơn trong danh sách:

input[type="checkbox"]:checked {
  margin-left: 10px;
}

Về hỗ trợ trình duyệt, hầu hết các trình duyệt hiện đại đều hỗ trợ các pseudo-classes trạng thái này. Tuy nhiên, các phiên bản cũ của Internet Explorer có thể không hỗ trợ hoặc có hỗ trợ hạn chế. Mặc dù vậy, việc sử dụng các pseudo-classes trạng thái này vẫn được xem là hữu ích để cung cấp trải nghiệm người dùng tốt hơn và thêm chi tiết vào thiết kế, mà không làm ảnh hưởng đáng kể đến tính tương thích trình duyệt.

Ứng Dụng Pseudo-class :nth-child trong CSS3

Pseudo-class :nth-child() trong CSS3 là một công cụ mạnh mẽ để chọn lọc và áp dụng kiểu cho một hoặc nhiều phần tử con cụ thể dựa trên vị trí của chúng trong danh sách phần tử con của một phần tử cha.

Ví dụ, bạn muốn thay đổi màu của phần tử thứ ba trong một danh sách không sắp xếp (<ul>). Bạn có thể làm điều này bằng cách sử dụng:

ul li:nth-child(3) {
  color: blue;
}

Ở đây, phần tử <li> thứ ba trong <ul> sẽ được chuyển sang màu xanh.

Bạn cũng có thể sử dụng các biểu thức trong :nth-child() để lựa chọn một chuỗi các phần tử dựa trên một mô hình. Ví dụ, để chọn mỗi phần tử thứ tư trong danh sách:

ul li:nth-child(4n) {
  color: purple;
}

Trong trường hợp này, mỗi phần tử <li> thứ tư sẽ được chuyển sang màu tím.

Nếu bạn muốn chọn bốn phần tử đầu tiên trong danh sách, bạn có thể sử dụng:

ul li:nth-child(-n+4) {
  font-weight: bold;
}

Ở đây, bốn phần tử <li> đầu tiên sẽ được làm đậm.

Bạn cũng có thể sử dụng :nth-child để chọn các phần tử lẻ hoặc chẵn. Chẳng hạn, để chọn mỗi phần tử lẻ:

ul li:nth-child(odd) {
  background-color: #F0F0F0;
}

Và để chọn mỗi phần tử chẵn:

ul li:nth-child(even) {
  background-color: #E0E0E0;
}

Pseudo-class :nth-child() mở ra những khả năng đa dạng để tùy chỉnh giao diện người dùng, giúp bạn tạo ra các bố cục và thiết kế web phức tạp mà không cần thêm nhiều mã HTML phức tạp.

Ứng Dụng Pseudo-class :nth-last-child trong CSS

Pseudo-class :nth-last-child trong CSS hoạt động tương tự như :nth-child, nhưng với một điểm khác biệt quan trọng: nó bắt đầu đếm từ phần tử cuối cùng của một nhóm con, thay vì từ đầu. Điều này rất hữu ích khi bạn muốn định dạng các phần tử dựa trên vị trí của chúng từ cuối lên.

Chẳng hạn, nếu bạn muốn định dạng ba phần tử cuối cùng của một danh sách không sắp xếp (<ul>), bạn có thể sử dụng:

ul li:nth-last-child(-n+3) {
  background-color: lightblue;
}

Ở đây, ba phần tử <li> cuối cùng trong <ul> sẽ có màu nền màu xanh nhạt.

Bạn cũng có thể sử dụng :nth-last-child với các biểu thức chẵn hoặc lẻ, giống như :nth-child, nhưng đếm từ dưới lên. Ví dụ, để định dạng các phần tử lẻ từ cuối lên:

ul li:nth-last-child(odd) {
  font-style: italic;
}

Trong trường hợp này, mỗi phần tử lẻ từ cuối danh sách trở lên sẽ được in nghiêng.

Sử dụng :nth-last-child mở ra khả năng tạo ra các bố cục và thiết kế web phức tạp mà không cần phải đảo ngược hoặc thay đổi cấu trúc HTML của trang, giúp giữ mã nguồn gọn gàng và dễ quản lý.

Sử Dụng Pseudo-class :nth-of-type trong CSS

Pseudo-class :nth-of-type trong CSS tương tự như :nth-child, nhưng có điểm khác biệt chính là nó chỉ tính toán dựa trên loại phần tử cụ thể trong selector, thay vì mọi phần tử con. Điều này rất hữu ích khi bạn muốn chọn lọc và áp dụng kiểu cho các phần tử cụ thể trong một nhóm mà không bị ảnh hưởng bởi loại phần tử khác.

Chẳng hạn, bạn muốn thay đổi màu cho mỗi đoạn văn bản (<p>) thứ ba, nhưng không muốn ảnh hưởng đến các phần tử <img> hoặc <blockquote> cùng nằm trong cùng một nhóm:

p:nth-of-type(3n) {
  color: green;
}

Ở đây, mỗi đoạn văn thứ ba sẽ được chuyển sang màu xanh lá, bất kể có bao nhiêu phần tử không phải là <p> xen kẽ giữa chúng.

Bạn cũng có thể sử dụng :nth-of-type với các biểu thức chẵn hoặc lẻ để chọn các phần tử dựa trên mô hình. Ví dụ, để thay đổi màu cho mỗi đoạn văn chẵn:

p:nth-of-type(even) {
  background-color: #F0F0F0;
}

Ở đây, mỗi đoạn văn chẵn sẽ có màu nền màu xám nhạt.

Pseudo-class :nth-of-type mở ra khả năng kiểm soát chi tiết và linh hoạt hơn trong việc định dạng các phần tử cụ thể dựa trên vị trí của chúng, đặc biệt khi bạn đang làm việc với các nhóm phần tử đa dạng.

Sử Dụng Pseudo-class :nth-last-of-type trong CSS

Pseudo-class :nth-last-of-type trong CSS tương tự như :nth-of-type, nhưng thay vì đếm từ đầu, nó bắt đầu đếm từ phần tử cuối cùng của loại phần tử được chỉ định. Điều này rất hữu ích khi bạn muốn áp dụng kiểu cho các phần tử dựa trên vị trí của chúng từ cuối lên.

Ví dụ, bạn muốn thay đổi màu cho ba phần tử <li> cuối cùng trong một danh sách (<ul>):

ul li:nth-last-of-type(-n+3) {
  color: orange;
}

Trong ví dụ này, ba phần tử <li> cuối cùng sẽ có màu cam.

Bạn cũng có thể kết hợp nhiều pseudo-classes cùng nhau. Chẳng hạn, bạn muốn các hình ảnh thứ hai trở đi, nhưng không phải hình ảnh cuối cùng, trong một bài đăng được căn lề trái:

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
  float: left;
}

Trong trường hợp này, tất cả các hình ảnh từ thứ hai đến áp chót sẽ được căn lề trái.

Pseudo-class :nth-last-of-type mở ra khả năng định dạng phức tạp và chi tiết cho các phần tử trong danh sách, cho phép bạn tạo ra các bố cục web độc đáo mà không cần thay đổi cấu trúc HTML.

Sử Dụng Pseudo-class :last-child trong CSS

Pseudo-class :last-child trong CSS đặc biệt hữu ích khi bạn muốn định dạng riêng biệt cho phần tử con cuối cùng trong một nhóm phần tử cha. Điều này giúp bạn áp dụng kiểu cho phần tử cuối cùng mà không ảnh hưởng đến các phần tử khác.

Ví dụ, bạn muốn loại bỏ lề dưới của đoạn văn cuối cùng trong một bài viết:

.article > p:last-child {
  margin-bottom: 0;
}

Ở đây, đoạn văn cuối cùng trong phần tử có lớp article sẽ không có lề dưới, giúp bố cục trở nên gọn gàng và đồng nhất hơn.

Pseudo-class :last-child rất hữu ích trong việc tinh chỉnh bố cục cuối cùng của một phần tử, đặc biệt khi không muốn áp dụng các quy tắc kiểu chung cho tất cả các phần tử con. Điều này giúp tạo ra các bố cục web chuyên nghiệp và tinh tế hơn mà không cần phải thay đổi cấu trúc HTML.

Ứng Dụng Pseudo-class :first-of-type:last-of-type trong CSS

Pseudo-class :first-of-type trong CSS giúp nhắm mục tiêu đến phần tử đầu tiên của một loại cụ thể trong một nhóm các phần tử con. Điều này rất hữu ích khi bạn muốn đặc biệt định dạng cho phần tử đầu tiên của một loại nhất định mà không ảnh hưởng đến các phần tử khác.

Ví dụ, bạn muốn đặc biệt định dạng cho đoạn văn đầu tiên trong một bài đăng blog:

.blog-post > p:first-of-type {
  font-weight: bold;
}

Ở đây, đoạn văn đầu tiên trong phần tử có lớp blog-post sẽ được làm đậm.

Ngược lại, :last-of-type hoạt động tương tự nhưng nhắm mục tiêu đến phần tử cuối cùng của một loại trong nhóm phần tử con. Ví dụ, nếu bạn muốn thay đổi kiểu cho hình ảnh cuối cùng trong một bài đăng:

.blog-post > img:last-of-type {
  border: 2px solid #000;
}

Trong trường hợp này, hình ảnh cuối cùng trong mỗi bài đăng blog-post sẽ có viền màu đen.

Sử dụng :first-of-type:last-of-type mang lại sự linh hoạt cao trong việc định dạng các phần tử cụ thể trong một nhóm mà không cần phụ thuộc vào cấu trúc HTML cố định hoặc sử dụng thêm các class hoặc ID. Điều này giúp tạo ra các bố cục web chuyên nghiệp và tinh tế hơn.

Sử Dụng Pseudo-class :only-child trong CSS

Pseudo-class :only-child trong CSS được sử dụng để xác định một phần tử là phần tử con duy nhất của phần tử cha của nó. Điều này rất hữu ích khi bạn muốn áp dụng một kiểu dáng đặc biệt cho phần tử con nếu nó là phần tử duy nhất trong phần tử cha.

Chẳng hạn, giả sử bạn muốn thay đổi kích thước phông chữ cho một đoạn văn trong một khung thông báo, nhưng chỉ khi có một đoạn văn duy nhất trong khung đó:

div.notification > p {
  font-size: 14px;
}

div.notification > p:only-child {
  font-size: 16px;
}

Ở đây, nếu có nhiều đoạn văn trong div có lớp notification, mỗi đoạn văn sẽ có kích thước phông chữ 14px. Nhưng nếu chỉ có một đoạn văn duy nhất, kích thước phông chữ sẽ được tăng lên thành 16px.

Pseudo-class :only-child giúp bạn tạo ra các quy tắc CSS linh hoạt, cho phép tùy chỉnh kiểu dáng dựa trên số lượng phần tử con trong một phần tử cha, mà không cần thêm logic phức tạp hoặc sửa đổi cấu trúc HTML.

Ứng Dụng Pseudo-class :only-of-type trong CSS

Pseudo-class :only-of-type trong CSS được sử dụng để chọn phần tử duy nhất của một loại cụ thể trong một nhóm phần tử con. Điều này rất hữu ích khi bạn muốn đặc biệt định dạng cho phần tử nếu nó là loại duy nhất trong phần tử cha.

Ví dụ, xét một trang blog có các bài viết với nhiều hình ảnh, nhưng một số bài viết chỉ có một hình ảnh. Bạn muốn hình ảnh duy nhất này được căn giữa, trong khi các hình ảnh khác trong bài viết có nhiều hình ảnh sẽ được căn lề:

.post img {
  float: right;
}

.post img:only-of-type {
  float: none;
  margin: 0 auto;
}

Ở đây, :only-of-type đảm bảo rằng nếu chỉ có một hình ảnh trong bài viết, nó sẽ được căn giữa thay vì căn lề.

Pseudo-class :only-of-type cung cấp một cách linh hoạt và mạnh mẽ để tạo ra các quy tắc CSS dựa trên cấu trúc nội dung, mà không cần thêm mã HTML phức tạp hoặc sử dụng JavaScript.

Sử Dụng Pseudo-class :empty trong CSS

Pseudo-class :empty trong CSS xác định một phần tử không chứa bất kỳ nội dung nào, kể cả khoảng trắng. Điều này rất hữu ích khi bạn muốn ẩn hoặc thay đổi kiểu dáng của các phần tử trống trong giao diện người dùng.

Chẳng hạn, bạn có một loạt các khung tin tức trong một thanh bên, và bạn muốn ẩn những khung không chứa nội dung nào:

.news-box:empty {
  display: none;
}

Ở đây, bất kỳ khung tin tức nào không chứa nội dung sẽ không hiển thị trên trang. Điều quan trọng cần lưu ý là :empty xác định rằng phần tử không chứa bất kỳ nội dung nào, kể cả khoảng trắng. Do đó, một phần tử có khoảng trắng vẫn không được coi là trống.

Tuy nhiên, một số trình duyệt cũ như Internet Explorer (đến phiên bản 8) không hỗ trợ pseudo-class này. Các trình duyệt hiện đại như Firefox, Safari và Opera hỗ trợ tốt :empty. Do đó, nếu đối tượng người dùng chủ yếu của bạn sử dụng các trình duyệt mới hơn, bạn có thể sử dụng :empty để cải thiện giao diện người dùng. Trong trường hợp khán giả của bạn chủ yếu sử dụng IE phiên bản cũ, bạn nên xem xét các phương án thay thế như sử dụng JavaScript hoặc các phương pháp CSS khác để ẩn các phần tử trống.

Ứng Dụng Pseudo-class :not() trong CSS

Pseudo-class :not() trong CSS cho phép bạn loại trừ các phần tử không khớp với một điều kiện cụ thể. Điều này rất hữu ích khi bạn muốn áp dụng kiểu cho một nhóm các phần tử ngoại trừ những phần tử nhất định.

Chẳng hạn, bạn muốn áp dụng kiểu cho tất cả các trường nhập liệu trong một biểu mẫu, trừ các nút gửi. Điều này có thể được thực hiện như sau:

form input:not([type="submit"]) {
  background-color: #F0F0F0;
  border-radius: 5px;
}

Ở đây, tất cả các trường nhập liệu trong biểu mẫu sẽ có nền màu xám nhạt và viền bo tròn, trừ các nút gửi.

Một ví dụ khác, bạn muốn tất cả các đoạn văn trong một bài viết có kích thước phông chữ lớn, trừ các đoạn văn chỉ ra ngày tháng:

.article p:not(.date) {
  font-size: 18px;
}

Trong trường hợp này, tất cả các đoạn văn trong phần tử có lớp article sẽ có kích thước phông chữ 18px, ngoại trừ những đoạn có lớp date.

Lưu ý về hỗ trợ trình duyệt, các phiên bản cũ của Internet Explorer (đến IE8) không hỗ trợ pseudo-class :not(). Điều này có thể cần được xem xét nếu bạn quan tâm đến tính tương thích với các trình duyệt cũ. Tuy nhiên, với sự phát triển của các trình duyệt hiện đại, việc sử dụng :not() trở nên phổ biến hơn, mở ra nhiều khả năng kiểu dáng linh hoạt mà không làm rối loạn mã CSS.

Sử Dụng Pseudo-element ::first-line trong CSS

Pseudo-element ::first-line trong CSS rất hữu ích để áp dụng kiểu dáng đặc biệt cho dòng đầu tiên của một phần tử chứa văn bản. Điều này thường được sử dụng để tạo ra các hiệu ứng văn bản nổi bật trong các khối văn bản, như bài viết hoặc mô tả.

Ví dụ, bạn muốn chuyển dòng đầu tiên của mỗi đoạn văn trong bài viết sang chữ viết hoa nhỏ để nó nổi bật hơn:

.article p::first-line {
  font-variant: small-caps;
}

Ở đây, dòng đầu tiên của mỗi đoạn văn trong phần tử có lớp article sẽ được hiển thị bằng chữ viết hoa nhỏ.

Bạn cũng có thể kết hợp ::first-line với các selectors khác để nhắm mục tiêu cụ thể. Chẳng hạn, để định dạng dòng đầu tiên của đoạn văn đầu tiên trong một phần tử:

.article > p:first-of-type::first-line {
  text-decoration: underline;
}

Trong trường hợp này, dòng đầu tiên của đoạn văn đầu tiên trong article sẽ được gạch chân.

Pseudo-element ::first-line mở ra khả năng tinh chỉnh phong cách cho các phần tử văn bản, giúp tạo ra các hiệu ứng văn bản hấp dẫn và tăng cường trải nghiệm.

Pseudo-element ::first-letter trong CSS

Pseudo-element ::first-letter trong CSS rất hữu ích để tạo ra hiệu ứng đặc biệt cho chữ cái đầu tiên của một đoạn văn bản, thường được sử dụng để tạo ra hiệu ứng kiểu chữ đầu dòng (drop cap) hoặc nổi bật chữ cái đầu tiên trong văn bản.

Ví dụ, bạn muốn làm nổi bật chữ cái đầu tiên của mỗi đoạn văn trong một bài viết bằng cách tăng kích thước phông chữ và căn lề trái:

.article p {
  font-size: 16px;
}

.article p::first-letter {
  font-size: 36px;
  float: left;
  padding-right: 8px;
}

Ở đây, chữ cái đầu tiên của mỗi đoạn văn trong phần tử có lớp article sẽ có kích thước lớn hơn và được căn lề trái, tạo ra hiệu ứng đầu dòng ấn tượng.

Lưu ý rằng nếu bạn sử dụng cả ::first-line::first-letter cho cùng một phần tử, các thuộc tính của ::first-letter sẽ có ưu tiên. Điều này cần được xem xét kỹ lưỡng để đảm bảo rằng kết quả cuối cùng phù hợp với ý đồ thiết kế của bạn.

Pseudo-element ::first-letter mở ra khả năng thêm chi tiết kiểu chữ tinh tế và độc đáo cho văn bản, giúp tạo ra các bố cục và thiết kế web hấp dẫn hơn. Tuy nhiên, quan trọng là cần hiểu rõ về cách thức hoạt động của nó để tránh những kết quả không mong muốn.

pseudo-elements ::before::after

Trong CSS, các pseudo-elements ::before::after được sử dụng để chèn nội dung trước hoặc sau phần tử HTML. Điều này giúp bạn thêm nội dung vào trang web mà không cần thay đổi HTML.

Cụ thể, bạn có thể sử dụng chúng để tự động tạo và chèn số thứ tự cho các hình ảnh, biểu đồ, hoặc đồ thị trên trang web của mình. Trong ví dụ bạn đưa ra, chúng ta sử dụng một bộ đếm CSS để làm điều này:

  1. counter-reset: image; – Điều này thiết lập một bộ đếm tên là image. Nó được sử dụng trong phần tử .post để khởi tạo bộ đếm này.
  2. p.description::before – Định nghĩa pseudo-element ::before cho mỗi thẻ <p> có class description.
  3. content: "Figure number " counter(image) ": "; – Điều này chèn một chuỗi văn bản trước nội dung của mỗi thẻ <p>. Chuỗi này bao gồm từ “Figure number “, theo sau là giá trị hiện tại của bộ đếm image, và dấu hai chấm.
  4. counter-increment: image; – Mỗi lần pseudo-element ::before được sử dụng, bộ đếm image sẽ tăng lên 1. Điều này đảm bảo rằng mỗi thẻ <p> sẽ có một số thứ tự độc đáo.

Kết quả là, mỗi thẻ <p> với class description sẽ có một số thứ tự tự động được chèn vào trước nội dung của nó, tạo ra dạng “Figure number 1:”, “Figure number 2:”, v.v. Điều này rất hữu ích cho việc tự động đánh số các hình ảnh hoặc phần tử trên trang web mà không cần sửa đổi mã HTML.

Các Mẹo và Thủ Thuật Sử Dụng Selectors

Khi nói đến việc tối ưu hóa và sáng tạo trong CSS, việc kết hợp các selectors một cách thông minh có thể mở ra cánh cửa cho những thiết kế web độc đáo và hiệu quả. Đây không chỉ là vấn đề của việc áp dụng các quy tắc CSS, mà còn liên quan đến việc hiểu biết sâu sắc về cách các elements tương tác với nhau trong DOM (Document Object Model). Dưới đây là một số mẹo và thủ thuật quan trọng khi sử dụng CSS selectors:

Kết hợp các Selectors Cơ Bản và Nâng Cao:

  • Sử dụng các selectors cơ bản như class và ID kết hợp với pseudo-classes để đạt được hiệu ứng động. Ví dụ, nav.menu-item:hover có thể được sử dụng để thay đổi màu sắc của các mục menu khi người dùng di chuột qua.

Sử Dụng Attribute Selectors để Tinh Chỉnh Style:

  • Attribute selectors cung cấp một cách tuyệt vời để áp dụng CSS dựa trên các thuộc tính cụ thể của element. Ví dụ, [type="text"] có thể được sử dụng để chỉ định style cho tất cả các input text.

Tối Ưu Hóa CSS với Child và Descendant Selectors:

  • Sử dụng child selectors (>), và descendant selectors () để chọn lọc các phần tử con hoặc cháu một cách cụ thể. Điều này giúp giảm bớt sự mơ hồ và tăng hiệu suất khi trình duyệt thực thi CSS.

Ứng Dụng Pseudo-elements để Tạo Hiệu Ứng Đặc Biệt:

  • Pseudo-elements như ::before::after có thể tạo ra các yếu tố trang trí mà không cần thêm HTML. Chúng có thể dùng để thêm các icon, hoặc tạo ra các hiệu ứng đặc biệt khi tương tác.

Ví dụ thực tế, trong một dự án website tin tức, bạn có thể sử dụng các selectors nâng cao để tạo hiệu ứng khi người dùng di chuột qua các tiêu đề bài báo. Sử dụng article.title:hover kết hợp với pseudo-element ::after để tạo ra một đường kẻ ngang phía dưới tiêu đề, tăng tính nổi bật và tương tác cho người đọc. Hoặc bạn có thể sử dụng input[type="submit"]:hover để thay đổi màu sắc và làm nổi bật nút gửi trong form liên hệ, tạo ra trải nghiệm người dùng mượt mà và chuyên nghiệp hơn.

Như vậy, việc sử dụng các selectors một cách thông minh không chỉ làm tăng tính thẩm mỹ cho trang web mà còn cải thiện trải nghiệm người dùng. Thực hành và thử nghiệm liên tục với các kỹ thuật này sẽ giúp bạn mở rộng khả năng sáng tạo trong lập trình CSS của mình.

Kết luận CSS SElectors #

Nói chuyện nhàm chán quá đủ rồi, giờ là lúc bạn lấy thông tin về bài viết này và tự mình thử nó: bắt đầu bằng cách tạo một trang thử nghiệm và kiểm tra tất cả các selectors này, quay lại đây khi nghi ngờ và đảm bảo luôn tham khảo với các thông số kỹ thuật của W3C, nhưng đừng chỉ ngồi đó mà nghĩ rằng vì những selectors này chưa được hỗ trợ rộng rãi nên bạn cũng có thể bỏ qua chúng.

Nếu bạn thích phiêu lưu hơn một chút hoặc nếu bạn không ngại bỏ qua quá khứ chứa đầy các lớp và id vô dụng và không có ngữ nghĩa, tại sao không đưa một hoặc hai selectors CSS mạnh mẽ này vào dự án tiếp theo của bạn? Chúng tôi hứa bạn sẽ không bao giờ nhìn lại.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now