Hướng dẫn chọn trong css

Trong CSS, các bộ chọn ( selectors) là các qui ước được sử dụng trong CSS để định kiểu cho các phần tử (các thẻ) trên trang web.

Dưới đây là các cột “CSS” đưa ra các phiên bản thuộc tính khác nhau của CSS (CSS1, CSS2, hoặc CSS3).

Bộ chọn	Ví dụ	Mô tả các ví dụ	CSS
.class	.intro	Chọn tất cả các phần tử có class=”intro”	1
#id	#firstname	Chọn tất cả các phần tử có id=”firstname”	1
*	*	Chọn tất cả các phần tử	2
element	p	Chọn tất cả các phần tử	1
element,element	div, p	Chọn tất cả các phần tử và phần tử	1
element element	div p	Chọn tất cả các phần tử và bên trong phần tử	1
element>element	div > p	Chọn tất cả các phần tử có phần tử cha là	2
element+element	div + p	Chọn tất cả các phần tử được đặt phía sau phần tử	2
element1~element2	p ~ ul	Chọn tất cả các phần tử được đặt trước bởi một phần tử	3
[attribute]	[target]	Chọn tất cả các phần tử có cùng thuộc tính	2
[attribute=value]	[target=_blank]	Chọn tất cả các phần tử có thuộc tính bằng giá trị( target=”_blank”)	2
[attribute~=value]	[title~=flower]	Chọn tất cả các phần tử có tiêu đề của thuộc tính có chứa từ “flower”	2
[attribute\|=value]	[lang\|=en]	Chọn tất cả các phần tử có giá trị thuộc tính “lang” bắt đầu bằng “en”	2
[attribute^=value]	a[href^=”https”]	Chọn tất cả các phần tử có giá trị thuộc tính “href” bắt đầu bằng “https”	3
[attribute$=value]	a[href$=”.pdf”]	Chọn tất cả các phần tử có giá trị thuộc tính “href” kết thúc bằng”.pdf”	3
[attribute*=value]	a[href*=”timoday”]	Chọn tất cả các phần tử có giá trị thuộc tính “href” chứa chuỗi”timoday”	3
:active	a:active	Chọn tất cả các liên kết được kích hoạt	1
::after	p::after	Chèn thêm nội dung ngay phía sau của các phần tử	2
::before	p::before	Chèn thêm nội dung ngay phía trước của các phần tử	2
:checked	input:checked	Chọn tất cả các phần tử đang được chọn (selected)	3
:disabled	input:disabled	Chọn tất cả các phần tử đang được vô hiệu hoá (disabled)	3
:empty	p:empty	Chọn tất cả các phần tử không chứa phần tử con (bao gồm cả các nút văn bản)	3
:enabled	input:enabled	Chọn tất cả các phần tử đang được kích hoạt	3
:first-child	p:first-child	Chọn các phần tử có phần tử đầu tiên của phần tử cha chứa nó	2
::first-letter	p::first-letter	Chọn kí tự đầu tiên của phần tử	1
::first-line	p::first-line	Chọn dòng đầu tiên của các phần tử	1
:first-of-type	p:first-of-type	Chọn tất cả các phần tử có phần tử đầu tiên là phần tử cha	3
:focus	input:focus	Chọn các phần tử nhận focus	2
:hover	a:hover	Chọn các liên kết khi chuột di chuyển qua	1
:in-range	input:in-range	Chọn phần tử có giá trị trong phạm vi nhất định	3
:invalid	input:invalid	Chọn tất cả các phần tử có giá trị không hợp lệ	3
:lang(language)	p:lang(it)	Chọn tất cả các phần tử có giá trị thuộc tính “lang” bằng “it”	2
:last-child	p:last-child	Chọn tất cả các phần tử là phần tử con cuối cùng của phần tử cha	3
:last-of-type	p:last-of-type	Chọn tất cả các phần tử là thuộc tính cuối cùng của phần tử cha	3
:link	a:link	Chọn tất cả các liên kết khi chưa được click	1
:not(selector)	:not(p)	Chọn tất cả các phần tử không phải là một phần tử	3
:nth-child(n)	p:nth-child(2)	Chọn tất cả các phần tử là phần tử thứ hai của phần tử cha	3
:nth-last-child(n)	p:nth-last-child(2)	Chọn tất cả các phần tử là phần tử con thứ hai của phần tử cha, tính từ phần tử con cuối cùng	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Chọn tất cả các phần tử là phần tử thuộc tính thứ hai của phần tử cha, tính từ phần tử thuộc tính con cuối cùng	3
:nth-of-type(n)	p:nth-of-type(2)	Chọn tất cả các phần tử là phần tử thuộc tính con thứ hai của phần tử cha	3
:only-of-type	p:only-of-type	Chọn tất cả các phần tử là thuộc tính duy nhất của phần tử cha	3
:only-child	p:only-child	Chọn tất cả các phần tử là con duy nhất của phần tử cha	3
:optional	input:optional	Chọn tất cả các phần tử đầu vào không có thuộc tính “required”	3
:out-of-range	input:out-of-range	Chọn tất cả các phần tử đầu vào có giá trị ngoài một phạm vi nhất định	3
:read-only	input:read-only	Chọn tất cả các phần tử đầu vào có thuộc tính xác định “readonly”	3
:read-write	input:read-write	Chọn tất cả các phần tử đầu vào có thuộc tính không xác định “readonly”	3
:required	input:required	Chọn tất cả các phần tử đầu vào có thuộc tính “required” xác định	3
:root	:root	Chọn các phần tử gốc của văn bản	3
::selection	::selection	Chọn các phần tử được người dùng lựa chọn
:target	#news:target	Chọn các phần tử đang hoạt động hiện tại (click trong các liên kết anchor name)	3
:valid	input:valid	Chọn tất cả các phần tử đầu vào có một giá trị hợp lệ	3
:visited	a:visited	Chọn tất cả các liên kết được truy cập	1

Hướng dẫn chọn trong css

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội