CSS Selectors


Hôm trước chúng ta học cách thêm css dùng thẻ (element selector), dùng class (class selector), dùng id (id selector). Hôm nay ta học một số cách selector nữa nhé.

Hôm trước ta dùng thẻ.

p {
 color: red;
}

Ta có thể dùng group selector, có nghĩa là thêm css vào nhiều thẻ cùng 1 lúc.

p, h1, h2, div {
  color: red;
}

Hoặc ta thêm css vào tất cả các thẻ gọi là universal selector.

* {
  color: red;
}

Hoặc ta muốn chỉ có thẻ p mà có class tên là "myClass" có màu chữ là red. Còn các thẻ khác mà có class "myClass" sẽ không có màu đỏ ta làm như sau:

/* CSS */
<style>
  p.myClass {
   color: red;
  }
</style>

<!-- HTML --> 
<p class="myClass">Welcome to CSS</p>
<div class="myClass">My Div</div>

Welcome to CSS

My Div

Nếu ta muốn thêm css vào tất cả các thẻ p bên trong thẻ div ta có thể dùng descendant selector(space).

/* CSS */

style>
  div p {
   color: green;
  }
</style>

<!-- HTML --> 

<div>
  <p>Hello 1</p>
  <p>Hello 2</p>
   <form><p>Hello 3</p></form>
</div>

Hello 1

Hello 2

Hello 3

Nếu ta chỉ muốn là chỉ thêm css vào thẻ p con trực tiếp của thẻ div ta dùng child selector(>).

/* CSS */

style>
  div > p {
   color: blue;
  }
</style>

<!-- HTML -->
<div>
  <p>Hello 1</p>
  <p>Hello 2</p>
   <form><p>Hello 3</p></form>
</div>

Hello 1

Hello 2

Hello 3

Nếu ta muốn thêm css vào thẻ p đầu tiên sau thẻ div ta có thể dùng adjacent sibling selector(+).

/* CSS */
<style>
  div + p {
   color: red;
  }
</style>

<!-- HTML -->
 <div>my div 1</div>
 <p>This is first p</p>
 <p>This is second p</p>

 <div>my div 2</div>
 <p>This is first p</p>
 <p>This is second p</p>

my div 1

This is first p

This is second p

my div 2

This is first p

This is second p

Hoặc ta muốn thêm css vào tất cả thẻ p sau thẻ div ta dùng general sibling selector(~).

/* CSS */
<style>
  div ~ p {
   color: red;
  }
</style>

<!-- HTML -->
 <div>my div 1</div>
 <p>This is first p</p>
 <p >This is second p</p>
 <h2>This is a heading</h2>
 <p>This is first p</p>
 <p>This is second p</p>
My div

This is first p

This is second p

This is a heading

This is first p

This is second p

Như vậy là ta đã học cách dùng css cho:

  1. thẻ. p { }
  2. id. #myId { }
  3. class. .myClass { }
  4. group thẻ. h1,h2,h3 { }
  5. thẻ có class. p.class { }
  6. tất cả các thẻ. * { }
  7. tất cả thẻ p con của div. div p { }
  8. tất cả thẻ con trực tiếp của div. div > p { }
  9. thẻ p đầu tiên sau thẻ div. div + p { }
  10. tất cả thẻ p sau thẻ div. div ~ p { }