Các Bộ Chọn Trong CSS

Trang chủ » Các Bộ Chọn Trong Css » Các Bộ Chọn Trong CSS

Có thể bạn quan tâm

Skip to content
  • CSS / Khoá học
  • 0
Tổng hợp các bộ chọn trong CSS

Các bộ chọn trong CSS

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.

Sử dụng Công cụ học CSS trực quan ở trang Tìm ở đây để học CSS một cách nhanh và hiệu quả nhất.

Dưới đây là các cột “CSS”  đưa ra các phiên bản thuộc tính khác nhau của CSS (CSS1, CSS2, hoặc CSS3).

Bộ chọn Ví dụ Mô tả các ví dụ CSS
.class .intro Chọn tất cả các phần tử có class=”intro” 1
#id #firstname Chọn tất cả các phần tử có id=”firstname” 1
* * Chọn tất cả các phần tử 2
element p Chọn tất cả các phần tử  <p> 1
element,element div, p Chọn tất cả các phần tử <div>và phần tử <p> 1
element element div p  Chọn tất cả các phần tử <p> và bên trong phần tử  <div> 1
element>element div > p Chọn tất cả các phần tử <p> có phần tử cha là <div> 2
element+element div + p Chọn tất cả các phần tử <p> được đặt phía sau phần tử  <div> 2
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> 3
[attribute] [target] Chọn tất cả các phần tử có cùng thuộc tính 2
[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”) 2
[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” 2
[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” 2
[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” 3
[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” 3
[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” 3
:active a:active Chọn tất cả các liên kết được kích hoạt 1
::after p::after Chèn thêm nội dung ngay phía sau của các phần tử <p> 2
::before p::before Chèn thêm nội dung ngay phía trước của các phần tử <p> 2
:checked input:checked Chọn tất cả các phần tử <input> đang được chọn (selected) 3
:disabled input:disabled Chọn tất cả các phần tử <input> đang được vô hiệu hoá (disabled) 3
: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) 3
:enabled input:enabled Chọn tất cả các phần tử <input> đang được kích hoạt 3
: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ó 2
::first-letter p::first-letter Chọn kí tự đầu tiên của phần tử  <p> 1
::first-line p::first-line Chọn dòng đầu tiên của các phần tử <p> 1
: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 3
:focus input:focus Chọn các phần tử <input> nhận focus 2
:hover a:hover Chọn các liên kết khi chuột di chuyển qua 1
:in-range input:in-range Chọn phần tử <input> có giá trị  trong phạm vi nhất định 3
:invalid input:invalid Chọn tất cả các phần tử <input> có giá trị không hợp lệ 3
: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” 2
: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 3
: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 3
:link a:link Chọn tất cả các liên kết khi chưa được click 1
: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> 3
: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 3
: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 3
: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 3
: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 3
: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 3
: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 3
:optional input:optional Chọn tất cả các phần tử đầu vào không có thuộc tính “required” 3
: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 3
: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” 3
: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” 3
: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 3
:root :root Chọn các phần tử gốc của văn bản 3
::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) 3
:valid input:valid Chọn tất cả các phần tử đầu vào có một giá trị hợp lệ 3
:visited a:visited Chọn tất cả các liên kết được truy cập 1

Xem thêm công cụ học CSS trực quan

Từ khóa » Các Bộ Chọn Trong Css