CSS Selectors
*
*
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
Độ ư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.
inline - 1000
#id - 100
.class - 10
tag - 1
Last updated
Was this helpful?