Lựa chọn phần tử theo nhiều lớp trong CSS

Nếu muốn, chúng ta có thể chọn một phần tử đồng thời có hai lớp, mà không ảnh hưởng đến các phần tử chỉ có một trong các lớp này.

Hãy xem xét một ví dụ. Giả sử chúng ta có đoạn mã sau:

<p class="eee">
	This is a paragraph with text.
</p>
<p class="zzz">
	This is a paragraph with text.
</p>
<p class="eee zzz">
	This is a paragraph with text.
</p>

Như bạn thấy, đoạn văn đầu tiên có lớp eee, đoạn văn thứ hai - lớp zzz, còn đoạn văn thứ ba - đồng thời có cả hai lớp này.

Hãy chọn đoạn văn cuối cùng, mà không ảnh hưởng đến những đoạn còn lại. Để làm điều này, chúng ta viết liền tên lớp này với tên lớp kia mà không có dấu cách:

.eee.zzz {
	color: red;
}

Chọn phần tử đồng thời có các lớp eee, zzz và ccc:

<p class="eee">
	This is a paragraph with text.
</p>
<p class="zzz">
	This is a paragraph with text.
</p>
<p class="ccc">
	This is a paragraph with text.
</p>
<p class="eee zzz ccc">
	This is a paragraph with text.
</p>