Cafedev chia sẻ cho ace về thuộc tính Selectors trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Tạo kiểu cho các phần tử HTML với các thuộc tính cụ thể
Có thể tạo kiểu cho các phần tử HTML có các thuộc tính hoặc giá trị thuộc tính cụ thể.
Nội dung chính
1. CSS [attribute] Selector
ộ chọn [attribute] được sử dụng để chọn các phần tử có thuộc tính được chỉ định.
Ví dụ sau chọn tất cả phần tử < a > có thuộc tính đích:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://cafedev.vn">cafedev.vn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>2. CSS [attribute=”value”] Selector
Bộ chọn [attribute = “value”] được sử dụng để chọn các phần tử có thuộc tính và giá trị được chỉ định.
Ví dụ sau chọn tất cả phần tử < a >có thuộc tính target = “_ blank”:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://cafedev.vn">cafedev.vn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
3. CSS [attribute~=”value”] Selector
Bộ chọn [attribute ~ = “value”] được sử dụng để chọn các phần tử có giá trị thuộc tính chứa một từ được chỉ định.
Ví dụ sau chọn tất cả các phần tử có thuộc tính title chứa danh sách các từ được phân tách bằng dấu cách, một trong số đó là “flower”:
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
4. CSS [attribute|=”value”] Selector
Bộ chọn [attribute | = “value”] được sử dụng để chọn các phần tử có thuộc tính được chỉ định bắt đầu bằng giá trị được chỉ định.
Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng “top”:
Lưu ý: Giá trị phải là một từ nguyên vẹn, như class = “top” hoặc theo sau là dấu gạch ngang (-), như class = “top-text”!
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>5. CSS [attribute^=”value”] Selector
Bộ chọn [attribute ^ = “value”] được sử dụng để chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị được chỉ định.
Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng “top”:
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>6. CSS [attribute$=”value”] Selector
Bộ chọn [attribute$ = “value”] được sử dụng để chọn các phần tử có giá trị thuộc tính kết thúc bằng một giá trị được chỉ định.
Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp kết thúc bằng “test”:
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>7. CSS [attribute*=”value”] Selector
Bộ chọn [attribute * = “value”] được sử dụng để chọn các phần tử có giá trị thuộc tính chứa một giá trị được chỉ định.
Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp có chứa “te”:
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
