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
Độ ư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