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.

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ả

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é

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 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 4

Blog tuicocach.com 5

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