| – Trong Bài 05 & Bài 18 thì tôi đã hướng dẫn các bạn rất nhiều cách xác định bộ chọn của một phần tử rồi. Tuy nhiên, có một số “trường hợp đặc biệt” mà những cách đó không thể nào xác định được bộ chọn của phần tử.
– Ví dụ: Tôi muốn thiết lập cho phần tử này nền màu “xanh da trời” khi người dùng di chuyển con trỏ lên nó (để làm được điều đó thì trước tiên chúng ta cần phải xác định bộ chọn của cái phần tử, sau đó thiết lập thuộc tính background-color với giá trị skyblue). Thông thường, việc xác định bộ chọn cho phần tử này khá đơn giản, nhưng vấn đề được đặt ra ở đây là trường hợp khi người dùng di chuyển con trỏ lên nó. Nếu chỉ dựa vào kiến thức trong Bài 05 & Bài 18 thì chúng ta không thể nào thực hiện được. – Đối với những cái trường hợp giống như ví dụ minh họa ở phía trên, để xác định được bộ chọn của phần tử, ngoài việc vận dụng kiến thức đã học trong các bài trước đó thì bây giờ chúng ta cần phải kết hợp với các pseudo-class. |
1) Pseudo-class là gì !?
– Pseudo-class dịch sang tiếng Việt có thể tạm gọi là lớp giả, mỗi pseudo-class sẽ được xác định bởi một từ khóa bằng tiếng Anh, nó dùng để đại diện cho một “trường hợp đặc biệt” xảy ra đối với phần tử.
– Dưới đây là danh sách các pseudo-class (các bạn vui lòng bấm vào hình để xem giải thích chi tiết về trường hợp sẽ xảy ra đối với phần tử của từng loại pseudo-class)
| :active | – Trường hợp này xảy ra khi phần tử đang bị người dùng click vào. |
| :hover | – Trường hợp này xảy ra khi phần tử đang bị người dùng dí con trỏ vào. |
| :checked | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu thuộc dạng checkbox hoặc radio khi chúng được đánh dấu check. |
| :root | – Trường hợp này xảy ra khi phần tử là phần tử gốc của trang web. |
| :empty | – Trường hợp này xảy ra khi phần tử có nội dung rỗng. |
| :focus | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng đang được người dùng truy cập. |
| :target | – Trường hợp này xảy ra khi phần tử là phần tử đang được liên kết trong. |
| :valid | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng nhận được một giá trị hợp lệ (dựa theo thể loại của chúng) |
| :invalid | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng nhận phải một giá trị không hợp lệ (dựa theo thể loại của chúng) |
| :in-range | – Trường hợp này thường xảy ra trên các phần tử <input> kiểu number khi chúng nhận được một giá trị hợp lệ (nằm trong đoạn min – max) |
| :out-of-range | – Trường hợp này thường xảy ra trên các phần tử <input> kiểu number khi chúng nhận phải một giá trị không hợp lệ (nằm ngoài đoạn min – max) |
| :link | – Trường hợp này xảy ra khi phần tử là một cái liên kết & URL của nó chưa từng được người dùng truy cập qua. |
| :visited | – Trường hợp này xảy ra khi phần tử là một cái liên kết & URL của nó đã từng được người dùng truy cập qua. |
| :required | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính required. |
| :optional | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính required. |
| :disabled | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính disabled. |
| :enabled | – Trường hợp này thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính disabled. |
| :only-child | – Trường hợp này xảy ra khi phần tử là phần tử con duy nhất (tức là nó không có bất kỳ một phần tử anh em nào cả) |
| :first-child | – Trường hợp này xảy ra khi phần tử là phần tử con đầu tiên (tức là nó không có bất kỳ một phần tử anh nào cả, còn về trường hợp nó có phần tử em hay không thì không quan trọng) |
| :last-child | – Trường hợp này xảy ra khi phần tử là phần tử con cuối cùng (tức là nó không có bất kỳ một phần tử em nào cả, còn về trường hợp nó có phần tử anh hay không thì không quan trọng) |
| :nth-child(n) | – Trường hợp này xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ trên xuống dưới) |
| :nth-last-child(n) | – Trường hợp này xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ dưới lên trên) |
| :only-of-type | – Trường hợp này xảy ra khi phần tử không có bất kỳ một phần tử anh em nào có cùng kiểu thẻ (tag) với nó. |
| :first-of-type | – Trường hợp này xảy ra khi phần tử là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ (hay nói cách khác là phần tử này không có bất kỳ một phần tử anh nào có cùng kiểu thẻ với nó) |
| :last-of-type | – Trường hợp này xảy ra khi phần tử là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ (hay nói cách khác là phần tử này không có bất kỳ một phần tử em nào có cùng kiểu thẻ với nó) |
| :nth-of-type(n) | – Trường hợp này xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ trên xuống dưới) trong số các phần tử anh em có cùng kiểu thẻ. |
| :nth-last-of-type(n) | – Trường hợp này xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ dưới lên trên) trong số các phần tử anh em có cùng kiểu thẻ. |
| :not(selector) | – Trường hợp này xảy ra khi phần tử không phải là phần tử nằm trong số các phần tử được xác định bởi bộ chọn selector. |
2) Xác định bộ chọn của phần tử dựa theo trường hợp đặc biệt
– Để xác định được bộ chọn của phần tử dựa theo một “trường hợp đặc biệt” nào đó thì chúng ta cần phải ghép tên pseudo-class của trường hợp đó nằm ở ngay sát phía sau phần tử.
– Dưới đây là một số ví dụ minh họa:
| h1:active | – Chọn phần tử <h1> đang bị người dùng click vào. |
| div > h1:hover | – Chọn phần tử <h1> đang bị người dùng dí con trỏ vào, ngoài ra thì cha của phần tử <h1> này phải là một phần tử <div> |
| div p:empty | – Chọn các phần tử <p> có nội dung rỗng, ngoài ra thì các phần tử <p> này phải có tổ tiên là một phần tử <div> |
| input[type=”checkbox”]:focus | – Chọn phần tử <input> có kiểu là checkbox và đang được người dùng truy cập. |
| h1:target u | – Chọn phần tử <u> là con cháu của phần tử <h1> đang được người dùng liên kết trong. |
| #css a:visited | – Chọn những cái liên kết mà URL của nó đã từng được người dùng truy cập qua, ngoài ra thì các liên kết này phải là con cháu của phần tử #css |
| div.html > p:only-child | – Chọn các phần tử <p> là phần tử con duy nhất (ngoài ra thì cha của các phần tử <p> này phải là một phần tử <div> có class là html) |
| p:first-child | – Chọn các phần tử <p> là phần tử con đầu tiên. |
| .html p:last-child | – Chọn các phần tử <p> là phần tử con cuối cùng (ngoài ra thì các phần tử <p> này phải là con cháu của một phần tử có class là html) |
| p:nth-child(2) | – Chọn các phần tử <p> là phần tử con thứ 2 được xác định theo thứ tự từ trên xuống dưới. |
| p:nth-last-child(2) | – Chọn các phần tử <p> là phần tử con thứ 2 được xác định theo thứ tự từ dưới lên trên. |
| .css h1:only-of-type | – Chọn các phần tử <h1> là phần tử không có bất kỳ người anh em nào có cùng kiểu thẻ <h1> với nó (ngoài ra thì các phần tử <h1> này còn phải là con cháu của một phần tử có class là css) |
| span:first-of-type | – Chọn các phần tử <span> là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ <span> |
| p:last-of-type | – Chọn các phần tử <p> là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ <p> |
| div:nth-of-type(2) | – Chọn các phần tử <div> là phần tử được khai báo thứ 2 theo thứ tự từ trên xuống dưới trong số các phần tử anh em có cùng kiểu thẻ <div> |
| #c1 p:nth-last-of-type(2) > * | – Chọn tất cả các phần tử con của phần tử <p> (với điều kiện những phần tử <p> này phải là phần tử được khai báo thứ 2 theo thứ tự từ dưới lên trên trong số các phần tử anh em có cùng kiểu thẻ <p>, ngoài ra thì các phần tử <p> này còn phải là con cháu của phần tử #c1) |
| #test1 :not(:first-child) | – Chọn các phần tử con cháu của phần tử #test1 (với điều kiện các phần tử con cháu này không phải là phần tử con đầu tiên) |
– Lưu ý: Đối với bốn trường hợp:
|
– Thay vì phải xác định phần tử dựa theo một thứ tự n nhất định thì bây giờ chúng ta có thể đổi lại bằng cách sử dụng giá trị even để chọn những phần tử có thứ tự chẵn, hoặc giá trị odd để chọn những phần tử có thứ tự lẻ. |
– Thiết lập đường viền màu đỏ cho các phần tử con có thứ tự chẵn (theo thứ tự từ trên xuống dưới) của phần tử #test.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style>
#test > :nth-child(even){
border:2px solid red;
}
</style>
</head>
<body>
<div id="test">
<p>- Tài liệu học Lập Trình Web 01</p>
<p>- Tài liệu học Lập Trình Web 02</p>
<p>- Tài liệu học Lập Trình Web 03</p>
<p>- Tài liệu học Lập Trình Web 04</p>
<p>- Tài liệu học Lập Trình Web 05</p>
<p>- Tài liệu học Lập Trình Web 06</p>
<p>- Tài liệu học Lập Trình Web 07</p>
<p>- Tài liệu học Lập Trình Web 08</p>
<p>- Tài liệu học Lập Trình Web 09</p>
<p>- Tài liệu học Lập Trình Web 10</p>
</div>
</body>
</html>Xem ví dụ
– Trường hợp :active xảy ra khi phần tử đang bị người dùng click vào (click bằng chuột trái hay chuột phải đều được)
– Ví dụ: Thiết lập nền màu vàng cho phần tử <h1> đang bị người dùng click vào.
<!DOCTYPE html>
<html>
<head>
<style>
h1:active{
background-color:yellow;
}
</style>
</head>
<body>
<h1>1) Tài liệu học HTML</h1>
<p>- Bài 1: . . . . . . . . . .</p>
<p>- Bài 2: . . . . . . . . . .</p>
<h1>2) Tài liệu học CSS</h1>
<p>- Bài 1: . . . . . . . . . .</p>
<p>- Bài 2: . . . . . . . . . .</p>
</body>
</html>– Trường hợp :hover xảy ra khi phần tử đang bị người dùng dí con trỏ vào.
– Ví dụ: Thiết lập nền màu vàng cho phần tử <h1> đang bị người dùng dí con trỏ vào.
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover{
background-color:yellow;
}
</style>
</head>
<body>
<h1>1) Tài liệu học HTML</h1>
<p>- Bài 1: . . . . . . . . . .</p>
<p>- Bài 2: . . . . . . . . . .</p>
<h1>2) Tài liệu học CSS</h1>
<p>- Bài 1: . . . . . . . . . .</p>
<p>- Bài 2: . . . . . . . . . .</p>
</body>
</html>– Trường hợp :checked thường xảy ra trên các phần tử biểu mẫu thuộc dạng checkbox hoặc radio khi chúng được đánh dấu check.
| – Dấu check có thể xuất phát từ việc phần tử được thiết lập thuộc tính checked hoặc do người dùng check vào. |
– Ví dụ: Thiết lập kích thước 30×30 cho những phần tử được đánh dấu check.
<!DOCTYPE html>
<html>
<head>
<style>
:checked{
width:30px;
height:30px;
}
</style>
</head>
<body>
<p><input type="checkbox" checked> HTML</p>
<p><input type="checkbox"> CSS</p>
<p><input type="radio" name="gender" value="nam"> Nam</p>
<p><input type="radio" name="gender" value="nu" checked> Nữ</p>
</body>
</html>– Trường hợp :root xảy ra khi phần tử là phần tử gốc của trang web.
| – Lưu ý: Phần tử gốc của trang web chính là phần tử <html> |
– Ví dụ: Thiết lập nền màu hồng cho phần tử gốc của trang web.
<!DOCTYPE html>
<html>
<head>
<style>
:root{
background-color:pink;
}
</style>
</head>
<body>
<h1>1) Tài liệu học HTML</h1>
<h1>2) Tài liệu học CSS</h1>
<h1>3) Tài liệu học JavaScript</h1>
</body>
</html>– Trường hợp :empty xảy ra khi phần tử có nội dung rỗng.
– Ví dụ: Thiết lập nền màu đỏ với chiều cao 10 pixel cho các phần tử có nội dung rỗng.
<!DOCTYPE html>
<html>
<head>
<style>
:empty{
background-color:red;
height:10px;
}
</style>
</head>
<body>
<h1>1) Tài liệu học HTML</h1>
<p></p>
<h1>2) Tài liệu học CSS</h1>
<h2></h2>
<h3></h3>
</body>
</html>– Trường hợp :focus thường xảy ra trên các phần tử biểu mẫu khi chúng đang được người dùng truy cập.
– Ví dụ: Thiết lập nền màu hồng cho phần tử biểu mẫu đang được người dùng truy cập.
<!DOCTYPE html>
<html>
<head>
<style>
:focus{
background-color:pink;
}
</style>
</head>
<body>
<input type="text" placeholder="nhập họ tên">
<br><br>
<textarea placeholder="giới thiệu bản thân"></textarea>
<br><br>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</body>
</html>– Trường hợp :target xảy ra khi phần tử là phần tử đang được liên kết trong.
– Ví dụ: Thiết lập nền màu hồng cho phần tử đang được liên kết trong.
<!DOCTYPE html>
<html>
<head>
<style>
:target{
background-color:pink;
}
</style>
</head>
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<h1 id="html">1) Tài liệu học HTML</h1>
. . . .
. . . .
. . . .
<h1 id="css">2) Tài liệu học CSS</h1>
. . . .
. . . .
. . . .
<h1 id="js">3) Tài liệu học JavaScript</h1>
. . . .
. . . .
. . . .
</body>
</html>– Trường hợp :valid thường xảy trên các phần tử biểu mẫu khi chúng nhận được một giá trị hợp lệ (dựa theo thể loại của chúng)
– Ví dụ:
- Đối với phần tử biểu mẫu kiểu number, nếu nó nhận giá trị 7 trong khi nó được thiết lập min=6 và max=10 thì tức là nhận giá trị hợp lệ.
- Đối với phần tử biểu mẫu kiểu email, nếu nó nhận một giá trị có định dạng đúng chuẩn email (ví dụ như: dauxanh@yahoo.com) thì tức là hợp lệ.
- . . . .
– Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu nhận được giá trị hợp lệ.
<!DOCTYPE html>
<html>
<head>
<style>
:valid{
background-color:yellow;
}
</style>
</head>
<body>
<input type="email" value="dauxanh@yahoo.com">
<input type="email" value="dauxanh">
<input type="number" min="5" max="10" value="7">
<input type="number" min="5" max="10" value="32">
</body>
</html>– Trường hợp :invalid thường xảy ra trên các phần tử biểu mẫu khi chúng nhận phải một giá trị không hợp lệ (dựa theo thể loại của chúng)
– Ví dụ:
- Đối với phần tử kiểu number, nếu nó được thiết lập min=5 và max=10 nhưng lại nhận giá trị 13 thì tức là nhận phải giá trị không hợp lệ.
- Đối với phần tử kiểu email, nếu nó nhận một giá trị không đúng định dạng email (ví dụ như thiếu @) thì tức là nhận phải giá trị không hợp lệ.
- . . . .
– Ví dụ: Thiết lập nền màu đỏ cho những phần tử biểu mẫu nhận phải giá trị không hợp lệ.
<!DOCTYPE html>
<html>
<head>
<style>
:invalid{
background-color:red;
}
</style>
</head>
<body>
<input type="email" value="dauxanh@yahoo.com">
<input type="email" value="dauxanh">
<input type="number" min="5" max="10" value="7">
<input type="number" min="5" max="10" value="32">
</body>
</html>– Trường hợp :in-range thường xảy ra trên các phần tử <input> kiểu number khi chúng nhận được một giá trị hợp lệ (nằm trong đoạn min – max)
– Ví dụ: Thiết lập nền màu vàng cho những phần tử nhận được giá trị nằm trong đoạn min – max
<!DOCTYPE html>
<html>
<head>
<style>
:in-range{
background-color:yellow;
}
</style>
</head>
<body>
<p><input type="number" min="5" max="10" value="23"></p>
<p><input type="number" min="5" max="10" value="8"></p>
<p><input type="number" min="5" max="10" value="3"></p>
</body>
</html>– Trường hợp :out-of-range thường xảy ra trên các phần tử <input> kiểu number khi chúng nhận phải một giá trị không hợp lệ (nằm ngoài đoạn min – max)
– Ví dụ: Thiết lập nền màu đỏ cho những phần tử nhận phải giá trị nằm ngoài đoạn min – max
<!DOCTYPE html>
<html>
<head>
<style>
:out-of-range{
background-color:red;
}
</style>
</head>
<body>
<p><input type="number" min="5" max="10" value="23"></p>
<p><input type="number" min="5" max="10" value="8"></p>
<p><input type="number" min="5" max="10" value="3"></p>
</body>
</html>– Trường hợp :link xảy ra khi phần tử là một cái liên kết & URL của nó chưa từng được người dùng truy cập qua.
– Ví dụ: Thiết lập chữ màu đỏ cho những cái liên kết mà URL của nó chưa từng được người dùng truy cập qua.
<!DOCTYPE html>
<html>
<head>
<style>
:link{
color:red;
}
</style>
</head>
<body>
<a href="demo?file=3615" target="_blank">Link 1</a>
<br>
<a href="demo?file=3616" target="_blank">Link 2</a>
<br>
<a href="demo?file=3617" target="_blank">Link 3</a>
</body>
</html>– Trường hợp :visited xảy ra khi phần tử là một cái liên kết & URL của nó đã từng được người dùng truy cập qua.
– Ví dụ: Thiết lập chữ màu đỏ cho những cái liên kết mà URL của nó đã từng được người dùng truy cập qua.
<!DOCTYPE html>
<html>
<head>
<style>
:visited{
color:red;
}
</style>
</head>
<body>
<a href="demo?file=3615" target="_blank">Link 1</a>
<br>
<a href="demo?file=3618" target="_blank">Link 2</a>
<br>
<a href="demo?file=3619" target="_blank">Link 3</a>
</body>
</html>– Trường hợp :required thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính required.
| – Đối với các phần tử bị thiết lập thuộc tính required, chúng không được phép nhận giá trị rỗng khi Submit. |
– Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu bị thiết lập thuộc tính required.
<!DOCTYPE html>
<html>
<head>
<style>
:required{
background-color:yellow;
}
</style>
</head>
<body>
<form>
<p><input type="text" placeholder="Họ:"></p>
<p><input type="text" placeholder="Tên:" required></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>– Trường hợp :optional thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính required.
– Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu không bị thiết lập thuộc tính required.
<!DOCTYPE html>
<html>
<head>
<style>
:optional{
background-color:yellow;
}
</style>
</head>
<body>
<form>
<p><input type="text" placeholder="Họ:"></p>
<p><input type="text" placeholder="Tên:" required></p>
</form>
</body>
</html>– Trường hợp :disabled thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính disabled.
– Lưu ý: Đối với những phần tử bị thiết lập thuộc tính disabled thì chúng sẽ bị vô hiệu hóa việc thao tác, điển hình như:
- Nếu textfield bị vô hiệu hóa thì chúng ta không thể nhập liệu.
- Nếu radio bị vô hiệu hóa thì chúng ta không thể check vào.
- Nếu option bị vô hiệu hóa thì không thể chọn được.
- . . . .
– Ví dụ: Thiết lập đường viền màu đỏ cho những phần tử bị thiết lập thuộc tính disabled.
<!DOCTYPE html>
<html>
<head>
<style>
:disabled{
border:3px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
</html>– Trường hợp :enabled thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính disabled.
– Ví dụ: Thiết lập đường viền màu đỏ cho những phần tử biểu mẫu không bị thiết lập thuộc tính disabled.
<!DOCTYPE html>
<html>
<head>
<style>
:enabled{
border:3px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
</html>– Trường hợp :only-child xảy ra khi phần tử là phần tử con duy nhất.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử con duy nhất.
<!DOCTYPE html>
<html>
<head>
<style>
body :only-child{
border:2px solid red;
}
</style>
</head>
<body>
<div>
<span>Tài liệu học HTML miễn phí</span>
</div>
<h1>Tài liệu học <i>CSS</i> miễn phí</h1>
<div>
<p>Tài liệu học JavaScript miễn phí</p>
<p>Tài liệu học MySQL miễn phí</p>
<div>
<h2>Tài liệu học <u>PHP</u> miễn phí</h2>
</div>
</div>
</body>
</html>– Trường hợp :first-child xảy ra khi phần tử là phần tử con đầu tiên.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử con đầu tiên.
<!DOCTYPE html>
<html>
<head>
<style>
body :first-child{
border:2px solid red;
}
</style>
</head>
<body>
<i>Tài liệu học Lập Trình Web miễn phí</i>
<h1>Tài liệu học <u>CSS</u> miễn phí</h1>
<div>
<p>Tài liệu học JavaScript miễn phí</p>
<p>Tài liệu học MySQL miễn phí</p>
<div>
<b>Tài liệu học PHP miễn phí</b>
</div>
</div>
</body>
</html>– Trường hợp :last-child xảy ra khi phần tử là phần tử con cuối cùng.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử con cuối cùng.
<!DOCTYPE html>
<html>
<head>
<style>
body :last-child{
border:2px solid red;
}
</style>
</head>
<body>
<h2>Tài liệu học <u>HTML</u> miễn phí</h2>
<div>
<div>
<b>Tài liệu học CSS miễn phí</b>
</div>
<p>Tài liệu học JavaScript miễn phí</p>
<p>Tài liệu học MySQL miễn phí</p>
</div>
<p>Tài liệu học PHP miễn phí</p>
<i>Tài liệu học Lập Trình Web miễn phí</i>
</body>
</html>– Trường hợp :nth-child(n) xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ trên xuống dưới)
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử con thứ 2 (được xác định theo thứ tự từ trên xuống dưới)
<!DOCTYPE html>
<html>
<head>
<style>
body :nth-child(2){
border:2px solid red;
}
</style>
</head>
<body>
<h1>Tài liệu học HTML miễn phí</h1>
<p>Tài liệu học CSS miễn phí</p>
<h1>Tài liệu học JavaScript miễn phí</h1>
<div>
<p>Tài liệu học MySQL miễn phí</p>
<i>Tài liệu học PHP miễn phí</i>
</div>
<h1>Tài liệu học <i>Lập Trình</i> <b>miễn phí</b></h1>
</body>
</html>– Trường hợp :nth-last-child(n) xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ dưới lên trên)
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử con thứ 2 (được xác định theo thứ tự từ dưới lên trên)
<!DOCTYPE html>
<html>
<head>
<style>
body :nth-last-child(2){
border:2px solid red;
}
</style>
</head>
<body>
<div>
<i>Tài liệu học HTML miễn phí</i>
<p>Tài liệu học CSS miễn phí</p>
</div>
<h1>Tài liệu học JavaScript miễn phí</h1>
<p>Tài liệu học MySQL miễn phí</p>
<p>Tài liệu học PHP miễn phí</p>
<h1>Tài liệu học <i>Lập Trình</i> <b>miễn phí</b></h1>
</body>
</html>– Trường hợp :only-of-type xảy ra khi phần tử không có bất kỳ một phần tử anh em nào có cùng kiểu thẻ (tag) với nó.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này không có bất kỳ một phần tử anh em nào có cùng kiểu thẻ với nó.
<!DOCTYPE html>
<html>
<head>
<style>
body :only-of-type{
border:2px solid red;
}
</style>
</head>
<body>
<div>
<h1>Tài liệu học HTML miễn phí</h1>
<p>Tài liệu học CSS miễn phí</p>
<p>Tài liệu học JavaScript miễn phí</p>
</div>
<h1>Tài liệu học MySQL miễn phí</h1>
<p>Tài liệu học PHP miễn phí</p>
<p>Tài liệu học jQuery miễn phí</p>
<div>Tài liệu học <i>Lập Trình</i> <b>miễn phí</b></div>
</body>
</html>– Trường hợp :first-of-type xảy ra khi phần tử là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ.
<!DOCTYPE html>
<html>
<head>
<style>
body :first-of-type{
border:2px solid red;
}
</style>
</head>
<body>
<div>
<p>Tài liệu học HTML miễn phí</p>
<p>Tài liệu học CSS miễn phí</p>
<p>Tài liệu học JavaScript miễn phí</p>
</div>
<div>Tài liệu học Lập Trình Web miễn phí</div>
<p>Tài <i>liệu</i> học MySQL <i>miễn phí</i></p>
<span>Tài liệu học PHP miễn phí</span>
<span>Tài liệu học jQuery miễn phí</span>
</body>
</html>– Trường hợp :last-of-type xảy ra khi phần tử là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ.
<!DOCTYPE html>
<html>
<head>
<style>
body :last-of-type{
border:2px solid red;
}
</style>
</head>
<body>
<p>Tài <i>liệu</i> học MySQL <i>miễn phí</i></p>
<div>
<p>Tài liệu học HTML miễn phí</p>
<p>Tài liệu học CSS miễn phí</p>
<p>Tài liệu học JavaScript miễn phí</p>
</div>
<div>Tài liệu học Lập Trình Web miễn phí</div>
<span>Tài liệu học PHP miễn phí</span>
<span>Tài liệu học jQuery miễn phí</span>
</body>
</html>– Trường hợp :nth-of-type(n) xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ trên xuống dưới) trong số các phần tử anh em có cùng kiểu thẻ.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử được khai báo thứ 2 (theo thứ tự từ trên xuống dưới) trong số các phần tử anh em có cùng kiểu thẻ.
<!DOCTYPE html>
<html>
<head>
<style>
body :nth-of-type(2){
border:2px solid red;
}
</style>
</head>
<body>
<p>- Tài liệu học Lập Trình Web 01</p>
<div>- Tài liệu học Lập Trình Web 02</div>
<span>- Tài liệu học Lập Trình Web 03</span>
<p>- Tài liệu học Lập Trình Web 04</p>
<p>- Tài liệu học Lập Trình Web 05</p>
<p>- Tài liệu học Lập Trình Web 06</p>
<div>- Tài liệu học Lập Trình Web 07</div>
<p>- Tài liệu học Lập Trình Web 08</p>
<p>- Tài liệu học Lập Trình Web 09</p>
</body>
</html>– Trường hợp :nth-last-of-type(n) xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ dưới lên trên) trong số các phần tử anh em có cùng kiểu thẻ.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của <body> với điều kiện những phần tử này phải là phần tử được khai báo thứ 2 (theo thứ tự từ dưới lên trên) trong số các phần tử anh em có cùng kiểu thẻ.
<!DOCTYPE html>
<html>
<head>
<style>
body :nth-last-of-type(2){
border:2px solid red;
}
</style>
</head>
<body>
<p>- Tài liệu học Lập Trình Web 01</p>
<div>- Tài liệu học Lập Trình Web 02</div>
<span>- Tài liệu học Lập Trình Web 03</span>
<p>- Tài liệu học Lập Trình Web 04</p>
<p>- Tài liệu học Lập Trình Web 05</p>
<p>- Tài liệu học Lập Trình Web 06</p>
<div>- Tài liệu học Lập Trình Web 07</div>
<p>- Tài liệu học Lập Trình Web 08</p>
<p>- Tài liệu học Lập Trình Web 09</p>
</body>
</html>– Trường hợp :not(selector) xảy ra khi phần tử không phải là phần tử nằm trong số các phần tử được xác định bởi bộ chọn selector.
– Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử không phải là phần tử #test.
<!DOCTYPE html>
<html>
<head>
<style>
:not(#test){
border:2px solid red;
}
</style>
</head>
<body>
<h1 id="test">Tài liệu học HTML miễn phí</h1>
<p>Tài liệu học MySQL miễn phí</p>
<p>Tài liệu học PHP miễn phí</p>
</body>
</html>
