Tổng Hợp Các Bộ Chọn Trong CSS Thường Dùng
Có thể bạn quan tâm
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.
Các bộ chọn trong CSS
Dưới đây là tổng hợp các bộ chọn CSS thường dùng nhất.
| Bộ chọn | Ví dụ | Mô tả các ví dụ |
|---|---|---|
| .class | .intro | Chọn tất cả các phần tử có class=”intro” |
| #id | #firstname | Chọn tất cả các phần tử có 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à phần tử <p> |
| element element | div p | Chọn tất cả các phần tử <p> và 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> được đặt phía sau phần tử <div> |
| element1~element2 | p ~ ul | Chọn tất cả các phần tử <ul> được đặt trước bởi một phần tử <p> |
| [attribute] | [target] | Chọn tất cả các phần tử có cùng thuộc tính |
| [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”) |
| [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” |
| [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” |
| [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 bằng “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 bằng”.pdf” |
| [attribute*=value] | a[href*=”timoday”] | Chọn tất cả các phần tử <a> có giá trị thuộc tính “href” chứa chuỗi”timoday” |
| :active | a:active | Chọn tất cả các liên kết được kích hoạt |
| ::after | p::after | Chèn thêm nội dung ngay phía sau của các phần tử <p> |
| ::before | p::before | Chèn thêm nội dung ngay phía trước của các phần tử <p> |
| :checked | input:checked | Chọn tất cả các phần tử <input> đang được chọn (selected) |
| :disabled | input:disabled | Chọn tất cả các phần tử <input> đang được vô hiệu hoá (disabled) |
| :empty | p:empty | Chọn tất cả các phần tử <p> không chứa phần tử con (bao gồm cả các nút văn bản) |
| :enabled | input:enabled | Chọn tất cả các phần tử <input> đang được kích hoạt |
| :first-child | p:first-child | Chọn các phần tử <p> có phần tử đầu tiên của phần tử cha chứa nó |
| ::first-letter | p::first-letter | Chọn kí tự đầu tiên của phần tử <p> |
| ::first-line | p::first-line | Chọn dòng đầu tiên của các phần tử <p> |
| :first-of-type | p:first-of-type | Chọn tất cả các phần tử <p> có phần tử đầu tiên <p> là phần tử cha |
| :focus | input:focus | Chọn các phần tử <input> nhận focus |
| :hover | a:hover | Chọn các liên kết khi chuột di chuyển qua |
| :in-range | input:in-range | Chọn phần tử <input> có giá trị trong phạm vi nhất định |
| :invalid | input:invalid | Chọn tất cả các phần tử <input> có giá trị không hợp lệ |
| :lang(language) | p:lang(it) | Chọn tất cả các phần tử <p> có giá trị thuộc tính “lang” bằng “it” |
| :last-child | p:last-child | Chọn tất cả các phần tử <p> là phần tử con cuối cùng của phần tử cha |
| :last-of-type | p:last-of-type | Chọn tất cả các phần tử <p> là thuộc tính cuối cùng của phần tử cha |
| :link | a:link | Chọn tất cả các liên kết khi chưa được click |
| :not(selector) | :not(p) | Chọn tất cả các phần tử không phải là một phần tử <p> |
| :nth-child(n) | p:nth-child(2) | Chọn tất cả các phần tử <p> là phần tử thứ hai của phần tử cha |
| :nth-last-child(n) | p:nth-last-child(2) | Chọn tất cả các phần tử <p> là phần tử con thứ hai của phần tử cha, tính từ phần tử con cuối cùng |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Chọn tất cả các phần tử <p>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 |
| :nth-of-type(n) | p:nth-of-type(2) | Chọn tất cả các phần tử <p> là phần tử thuộc tính con thứ hai của phần tử cha |
| :only-of-type | p:only-of-type | Chọn tất cả các phần tử <p> là thuộc tính duy nhất của phần tử cha |
| :only-child | p:only-child | Chọn tất cả các phần tử <p> là con duy nhất của phần tử cha |
| :optional | input:optional | Chọn tất cả các phần tử đầu vào không có thuộc tính “required” |
| :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 |
| :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” |
| :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” |
| :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 |
| :root | :root | Chọn các phần tử gốc của văn bản |
| ::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) |
| :valid | input:valid | Chọn tất cả các phần tử đầu vào có một giá trị hợp lệ |
| :visited | a:visited | Chọn tất cả các liên kết được truy cập |
Một số ví dụ minh họa
Ví dụ bộ chọn .class
Ta có đoạn code html như sau:
<div id="app"> <div class="container"> <p class="hello">Hello</p> <p class="hola">Hola</p> </div> <div class="other"> I am left behind... </div> </div>Mã CSS
.hello { color: red; }Và đây là kết quả
Hello
Hola
I am left behind…Ví dụ bộ chọn :hover
Vẫn với đoạn HTML bên trên ta có đoạn CSS như sau:
.hello { color: red; } .hello:hover { color: #00ff00; }Đây là kết quả
Thử di chuột vào chữ Hello nhé
Hello
Hola
I am left behind…Ví dụ bộ chọn con cháu
Bộ chọn element1 > element2 dùng để chọn phần tử element2 là con của phần tử element1
Ta có code html
<div class="thediv"> <p>Blog tuicocach.com 1</p> <p>Blog tuicocach.com 2</p> <div><p>Blog tuicocach.com 3</p></div> </div> <p>Blog tuicocach.com 4</p> <p>Blog tuicocach.com 5</p> CSS .thediv> p { background-color:yellow; }Kết quả
Chúng ta có thể thấy trong trường hợp này chỉ có các thẻ p là con trực tiếp của .thediv mới được chọn.
Blog tuicocach.com 1
Blog tuicocach.com 2
Blog tuicocach.com 3
Blog tuicocach.com 4
Blog tuicocach.com 5
Bộ chọn element1 element2 dùng để chọn tất cả phần tử element2 là con cháu chít.. của phần tử element1
Ta có code html
<div class="thediv2"> <p>Blog tuicocach.com1</p> <p>Blog tuicocach.com2</p> <div><p>Blog tuicocach.com3</p></div> </div> <p>Blog tuicocach.com 4</p> <p>Blog tuicocach.com 5</p> CSS .thediv2 p { background-color:yellow; }Kết quả
Trong trường hợp này các thẻ p là là con hoặc cháu chít của thẻ .thediv2 đều được chọn
Blog tuicocach.com 1
Blog tuicocach.com2
Blog tuicocach.com3
Blog tuicocach.com 4
Blog tuicocach.com 5
Tổng hợp các bộ chọn trong CSS thường dùng
0 0 Phiếu bình chọn Xếp hạng bài viếtTừ khóa » Các Bộ Chọn Trong Css
-
Các Bộ Chọn Trong CSS
-
30 Bộ Chọn CSS Bạn Phải Thuộc Lòng - Code Tutsplus
-
Bộ Chọn Trong CSS3
-
Danh Sách Tất Cả Các Bộ Chọn (selector) Trong CSS - Web Cơ Bản
-
CSS Selector (bộ Chọn) Là Gì Và Cách Sử Dụng? | DAMMIO
-
Bộ Chọn CSS (CSS Selector) - Học Css Cơ Bản đến Nâng Cao - VietTuts
-
Selector | CSS | Học Web Chuẩn
-
9 Bộ Chọn CSS Phổ Biến - Tự Học CSS3
-
CSS Selector Là Gì? 8 Loại CSS Selector CẦN BIẾT
-
5 Bộ Chọn CSS Hữu ích - Viblo
-
Bộ Chọn Selector Trong CSS | Học Lập Trình JavaScript
-
CSS - Bộ Chọn (Selectors) Và Cách Sử Dụng - Đại Phố Web & Hosting
-
5 Kiểu Vùng Chọn CSS Cơ Bản (Selectors) - Thạch Phạm
-
Bộ Chọn Trong CSS (CSS Selector) - Lập Trình Từ Đầu