Thẻ với class đã định trong CSS
Giả sử chúng ta có hai loại thẻ với cùng
class. Ví dụ, giả sử cả tiêu đề h2,
và đoạn văn đều có cùng một class:
<h2 class="eee">Tiêu đề</h2>
<p class="eee">
văn bản
</p>
<h2 class="eee">Tiêu đề</h2>
<p class="eee">
văn bản
</p>
Chúng ta có thể, ví dụ, tô màu tất cả các phần tử có class đó thành màu đỏ:
.eee {
color: red;
}
Tuy nhiên, có thể nhắm mục tiêu đến một thẻ cụ thể
với class. Ví dụ, có thể chọn tất cả h2
với class eee và chọn riêng tất cả
p với class này.
Để làm điều này, trong bộ chọn cần viết tên
thẻ, sau đó viết liền tên class. Hãy,
ví dụ, tô màu h2 với class của chúng ta
thành màu đỏ, còn các đoạn văn với class đó
- thành màu xanh lá:
h2.eee {
color: red;
}
p.eee {
color: green;
}
Cho đoạn code sau:
<h2 class="header">văn bản</h2>
<h2 class="header">văn bản</h2>
<h3 class="header">văn bản</h3>
<h3 class="header">văn bản</h3>
.header {
color: red;
}
Hãy làm cho tất cả h2 với class header
có kích thước 40px, còn tất cả h3 với
class này - có kích thước 30px.
