> For the complete documentation index, see [llms.txt](https://learning-space.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learning-space.gitbook.io/front-end/css/css-selectors.md).

# CSS Selectors

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

[Phân biệt đơn giản một số Pesudo-class hay gây nhầm lẫn trong CSS](https://viblo.asia/p/phan-biet-don-gian-mot-so-pesudo-class-hay-gay-nham-lan-trong-css-aWj53pAPK6m)

[Các Selectors khác W3School](https://www.w3schools.com/cssref/css_selectors.php)

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