CSS Selector là gì? Tìm hiểu những CSS Selector cần thiết và cách sử dụng chúng

CSS Selector là một trong những khái niệm cơ bản và quan trọng nhất khi làm việc với CSS. Trong bài viết này, chúng ta sẽ tìm hiểu về CSS Selector, các loại selector phổ biến và cách sử dụng chúng hiệu quả.

CSS Selector là gì?

CSS Selector là cách để chọn và định dạng các phần tử HTML cụ thể trên trang web của bạn. Nó giống như một "địa chỉ" giúp CSS biết được bạn muốn áp dụng style cho phần tử nào.

Bảng tổng hợp các loại CSS Selector

Loại Selector	Cú pháp	Ví dụ	Mô tả
Element	element	p { }	Chọn tất cả các phần tử theo tên thẻ
Class	.class	.highlight { }	Chọn các phần tử có class cụ thể
ID	#id	#header { }	Chọn phần tử có ID cụ thể
Attribute	[attribute]	input[type="text"] { }	Chọn phần tử có thuộc tính cụ thể
Descendant	ancestor descendant	div p { }	Chọn phần tử con bên trong phần tử cha
Child	parent > child	ul > li { }	Chọn phần tử con trực tiếp
Adjacent Sibling	element + element	h2 + p { }	Chọn phần tử ngay sau phần tử khác
General Sibling	element ~ element	h2 ~ p { }	Chọn tất cả phần tử anh em sau
Pseudo-class	:pseudo-class	a:hover { }	Chọn trạng thái đặc biệt của phần tử
Pseudo-element	::pseudo-element	p::first-line { }	Chọn một phần cụ thể của phần tử
Universal	*	* { }	Chọn tất cả các phần tử
Multiple	element, element	h1, h2, h3 { }	Chọn nhiều phần tử cùng lúc
Not	:not(selector)	:not(.highlight) { }	Chọn phần tử không khớp với selector
First/Last Child	:first-child	li:first-child { }	Chọn phần tử con đầu tiên/cuối cùng
Nth Child	:nth-child(n)	li:nth-child(odd) { }	Chọn phần tử con theo thứ tự

Độ ưu tiên (Specificity) của các Selector

Loại Selector	Điểm Specificity
Inline styles	1000
ID	100
Class, Attribute, Pseudo-class	10
Element, Pseudo-element	1