Cách xác định bộ chọn của phần tử trong một số trường hợp đặc biệt (pseudo-class) – 19
– 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ụ: Chúng ta 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.
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:
- :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.
<!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>- :root: Trường hợp này xảy ra khi phần tử là 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>- :empty: Trường hợp này xảy ra khi 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>- :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.
<!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>- :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.
<!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>- :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).
<!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>- :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).
<!DOCTYPE html>
<html>
<head>
<style>
:invalid{
background-color:red;
}
</style>
</head>
<body>
<input type="email" value="dsmart.cop@gmail.com">
<input type="email" value="dsmart">
<input type="number" min="5" max="10" value="7">
<input type="number" min="5" max="10" value="32">
</body>
</html>- :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).
<!DOCTYPE html>
<html>
<head>
<style>
:invalid{
background-color:red;
}
</style>
</head>
<body>
<input type="email" value="dsmart.cop@gmail.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>- :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).
<!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>- :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.
<!DOCTYPE html>
<html>
<head>
<style>
:link{
color:red;
}
</style>
</head>
<body>
<a href="https://dsmart.vn/" target="_blank">Trang chủ</a>
<br>
<a href="https://dsmart.vn/gioi-thieu" target="_blank">Giới thiệu</a>
<br>
<a href="https://dsmart.vn/thiet-ke-website-gia-re" target="_blank">Dịch vụ</a>
</body>
</html>- :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.
<!DOCTYPE html>
<html>
<head>
<style>
:visited{
color:red;
}
</style>
</head>
<body>
<a href="https://dsmart.vn/" target="_blank">Trang chủ</a>
<br>
<a href=https://dsmart.vn/gioi-thieu" target="_blank">Giới thiệu</a>
<br>
<a href=https://dsmart.vn/gioi-thieu" target="_blank">Dịch vụ</a>
</body>
</html>- :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.
<!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>- :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.
<!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>- :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.
<!DOCTYPE html>
<html>
<head>
<style>
:disabled{
border:3px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
</html>- :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.
<!DOCTYPE html>
<html>
<head>
<style>
:enabled{
border:3px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
</html>- :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ả).
<!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>- :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).
<!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>- :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).
<!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>- :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).
<!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>- :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).
<!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>- :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ó.
<!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>- :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ó).
<!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>- :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ó).
<!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>- :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ẻ.
<!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>- :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ẻ.
<!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>- :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.
<!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>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:
- 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:
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
– 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ẻ.
Ví dụ:
– 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>
