Nếu các bạn đã biết đến một số Selectors cơ bản như id
, calss
hay các Selectors descendant
và chỉ sử dụng chúng? Vậy thì các bạn đang bỏ lỡ một mức độ linh hoạt khi viết CSS cực kỳ lớn.
Rất nhiều các Selectors được đề cập trong bài viết này là một phần của CSS3. Do đó, nó chỉ chạy được trên các trình duyệt hiện đại có hỗ trợ. Nhưng bạn cần phải ghi nhớ những bộ chọn sau đây để giúp công việc được hiệu quả hơn.
Các Selectors cơ bản
Đầu tiên chúng ta sẽ tìm hiểu các Selectors trước. Sau đó sẽ tiến hành đi tới các Selectors nâng cao hơn nhé!
*
* {
margin: 0;
padding: 0;
}
Ký tự *
sẽ nhắm chọn mọi phần tử trên trang. Nhiều nhà phát triển sẽ sử dụng thủ thuật này để loại bỏ margin
và padding
. Mặc dù đây là một công cụ để test rất nhanh. Nhưng tôi khuyên bạn đừng bao giờ sử dụng nó trong code của sản phẩm hoàn thiện. Nó thêm quá nhiều gánh nặng cho trình duyệt gây load trang chậm và không cần thiết.
Selectors *
cũng có thể được sử dụng với các Selectors con.
#container * {
border: 1px solid black;
}
Ví dụ trên sẽ chọn tất cả các Selectors con của div
#container
. Mình muốn nhắc lại thêm một lần nữa, đừng lạm dụng kỹ thuật này quá nhiều nếu không muốn nói là đừng bao giờ.
Các trình duyệt hỗ trợ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
#X
#container {
width: 960px;
margin: auto;
}
Khi thêm dấu “#” vào trước selector, chúng ta có thể nhắm chọn bằng id
. Đây là một cách sử dụng selector rất dễ dàng và phổ biến nhất. Tuy nhiên, hãy cẩn thận khi sử dụng selector theo id
.
Hãy tự hỏi: Tôi có cần phải áp dụng một id
cho phần tử này để chọn nó không?
Id
selector là cố định và không cho phép tái sử dụng. Vậy nên trước tiên bạn hãy thử sử dụng một tag name, một phần tử HTML5 hoặc thậm chí là một lớp giả.
Các trình duyệt hỗ trợ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
.X
.error {
color: red;
}
Đây là một Selector chọn class
. Sự khác nhau giữa id
và class
đó là:
- Với
class
bạn có thể chọn nhiều phần tử. Sử dụng cácclass
khi bạn muốn phong cách của bạn được áp dụng cho một nhóm các phần tử. - Ngược lại
id
thường được sử dụng để tìm một phần tử duy nhất và chỉ định phong cách cho phần tử cụ thể đó.
Các trình duyệt hỗ trợ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
X
a {
color: red;
}
ul {
margin-left: 0;
}
Điều gì xảy ra nếu bạn muốn nhắm chọn tất cả các phần tử trên một trang. Vấn đề là cần phải nhắm chọn theo type
của chúng, chứ không phải là một id
hoặc class
? Rất đơn giản, chỉ cần sử dụng selector theo type
. Nếu bạn cần nhắm chọn tất cả các danh sách không có thứ tự, hãy sử dụng ul {}
.
Demo trực tiếp các Selectors cơ bản
Các bộ Selectors kết hợp (Combinator Selectors)
X Y
li a {
text-decoration: none;
}
Bộ chọn được nhắc đến nhiều nhất tiếp theo là chọn descendant
(phần tử con). Khi bạn cần cụ thể hơn với các Selectors của bạn, thì bạn hãy sử dụng cái này. Ví dụ thay vì nhắm chọn tất cả các thẻ liên kết, thì bạn chỉ cần nhắm chọn các liên kết mà nằm trong một danh sách có thứ tự. Đặc biệt khi bạn muốn sử dụng một Selectors với các phần tử con.
Lưu ý: Nếu selectors của bạn viết dạng như
X Y Z A B.error
. Thì bạn đang làm sai rồi đấy. Hãy luôn luôn tự hỏi mình có nhất thiết phải sử dụng tất cả chúng hay không.
Các trình duyệt hỗ trợ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
X + Y
ul + p {
color: red;
}
Đây được gọi là một selector liền kề. Nó sẽ chỉ chọn các phần tử mà nằm ngay sau phần tử trước đó. Trong trường hợp này, chỉ có đoạn văn đầu tiên sau mỗi ul
sẽ có chữ màu đỏ.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X > Y
div#container > ul {
border: 1px solid black;
}
Sự khác biệt giữa X Y
tiêu chuẩn và X > Y
đó là cái sau sẽ chỉ chọn phần tử con Y
trực tiếp từ trong phần tử X
, Nếu có 1 Y
khác ở trong Y
thì nó sẽ không chọn. Ví dụ, hãy xem đoạn code dưới đây:
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
Nếu bạn viết CSS là div#container > ul
thì nó sẽ chỉ nhắm đến các ul
là phần tử con của div
có id="container"
. Nó sẽ không nhắm chọn ul
là phần tử con của li
đầu tiên.
Vì lý do này, có những lợi ích về hiệu năng trong việc sử dụng các child combinator. Trong thực tế, nó được khuyến khích sử dụng đặc biệt là khi làm việc với các công cụ chọn CSS dựa trên JavaScript.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Safari
X ~ Y
ul ~ p {
color: red;
}
Combinator Selectors này là tương tự như X + Y
. Tuy nhiên, nó mở rộng hơn. Trong khi ul + p
sẽ chỉ chọn phần tử p
đầu tiên ngay sau ul
đó thì ul ~ p
lại tổng quát hơn. Nó sẽ chọn tất cả các phần tử p
miễn là chúng nó nằm trong một ul
.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Chrome
- Opera
Demo trực tiếp các bộ Selectors kết hợp (Combinator Selectors)
Các Selectors thuộc tính (Attribute Selectors)
X[title]
a[title] {
color: green;
}
Đây là một Selectors thuộc tính title
. Trong ví dụ trên, dòng CSS này sẽ chỉ chọn các thẻ a
có một thuộc tính title
. Các thẻ a
không có thuộc tính title
sẽ không hoạt động với đoạn CSS này. Tuy nhiên, nếu bạn cần phải cụ thể hơn thì hãy xem ví dụ tiếp theo.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href="foo"]
a[href="https://ntha.icu"] {
color: #83b348; /* Envato green */
}
Đoạn CSS ở trên sẽ chỉ định frontend cho tất cả các thẻ a
liên kết đến link https://ntha.icu. Chúng sẽ nhận được màu xanh và tất cả các thẻ a
khác sẽ không bị ảnh hưởng.
Lưu ý: Giá trị
https://ntha.icu
bắt bộc phải ở trong dấu ngoặc kép. Hãy nhớ làm vậy khi sử dụng một selectors CSS dựa trên JavaScript. Luôn ưu tiên sử dụng các selectors CSS3 thay vì các phương pháp không chính thức khác.
X[href="foo"]
hoạt động rất tốt. Nhưng nếu các bạn muốn CSS chỉ định tới cả sub Doamin hay bất kỳ một liên kết nào có ntha.icu
mà không cụ thể chỉ định 1 giá trị duy nhất nào? Trong trường hợp đó anh em có thể sử dụng một chút biểu thức chính quy.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href*="foo"]
a[href*="ntha"] {
color: #83b348; /* Envato green */
}
Vấn đề mình mới đề cập bên trên sẽ được giải quyết với đoạn CSS này. *
chỉ định rằng cứ thẻ a
nào trong ""
có ntha
thì là sẽ nhắm chọn là set frontend cho thẻ a
đó. Tất cả các thẻ a
khác không có ntha
trong ""
thì sẽ không được chọn. Bằng cách này, chúng ta có thể bao hàm cả ntha.icu, sub.ntha.icu, và thậm chí nthaface.com,…
Hãy nhớ rằng đây là một selectors rộng. Ví dụ nếu các bạn muốn chọn một thẻ a liên kết đến một website khác không phải NTHa
và không có ntha trong url? Bạn có thể kết hợp sử dụng ^
và $
để tham chiếu bắt đầu và kết thúc một chuỗi.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Có nột số website hiển thị một biểu tượng nhỏ bên cạnh các link dẫn ra ngoài website. Việc này khá thú vị, nó giúp người đọc biết đó là một liên kết tới 1 website hoàn toàn khác.
Thực hiện điều này rất dễ dàng với ký hiệu ^
. Nó thường được sử dụng trong biểu thức chính quy để chỉ ra đầu một chuỗi. Nếu chúng ta muốn chỉ định tất cả các thẻ a
có href
bắt đầu với http
, chúng ta có thể sử dụng một selector tương tự như mẫu trên.
Lưu ý: Mẫu bên trên không tìm kiếm
https://
và cũng không tính luôn các url bắt đầu bằnghttps://
.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
Nếu chúng ta muốn viết CSS cho tất cả các thẻ a
mà liên kết tới một bức ảnh thì sao nhỉ? Trong những trường hợp đó hãy xem tiếp bên dưới nhé!
X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
Với ký tự $
chúng ta sẽ tham chiếu đến phần cuối của một chuỗi. Trong trường hợp này, chúng ta đang tìm kiếm tất cả các thẻ a
có liên kết là một hình ảnh .jpg
. Nói chung cứ url kết thúc bằng .jpg thì đoạn CSS trên sẽ hoạt động. À, nó không hoạt động với gif và png đâu. Nếu muốn thì thử dùng đoạn CSS này:
a[href$=".gif"],
a[href$=".png"],
a[href$=".jpg"] {
color: red;
}
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[data-*="foo"]
a[data-filetype="image"] {
color: red;
}
Như bên trên mình vừa ví dụ một cách cực kỳ cơ bản để bổ sung các định dạng hình ảnh khác như png
jpeg
jpg
gif
. Thôi viết lại cho anh em dễ nhìn:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Chúng ta có thể dùng cách này nhưng chỉ nên dùng đối với số lượng ít định dạng hình ảnh. Làm như thế rất chậm, và không hiệu quả. Một giải pháp khác là sử dụng thuộc tính data-filetype
riêng. Cứ là hình ảnh là CSS hoạt động. Chúng ta sẽ cần chỉnh cả HTML như sau:
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Sau đó, viết CSS để chỉ nhắm chọn những liên kết đó:
a[data-filetype="image"] {
color: red;
}
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X[foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Dưới đây là một cái đặc biệt để sẽ gây ấn tượng với người đọc bài viết của bạn. Không quá nhiều người biết về thủ thuật này. Biểu tượng ~
cho phép chúng ta nhắm chọn một thuộc tính trong đó có một danh sách các giá trị được phân chia bởi khoảng trắng.
Bên trên là text gốc được dịch. Giải thích dễ hiểu thì thuộc tính data-info
sẽ chưa nhiều hơn 1 giá trị và được phân cách bởi một khoảng trắng:
"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
Với ví dụ trên. Dùng ký tự ~
sẽ có thể nhắn chọn 1 trong 2 giá trị external
hoặc image
. Thực sự nó có tác dụng như thế nào thì phải tùy vào mục đích của người sử dụng. Nhưng mình có thể kết hợp và tùy biến linh hoạt hơn data-filetype
.
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
Demo trực tiếp các Selectors thuộc tính (Attribute Selectors)
Các Selectors tùy chọn (Pseudo Selectors)
Pseudo Selectors là các chỉ số CSS đặc biệt mà cho phép bạn chọn và tùy chỉnh các phần tử dựa trên trạng thái hoặc vị trí của chúng trong tài liệu. Ví dụ, bạn có thể sử dụng pseudo selector :hover để chỉ định một kiểu dành cho các phần tử khi con trỏ chuột đang chỉ vào chúng. Nguồn: ChatGPT
X:visited và X:link
a:link { color: red; }
a:visited { color: purple; }
Chúng ta sử dụng lớp giả :link
để nhắm chọn tất cả các thẻ a
vẫn chưa được click vào. Lớp giả :visited
thì lại cho phép chúng ta áp dụng phong cách cụ thể đến các thẻ a
trên trang đã được click vào hoặc đã truy cập.
Các trình duyệt hỗ trợ
- IE7+
- Chrome
- Safari
- Opera
X:checked
input[type=radio]:checked {
border: 1px solid black;
}
Đơn giản là lớp giả này sẽ chỉ nhắm chọn một phần tử trên giao diện người dùng đã được tích chọn. Giống như kiểu một checkbox vậy. Thế thôi!
Các trình duyệt hỗ trợ
- IE9+
- Firefox
- Chrome
- Safari
- Opera
X:after
Các lớp giả before
và after
chỉ đơn giản là tạo ra một nội dung xung quanh thành phần được chọn. Nó rất hiệu quả và được ưa chuộng trong cộng đồng. Gần như ai cũng biết và dùng nó.
Nhiều người biết đến các lớp này khi họ gặp vấn đề về clear-fix.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Đoạn CSS trên sử dụng lớp giả :after
để nối thêm một khoảng trắng phía sau phần tử .clearfix
và clear nó. Đây là một mẹo tuyệt vời mà bạn cần phải biết, đặc biệt là trong các trường hợp khi overflow:hidden;
không hoạt động.
Theo đặc điểm của các selectors CSS3. Về mặt kỹ thuật bạn nên sử dụng các cú pháp phần tử giả với hai dấu hai chấm ::
. Tuy nhiên, để duy trì tính tương thích, user-agent
vẫn sẽ chấp nhận sử dụng một dấu hai chấm. Trong thực tế, vào thời điểm này, tốt hơn là nên sử dụng phiên bản một dấu hai chấm trong các dự án của bạn.
Các trình duyệt hỗ trợ
- IE8+
- Firefox
- Chrome
- Safari
- Opera
X:hover
div:hover {
background: #e3e3e3;
}
Bạn muốn áp dụng phong cách cụ thể khi người dùng di chuyển chuột qua một phần tử? :hover
sẽ giúp bạn hoàn thành việc này! Thuât ngữ để gọi nó là user action pseudo class
.
Hãy nhớ rằng phiên bản cũ của Internet Explorer không phản hồi khi lớp giả :hover
được áp dụng cho bất cứ thứ gì khác ngoài một thẻ a
.
Đây thực sự là một selector rất thú vị là hữu ích. Ví dụ bạn muốn border-bottom
vào thẻ a
khi di chuyển chuột qua:
a:hover {
border-bottom: 1px solid black;
}
Mẹo: Hãy sử dụng border-bottom: 1px solid black;
thay vì dùng text-decoration: underline;
.
Các trình duyệt hỗ trợ
- IE6 + (Trong IE6, :hover chỉ được áp dụng cho một thẻ
a
) - Firefox
- Chrome
- Safari
- Opera
X:not(selector)
div:not(#container) {
color: blue;
}
Giả sử rằng tôi muốn chọn tất cả các thẻ div
ngoại trừ một thẻ trong đó có id
là container
. Đoạn code ở trên sẽ xử lý nhiệm vụ đó một cách hoàn hảo.
Hoặc nếu tôi muốn chọn tất cả các phần tử (không khuyên dùng), trừ các thẻ p
, chúng ta có thể làm như sau:
*:not(p) {
color: green;
}
Các trình duyệt hỗ trợ
- IE9+
- Firefox
- Chrome
- Safari
- Opera
X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Chúng ta có thể sử dụng các pseudo elements (phần tử giả được chỉ định bởi ::
) để định phong cách cho các mảnh của elements. Chẳng hạn như dòng đầu tiên hoặc chữ cái đầu tiên. Hãy nhớ rằng phải áp dụng vào các phần tử cấp độ khối thì mới 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 code này là một ví dụ cho việc tìm tất cả các đoạn văn bản trên website. Sau đó chỉ chọn chữ cái đầu tiên của văn bản đó. Điều này thường được sử dụng để tạo ra phong cách giống với báo chí.
Chọn dòn đầ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
sẽ chỉ định phong cách dòng đầu tiên của văn bản.
Đối với stylesheet hiện có, user-agent chỉ 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 phù hợp cho các phần tử giả mới được giới thiệu bên trên.
Các trình duyệt hỗ trợ
- IE6+
- Firefox
- Chrome
- Safari
- Opera
Demo trực tiếp các Selectors tùy chọn (Pseudo Selectors)
Nth Child và Type Selectors
X:nth-child(n)
li:nth-child(3) {
color: red;
}
Nếu bạn không có cách nào để chọn các phần tử cụ thể trong một ul
hay là một cái gì đó đại loại thế thì lớp giả nth-child
sẽ giải quyết điều đó!
Tuy nhiên nth-child
chỉ nhận một số nguyên làm tham số. Nó không nhận số 0 là chỉ số đầu tiên. Ví dụ nếu bạn muốn chọn phần tử danh sách thứ hai thì sử dụng li:nth-child(2)
.
Chúng ta thậm chí có thể sử dụng nó để chọn một tập hợp các phần tử con. Ví dụ, li:nth-child(4n)
sẽ chọn tất cả các thành phần sau li
thứ 4.
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Giống với bên trên nhưng lần này nó sẽ tính từ dưới lên. Ví dụ bạn có một danh sách rất lớn các phần tử trong một ul
. Để chọn phần tử thứ 2 từ dưới lên bạn thường dùng li:nth-child(397)
. Thay vì ngồi đếm xem nó là hàng thứ mấy thì bạn chỉ cần viết nth-last-child(2)
là xong.
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
Đôi khi thay vì sử dụng một child
bạn sẽ cần phải sử dụng type
của một phần tử.
Hãy tưởng tượng mã đánh dấu bao gồm năm ul
nhưng lại không có phần tử được bao bên ngoài nó. Nếu bạn muốn chỉ định phong cách cho ul
thứ ba nhưng không có một id
để chọn. Bạn có thể sử dụng lớp giả nth-of-type(n)
. Trong đoạn code ở trên, chỉ ul
thứ ba mới có một đường viền xung quanh nó.
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Giống bên trên nhưng nth-last-of-type
sẽ chọn phần tử từ dưới lên như nth-last-child
vậy.
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:first-child
ul li:first-child {
border-top: none;
}
first-child
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
khỏi phần tử đầu tiên và cuối cùng.
Ví dụ: giả sử bạn có một danh sách các hàng. Mỗi hàng đều có một border-top
và một border-bottom
. Nhìn nó không được đẹp cho lắm. Nhiều người áp dụng các lớp first
và last
để xử lý việc này. first-child
có tác dụng tương tự và hiệu quả rất tốt.
Các trình duyệt hỗ trợ
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X:last-child
ul > li:last-child {
color: green;
}
Giống như X:first-child
nhưng last-child
sẽ chọn các phần tử từ bên dưới lên.
Ví dụ về các sử dụng last-child
Chúng ta sẽ tạo một đoạn mã như bên dưới
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
Đây chỉ là một danh sách đơn giản. Bây giờ chúng ta sẽ sử dụng CSS bên dưới:
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
Phong cách này sẽ thiết lập một background, loại bỏ padding
mặc định trên ul
và áp dụng border
vào từng li
để thêm một chút chiều sâu.
Để thêm chiều sâu cho danh sách của bạn, áp dụng
border-bottom
vào từngli
màu tối hơn màu nền củali
. Tiếp theo, áp dụngborder-top
với một vài sắc thái nhẹ hơn.
Vấn đề duy nhất là border
sẽ không được áp dụng cho phần trên và dưới của danh sách. Hãy sử dụng các lớp giả :first-child
và :last-child
để khắc phục điều này.
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
Các trình duyệt hỗ trợ
- IE9+
- Firefox
- Chrome
- Safari
- Opera
***IE8 hỗ trợ :first-child
nhưng không hỗ trợ :last-child
.
X:only-child
div p:only-child {
color: red;
}
Thành thật mà nói, có thể bạn sẽ thấy rằng bạn không sử dụng lớp giả only-child
thường xuyên. Nhưng nó sinh ra có mục đích của nó và chắc chắn bạn sẽ cần đến nó.
Nó cho phép bạn chọn các phần tử là con duy nhất của phần tử cha. Ví dụ đoạn code ở trên, chỉ có p
đầu tiên và phải là là phần tử con duy nhất của div
thì mới có màu đỏ.
Cùng xem đoạn code bên dưới:
<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, p
của div
thứ hai sẽ không được chọn. Nếu bạn thêm một p
vào div
đầu tiên thì ngay lập tức only-child
sẽ không còn có hiệu lực.
Các trình duyệt hỗ trợ
- IE9+
- Firefox
- Chrome
- Safari
- Opera
X:only-of-type
li:only-of-type {
font-weight: bold;
}
Lớp giả này có thể sử dụng theo một số cách khá linh hoạt. 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
chỉ có một phần tử duy nhất.
Bạn có thể viết CSS cả 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 để giải quyết là dùng only-of-type
.
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
X:first-of-type
Lớp giả first-of-type
cho phép bạn chọn các anh chị em đầu tiên có cùng type.
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 đoạn code sau vào trình soạn thảo 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>
Với đoạn code trên nếu cố gắng tìm cách để chỉ chọn “List Item 2” thì chúng ta cần làm gì?
Giải pháp 1
Có nhiều cách khác nhau để giải quyết vấn đề này. Chúng ta sẽ thử áp dụng một cách khá đơn giản. Hãy bắt đầu bằng việc sử dụng first-of-type
.
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Ý nghĩa của đoạn này: “Tìm danh sách không có thứ tự đầu tiên trên website, sau đó tìm phần tử con ngay sau là danh sách các phần tử. Tiếp theo tìm đến phần tử danh sách thứ hai.”
Giải pháp 2
Một lựa chọn khác là sử dụng selector liền kề.
p + ul li:last-child {
font-weight: bold;
}
Trong trường hợp này, chúng ta sẽ tìm ul
ngay trước thẻ p
và sau đó tìm phần tử con cuối cùng.
Giải pháp 3
Chúng ta có thể làm cho phức tạp hay đơn giản tuỳ ý với các selector.
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 website và sau đó tìm phần tử li
đầu tiên nhưng bắt đầu từ phía dưới!
Các trình duyệt hỗ trợ
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
Demo trực tiếp Nth Child và Type Selectors
Tổng kết
Nếu bạn đang cố hỗ trợ cho các trình duyệt cũ như Internet Explorer 6, thì bạn cần phải cẩn thận khi sử dụng các selector mới. Nhưng đừng để điều đó ngăn cản bạn học các selector mới. Khi làm việc với các thư viện JavaScript như jQuery phổ biến, hãy luôn luôn 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 của trình duyệt thay vì của riêng của nó.
Tác giả: Jeffrey Way