Thứ Tư, 30 Tháng Mười Một 2022
Trang chủLập trình WebHTML & CSSTổng hợp các bộ chọn trong CSS thường dùng

Tổng hợp các bộ chọn trong CSS thường dùng

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ọnVí dụMô tả các ví dụ
.class.introChọn tất cả các phần tử có class=”intro”
#id#firstnameChọn tất cả các phần tử có id=”firstname”
**Chọn tất cả các phần tử
elementpChọn tất cả các phần tử  <p>
element,elementdiv, pChọn tất cả các phần tử <div>và phần tử <p>
element elementdiv p Chọn tất cả các phần tử <p> và bên trong phần tử  <div>
element>elementdiv > pChọn tất cả các phần tử <p> có phần tử cha là <div>
element+elementdiv + pChọn tất cả các phần tử <p> được đặt phía sau phần tử  <div>
element1~element2p ~ ulChọ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”
:activea:activeChọn tất cả các liên kết được kích hoạt
::afterp::afterChèn thêm nội dung ngay phía sau của các phần tử <p>
::beforep::beforeChèn thêm nội dung ngay phía trước của các phần tử <p>
:checkedinput:checkedChọn tất cả các phần tử <input> đang được chọn (selected)
:disabledinput:disabledChọn tất cả các phần tử <input> đang được vô hiệu hoá (disabled)
:emptyp:emptyChọ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)
:enabledinput:enabledChọn tất cả các phần tử <input> đang được kích hoạt
:first-childp:first-childChọn các phần tử  <p> có phần tử đầu tiên của phần tử cha chứa nó
::first-letterp::first-letterChọn kí tự đầu tiên của phần tử  <p>
::first-linep::first-lineChọn dòng đầu tiên của các phần tử <p>
:first-of-typep:first-of-typeChọn tất cả các phần tử <p> có phần tử đầu tiên <p> là phần tử cha
:focusinput:focusChọn các phần tử <input> nhận focus
:hovera:hoverChọn các liên kết khi chuột di chuyển qua
:in-rangeinput:in-rangeChọn phần tử <input> có giá trị  trong phạm vi nhất định
:invalidinput:invalidChọ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-childp:last-childChọ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-typep:last-of-typeChọ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
:linka:linkChọ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-typep:only-of-typeChọ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-childp:only-childChọn tất cả các phần tử <p> là con duy nhất của phần tử cha
:optionalinput:optionalChọn tất cả các phần tử đầu vào không có thuộc tính “required”
:out-of-rangeinput:out-of-rangeChọ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-onlyinput:read-onlyChọn tất cả các phần tử đầu vào có thuộc tính xác định “readonly”
:read-writeinput:read-writeChọn tất cả các phần tử đầu vào có thuộc tính không xác định “readonly”
:requiredinput:requiredChọn tất cả các phần tử đầu vào có thuộc tính  “required” xác định
:root:rootChọn các phần tử gốc của văn bản
::selection::selectionChọn các phần tử được người dùng lựa chọn
:target#news:targetChọn các phần tử đang hoạt động hiện tại (click trong các liên kết  anchor name)
:validinput:validChọn tất cả các phần tử đầu vào có một giá trị hợp lệ
:visiteda:visitedChọ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ết
BÀI VIẾT LIÊN QUAN
Đăng ký nhận thông báo
Thông báo email khi
guest
0 Bình luận
Không thể gửi email
Phản hồi nội tuyến

NÊN ĐỌC THÊM

Bạn muốn tìm kiếm gì?


0
Giáo sư! có thể ném gạch bên dưới nhé!x
()
x