Bảng đối Chiếu Các CSS Selector - Đại Phố Web & Hosting

Đại Phố Web Development > Blog > Lập trình > Bảng đối chiếu các CSS Selector Bảng đối chiếu các CSS Selector

Trong CSS, Selector là mẫu được sử dụng để chọn (các) yếu tố mà bạn muốn tạo kiểu. Bài này giúp các bạn thiết kế giao diện (theme) dễ dàng tạo các stylesheet bắt mắt cho trang web.

Nhấn vào các selector để mở trang chi tiết về cách sử dụng của selector đó.

Selector	Ví dụ	Giải thích ví dụ
.class	.intro	Chọn tất cả các phần tử với class=”intro”
#id	#firstname	Chọn tất cả các phần tử với id=”firstname”
*	*	Chọn tất cả các phần tử
element	p	Chọn tất cả các phần tử <p>
element,element	div, p	Chọn tất cả các phần tử <div> và tất cả các phần tử <p> Xem bài viết đầy đủ tại https://www.daipho.com
element element	div p	Chọn tất cả các phần tử <p> bên trong phần tử <div>
element>element	div > p	Chọn tất cả các phần tử <p> có phần tử cha là <div>
element+element	div + p	Chọn tất cả các phần tử <p> liền sau phần tử <div> Xem bài viết đầy đủ tại https://www.daipho.com
element1~element2	p ~ ul	Chọn tất cả các phần tử <ul> liền trước phần tử <p>
[attribute]	[target]	Chọn tất cả các phần tử có thuộc tính target
[attribute=value]	[target=_blank]	Chọn tất cả các phần tử có thuộc tính target=”_blank”
[attribute~=value]	[title~=flower]	Chọn tất cả các phần tử có thuộc tính title có chứa từ “flower”
[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 với “en”
[attribute^=value]	a[href^=”https”]	Chọn tất cả các phần tử <a> có giá trị thuộc tính href bắt đầu với “https”
[attribute$=value]	a[href$=”.pdf”]	Chọn tất cả các phần tử <a> có giá trị thuộc tính href kết thúc với “.pdf”
[attribute*=value]	a[href*=”daipho.com”]	Chọn tất cả các phần tử <a> có giá trị thuộc tính href có chứa chuỗi con “daipho.com”
:active	a:active	Chọn liên kết ở trạng thái active
::after	p::after	Chèn thành phần nào đó vào sau nội dung của mỗi phần tử <p>
::before	p::before	Chèn thành phần nào đó vào trước nội dung của mỗi phần tử <p>
:checked	input:checked	Chọn những phần tử <input> ở trạng thái checked
:disabled	input:disabled	Chọn những phần tử <input> ở trạng thái disabled
:empty	p:empty	Chọn những phần tử <p> that has no children (including text nodes)
:enabled	input:enabled	Chọn những phần tử <input> ở trạng thái enabled
:first-child	p:first-child	Chọn những phần tử <p> là con đầu tiên của phần tử cha
::first-letter	p::first-letter	Chọn the first letter of every <p> element
::first-line	p::first-line	Chọn the first line of every <p> element
:first-of-type	p:first-of-type	Chọn phần tử <p> xuất hiện đầu tiên trong phần tử cha
:focus	input:focus	Selects the input element which has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:invalid	input:invalid	Chọn tất cả các phần tử input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Chọn tất cả các phần tử unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no “required” attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
:read-only	input:read-only	Selects input elements with the “readonly” attribute specified
:read-write	input:read-write	Selects input elements with the “readonly” attribute NOT specified
:required	input:required	Selects input elements with the “required” attribute specified
:root	:root	Selects the document’s root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Chọn tất cả các phần tử input with a valid value
:visited	a:visited	Chọn tất cả các phần tử visited links. Xem bài viết đầy đủ tại https://www.daipho.com

Tham khảo:

• CSS là gì – Tổng quan về CSS
• CSS – Bộ chọn (Selectors) và cách sử dụng

Dịch vụ web

• Thiết kế web trọn gói
• Wordpress theme
• Wordpress Plugin
• Tối ưu hóa SEO
• Ứng dụng web-based/app trên nền web
• Phạm vi hoạt động: Tiền Giang, Long An, TP.HCM, Bình Dương, Đồng Nai
• Hotline: 03 6694 1906
• Email: kythuat@daipho.com

Kết nối

Share on Facebook Share Share on TwitterTweet Share on Pinterest Share Share on LinkedIn Share Share on Digg Share

Đại Phố Network Media

Từ khóa

Biểu thức chính quy Blogspot CSS HTML Javascript Joomla JQuery Laravel MyBB PHP PHP Regular Expressions Quản trị hệ thống SEO Smarty Wordpress

Mẫu web mới

DP Care Service: Mẫu trang web dịch vụ

DP Care Service là mẫu giao điện trang web dành riêng cho các loại hình dịch vụ, thích hợp cho cả nhà xưởng phụ trợ công nghiệp và dịch vụ dân dụng như: chăm sóc xe, dịch vụ gia công cho các nhà xưởng, dịch vụ y tế chăm sóc sức khỏe, dịch vụ cho thuê, dịch vụ vận tải, các loại hình gia công… [ + ]

DP Vegan Restaurant: giao diện nhà hàng thuần chay

DP Vegan Restaurant là giao diện trang web, template mẫu dành cho các nhà hàng chay, cơ sở chế biến thực phẩm chay hoặc các cửa hiệu thực phẩm thuần chay. Phù hợp cả 2 loại hình trang web bán hàng và trang web dịch vụ.… [ + ]

Organic Farm: mẫu trang web nông sản hữu cơ xanh/nhà vườn

Organic Farm là trang web thương mại đện tử dành cho công ty, cơ sở sản xuất, phân phối: nông trại trồng rau hữu cơ, siêu thị, nông sản, thực phẩm xanh, trái cây, thực phẩm healthy, thảo mộc dược liệu, cửa hàng trà thảo dược hữu cơ, vườn bếp… [ + ]

Thủ thuật

Các phương thức của đối tượng Woocommerce Product

Bạn đang muốn tìm hiểu về các phương thức và hàm của đối tượng $product trong… [ + ]

WordPress: tạo dải số phân trang cho danh mục/taxonomy

Khi viết code cho Wordpress theme, bạn muốn tạo phân trang cho danh mục là các… [ + ]

Xử lý Vấn đề INP: Chẩn đoán và gỡ lỗi

Ở trang 2 của bài viết: Xử lý Vấn đề INP của các URL trong Google Search… [ + ]