Người Viết : ViKiMi Editor

21. Bộ chọn X::phần tử giả để hướng tới phần tử được chọn.
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Tại đây thì chúng ta có thẻ sử dụng để áp dụng các phần tử giả (được chỉ định bởi ::) để định phong cách cho các mảng của một phần tử, chẳng hạn như dòng đầu tiên, hoặc chữ cái đầu tiên. Hãy nhớ rằng những cái này phải được áp dụng vào các phần tử cấp độ khối để đạt được hiệu quả.
Một phần tử giả gồm có hai dấu hai chấm: ::
Nhắm chọn ký tự đầu tiên của đoạn văn
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Đoạn CSS trên sẽ tìm các đoạn văn bản trên trang, và sau đó chỉ chọn chữ cái đầu tiên của phần tử đó để áp dụng mã CSS trên. Đây là cách hiển thị cho chữ cái đầu tiên của văn bản của 1 bài báo chẳng hạn.
Điều này thường được sử dụng để tạo ra phong cách giống với báo chí cho chữ cái đầu tiên của một bài báo.
Chọn dòng đầu tiên của đoạn văn
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Tương tự như vậy, phần tử giả ::first-line như kỳ vọng, chỉ định phong cách dòng đầu tiên của phần tử.
“Đối với khả năng tương thích với stylesheet hiện có, user-agent cũng phải chấp nhận ký hiệu một dấu hai chấm cho các phần tử giả được giới thiệu ở CSS cấp độ 1 và 2 (cụ thể là, :first-line, :first-letter, :before và :after). Khả năng tương thích này không được phép cho các phần tử giả mới được giới thiệu trong đặc tả này. ” – Nguồn Tham Khảo
22. Bộ chọn phần tử cụ thể trong ngăn xếp X:nth-child(n)
li:nth-child(3) {
color: red;
}
Câu hỏi là làm sao chọn một phần tử thuộc danh sách của ngăn xếp với css. Lớp giả nth-child sẽ giải quyết điều đó!
Tuy nhiên, xin lưu ý rằng nth-child chấp nhận một số nguyên như là một tham số, và nó không chọn số 0 làm chỉ số chỉ mục index đầu tiên. Nếu bạn muốn chọn phần tử danh sách thứ hai, sử dụng li:nth-child(2).
Chúng ta thậm chí có thể sử dụng điều này để chọn một tập hợp các phần tử con. Ví dụ, chúng ta có thể làm cho li:nth-child(4n) chọn tất cả các phần cách sau mỗi bốn phần trong danh sách.
23. Bộ chọn chỉ định phần tử n đến phần tử cuối X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Áp dụng dễ dàng với bất kỳ một danh sách <ul> <li>, Và sẽ thế nào nếu bạn có một danh sách rất lớn các phần tử trong một ul, và chỉ cần truy cập vào phần tử thứ ba tính từ phần tử cuối cùng ngược lại. Thay vì thực hiện công việc vân vân etc là li:nth-child(397), thay vào đó bạn có thể sử dụng lớp giả nth-last-child.
Kỹ thuật này hoạt động gần giống với số 16 ở trên, tuy nhiên, sự khác biệt là nó bắt đầu vào cuối của tập hợp, và quay ngược trở lại. Có lẽ do kỹ thuật ngăn xếp chăng?
Kết quả ví dụ, ta có phần tử thứ 3 tính từ phần tử cuối cùng ngược lại sẽ có chữ màu đỏ:

24. Bộ chọn cho danh sách X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
Tại đây ta xét với danh sách các phần tử không được đánh index thứ tự. Giả sử là danh sách các thẻ <UL>
Và sẽ có lúc, thay vì chọn một phần tử con, bạn cần phải chọn theo kiểu của phần tử.
Hãy tưởng tượng mã đánh dấu bao gồm năm danh sách không có thứ tự. Nếu bạn muốn chỉ định phong cách cho ul thứ ba, và không có một id để chọn, bạn có thể sử dụng các lớp giả nth-of-type(n). Trong đoạn code ở trên, chỉ ul thứ ba sẽ có một đường viền xung quanh nó.
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Và vâng, để thống nhất, chúng ta cũng có thể sử dụng nth-last-of-type để bắt đầu vào cuối danh sách bộ chọn, và lần ngược trở lại để chọn phần tử mong muốn. Cũng tương tự bộ chọn tại vị trí số 23 là X:nth-last-child(n)
26. Bộ chọn phần tử đầu tiên trong danh sách của phần tử cha X:first-child
ul li:first-child {
border-top: none;
}
Lớp giả này cho phép chúng ta chỉ chọn phần tử con đầu tiên của phần tử cha. Bạn sẽ thường sử dụng điều này để loại border-top khỏi phần tử đầu tiên.
Ví dụ: giả sử bạn có một danh sách các hàng, và mỗi cái đều có border-top và một border-bottom. Vâng, với sự sắp xếp đó, phần tử đầu tiên và cuối cùng trong tập hợp đó sẽ trông hơi khác. Vậy với X:first-child và X:last-child chúng ta có thể dễ dàng tuỳ biên cho điều này.
Nhiều nhà thiết kế áp dụng các lớp first và last để bù đắp cho việc này. Thay vào đó, bạn có thể sử dụng các lớp giả này.
27. Bộ chọn phần tử cuối cùng trong danh sách của phần tử cha X:last-child
ul > li:last-child {
color: green;
}
Trái với first-child là last-child . last-child sẽ chọn phần tử con cuối cùng của phần tử cha.
Ví dụ
Tạo danh sách theo yêu cầu. Chúng ta sẽ tạo ra một danh sách các phần tử.
Mã đánh dấu
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
Không có gì đặc biệt ở đây; chỉ là một danh sách đơn giản.
CSS
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
margin: 0 auto;
}
li {
padding: 10px;
border-bottom: 5px solid black;
border-top: 5px solid red !important;
}
Phong cách này sẽ thiết lập một nền, loại bỏ padding mặc định của trình duyệt trên ul, và áp dụng border vào từng li để thêm một chút chiều sâu. Chúng ta có hiển thị bên dưới :

Để thêm chiều sâu cho danh sách của bạn, áp dụng border-bottom vào từng li màu tối hơn màu nền của li. Tiếp theo, áp dụng border-top với một vài sắc thái nhẹ hơn.
Và Bây giờ, để đẹp hơn thì chúng ta sẽ tuỳ biến là li:first-child {border-top: none} Và li:last-child { border-bottom: none}
Vấn đề duy nhất, như thể hiện trong hình trên, là một border sẽ không được áp dụng cho phần trên và dưới cùng của danh sách không có thứ tự – trông nó hơi khác. Hãy sử dụng các lớp giả :first-child và :last-child để khắc phục điều này. Kết quả như dưới và Bạn thấy đó; điều này đã khắc phục được nó!
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}

Đoạn mã mang tính chất tham khảo khi dùng bộ chọn x:first-child và x:last-child
<html>
<head>
<style>
#ViDu-Menu-css{
width: 600px;
}
#ViDu-Menu-css ul {
width: 300px;
background: blue;
color: white;
list-style: none;
padding-left: 0;
margin: 0 auto;
}
#ViDu-Menu-css ul>li {
padding: 10px;
border-bottom: 5px solid black !important;
border-top: 5px solid red !important;
}
#ViDu-Menu-css ul>li:first-child {
border-top: none !important;
}
#ViDu-Menu-css ul>li:last-child {
border-bottom: none !important;
}
</style>
</head>
<body>
<div id='ViDu-Menu-css'>
<ul>
<li> Menu Item 1 </li>
<li> Menu Item 2 </li>
<li> Menu Item 3 </li>
<li> Menu Item n </li>
</ul>
</div>
</body>
</html>
28. Bộ chọn phần tử duy nhất thuộc phần tử cha. Nếu nó không là duy nhất thì không làm nhé. X:only-child
div p:only-child {
color: red;
}
Áp dụng khi bạn cần thiết để thiết lập đánh dấu duy nhất khi lập trình để tính hiệu quả tăng hơn trong xử lý.
Nó cho phép bạn chọn các phần tử mà là con duy nhất của phần tử cha. Ví dụ, tham khảo đoạn code ở trên, chỉ áp dụng css cho div có phần tử <P> là duy nhất. Nếu có 2 hay hơn số thẻ <P> thì không làm. div p sẽ có màu đỏ.
Ví dụ rõ hơn nhé:
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
Trong trường hợp này, đoạn văn của div thứ hai sẽ không được chọn; chỉ div đầu tiên. Ngay sau khi bạn áp dụng nhiều hơn một con vào một phần tử, thì lớp giả only-child không còn có hiệu lực.
29. Bộ chọn áp dụng duy nhất theo kiểu X:only-of-type
li:only-of-type {
font-weight: bold;
}
Lớp giả này có thể được sử dụng theo một số cách khéo léo. Nó sẽ chọn các phần tử mà không có anh chị em trong container cha của nó.
Ví dụ, chúng ta hãy chọn tất cả ul, mà chỉ có một phần tử duy nhất. Giải pháp đưa ra là X:only-of-type
Đầu tiên, hãy tự hỏi làm thế nào bạn thực hiện nhiệm vụ này? Bạn có thể làm ul li, nhưng, điều này sẽ chọn tất cả các phần tử trong list. Giải pháp duy nhất để sử dụng là only-of-type.
ul > li:only-of-type {
font-weight: bold;
}
30. Bộ chọn X:first-of-type, với nhiều tuỳ biến khác nhau
Lớp giả first-of-type cho phép bạn chọn các anh chị em đầu tiên của cùng kiểu.
Thử nghiệm
Để hiểu rõ hơn về điều này, chúng ta hãy thực hiện một bài kiểm tra. Sao chép sau mã đánh dấu sau vào trình soạn thảo code của bạn:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
Bây giờ, không đọc thêm nữa, cố gắng tìm cách để chỉ chọn “List Item 2“. Khi bạn đã tìm ra cách (hoặc bỏ cuộc), hãy đọc tiếp.
Giải pháp 1
Có nhiều cách khác nhau để giải quyết bài kiểm tra này. Chúng ta sẽ xem xét một số ít trong số chúng. Hãy bắt đầu bằng cách sử dụng first-of-type.
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Cấch thức xử lý process : “tìm danh sách không có thứ tự và là đầu tiên trên trang, sau đó tìm phần tử con ngay sau là li , là danh sách các phần tử. Tiếp theo, lọc nó đến chỉ phần tử danh sách thứ hai trong bộ <li>”.
Giải pháp 2
Một lựa chọn khác là sử dụng bộ chọn liền kề.
p + ul li:last-child {
font-weight: bold;
}
Trong trường hợp này, chúng ta tìm thấy ul và ngay trước là thẻ p, và sau đó tìm phần tử con cuối cùng của phần tử.
Giải pháp 3
Chúng ta có thể làm cho phức tạp hay đơn giản tuỳ chúng ta muốn với các bộ chọn.
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
Lần này, chúng ta lấy ul đầu tiên trên trang, và sau đó tìm phần tử danh sách đầu tiên, nhưng bắt đầu từ phía dưới! 🙂
Tổng kết
Hãy chắc chắn tham khảo danh sách trình duyệt tương thích. Ngoài ra, bạn có thể sử dụng script IE9.js của Dean Edward để mang lại hỗ trợ cho các bộ chọn vào trình duyệt cũ.
Hãy cố gắng sử dụng những bộ chọn CSS3 gốc thay vì các phương thức/bộ chọn của các thư viện tuỳ biến. Nó sẽ làm cho code của bạn nhanh hơn, vì cơ chế chọn có thể sử dụng phân tích cú pháp bản địa của trình duyệt, thay vì của riêng của nó.
Mong bạn sẽ có nhiều thủ thuật xử lý hơn!