CSS Selectors

Selector	Example	Description
*	*	Chọn tất cả các thẻ
#id	#container	Chọn tất cả các thẻ có id="container"
.class	.container	Chọn tất cả các thẻ có class="container"
X	a	Chọn tất cả các thẻ a
[attribute]	[href]	Chọn tất cả các thẻ có attribute href
[attribute="value"]	[href="index.html"]	Chọn tất cả các thẻ có attribute href="index.html"
[attribute|="value"]	[href|="http"]	Chọn tất cả các thẻ có thuộc tính ="http" hoặc bắt đầu bằng http
XY	div.container	Chọn tất cả các thẻ div có class="container"
X Y	li a	[descendant selector] Chọn tất cả các thẻ a nằm trong thẻ li
X, Y	div, h2	Chọn tất cả các thẻ div và h2
X *	div *	Chọn tất cả các thẻ con của div
X + Y	ul + p	[adjacent selector] Chọn thẻ p liền kề ngay sau thẻ ul
X ~ Y	ul ~ p	Chọn tất cả thẻ p sau thẻ ul
X > Y	ul > p	Chọn thẻ p là con trực tiếp của thẻ ul
X:hover	div:hover	CSS sẽ có hiệu lực khi hover vào nó
X:focus	div:focus	Selects the input element which has focus
X:checked	input[type=radio]:checked	Chỉ áp dụng với thẻ input với type radio và checkbox
X:link	a:link	Chọn tất cả các thẻ a chưa được click
X:visited	a:visited	Chọn tất cả các thẻ a đã được click
X:not(Y)	*:not(p)	Chọn tất cả các thẻ không phải p
X:first-child	div:first-child	Chọn phần tử đầu tiên trong thẻ div
X:last-child	div:last-child	Chọn phần tử cuối cùng trong thẻ div
X:first-of-type	ul:first-of-type	Lấy tất cả các thẻ có kiểu đầu tiên trong thẻ ul. VD: trong thẻ ul có 3 thẻ a a div, thì thẻ a đầu tiên và thẻ div sẽ được áp dụng css
X:last-of-type	ul:last-of-type	Lấy tất cả các thẻ có kiểu cuối cùng trong thẻ ul. VD: trong thẻ ul có 3 thẻ a a div, thì thẻ a thứ 2 và thẻ div sẽ được áp dụng css
X:nth-of-type(n)	li div:nth-of-type(3)	Chọn kiểu thành phần con thứ "n" trong cha.
X:nth-child(n)	li:nth-child(3)	Chọn thành phần con thứ "n" trong thành phần cha. Chọn thẻ thứ 3 từ trên xuống (đếm từ 1) trong thẻ li
X:nth-last-child(n)	li:nth-last-child(3)	Chọn thẻ thứ 3 từ dưới lên (đếm từ 1) trong thẻ li
X:only-child	ul > li:only-child	Chọn những thành phần con là con duy nhất trong cha nó (cha chỉ có 1 con).
X:only-of-type	ul > li:only-of-type	Chọn các thành phần con là kiểu duy nhất trong cha nó (cha có nhiều loại con, chọn những đứa con là kiểu duy nhất). Áp dụng css cho li thuộc ul chỉ chứa duy nhất 1 li
X::pseudoElement	p::first-line	Chọn dòng đầu tiên
	p::first-letter	Chọn ký tự đầu tiên
	p::before	Trước p
	p::after	Sau p
X[attribute]	a[title]	[attributes selector] Lấy tất cả các thẻ a có thuộc tính title
X[attribute="value"]	a[href="index.html"]	[attributes selector] Lấy tất cả thẻ a có thuộc tính href="index.html"
X[attribute*="value"]	a[href*="index"]	[attributes selector] Lấy tất cả thẻ a có chứa từ index trong value của thuộc tính href
X[attribute^="value"]	a[href^="http"	[attributes selector] Lấy tất cả thẻ a có thuộc tính href bắt đầu bằng http
X[attribute$="value"]	a[href$=".jpg"	[attributes selector] Lấy tất cả thẻ a có thuộc tính href kết thúc bằng .jpg

Phân biệt đơn giản một số Pesudo-class hay gây nhầm lẫn trong CSS

Các Selectors khác W3School

Độ ưu tiên trong CSS Selector

Ưu tiên theo thứ tự, CSS được add bên dưới sẽ override CSS bên trên. CSS Inline sẽ override CSS Internal, External.

1. inline - 1000

2. #id - 100

3. .class - 10

4. tag - 1