Tìm hiểu về CSS basic: Selecter

Điều đầu tiên khi tìm hiểu về CSS thì chúng ta phải hiểu các cách chọn phần tử trong CSS. CSS cung cấp những cách thức hết sức đơn giản và linh động giúp bạn định kiểu được những phần tử html bạn mong muốn. Trong bài này tôi xin giới thiệu tóm tắt những cách thức chọn phần tử thường dùng trong CSS. Để nhanh gọn và giễ hiểu tôi sẽ trình bày bằng vị dụ trước và giải thích ngay sau ví dụ đó.

* {
  margin: 0;
  padding: 0;
}

Chọn tất cả các phần tử trong css

html\:abbr, abbr {
  cursor: help;
  font-style: italic;
}

Dùng dấu  ',' để liệt kê tất cả các phần tử bạn muốn định kiểu cùng thuộc tính giá trị. Ở trên ta thấy có cách chọn lạ là html\:abbr vì thẻ abbr không hổ trợ trong IE6 nên bạn dùng cách này để fix.

.className {
  declaration block
}

Chọn phần tử  theo tên class

p.warning {
  declarations
}

Chỉ chọn phần tử p có thuộc tính tên class là warning, ví dụ nếu có phần tử khác cũng có tên class  như trên hay phần tử p không có tên class như trên thì nó sẽ không bị ảnh hưởng

div.foo.bar {
  declarations
}

Chỉ chọn những phần tử div chứa cả hai class với tên là foo và bar, những phần tử div nào chỉ có 1 class thì sẽ không bị ảnh hưởng.

div.foo.bar[title^="Help"] {
  declarations
}

Chỉ chọn những phần tử chứa 2 class là foo và bar đồng thời phải có thuộc tính title có giá trị bắt đầu từ chuỗi Help (Không hổ trợ IE 5 và 6) .

#navigation {
  declarations
}

Chọn phần tử có tên id là navigation.

input[type="submit"] {
  declarations
}

Để lấy theo tên và giá giá trị thuộc tính chúng ta dùng dấu ngoặc vuông như trên.

a[href*="example.com"] {
declarations
}

Lấy phần tử a có thuộc tính href chứa chuỗi example.com, các thuộc tính khác của thẻ html bạn có thể chọn tương tự.

a[href^="http:"] {
  declarations
}

Giống vị dụ trên nhưng dùng dầu ^ là để lấy giá trị của thuộc tính bắt đầu từ chuỗi "http:".

img[src$=".png"] {
  declarations
}

Giống như trên nhưng dùng dấu $ là để lấy giá trị của thuộc tính src có chứa đoạn cuối của chuỗi là ".png".

#foo td {
  declarations
}

Cái này là chọn theo phả hệ như ví dụ trên nói rằng chỉ chọn những phần tử td nào là con, hay cháu, chắt, chút, chít của phần tử có id=foo hay tóm lại là chúng có tổ tiên là phần tử có id=foo thì mới được định kiểu.

ul * li {
  declarations
}

Vị dụ này nói rằng bạn muốn chọn phần tử li phải có tổ tiên là một phần tử náo đó rồi mới tới tổ tiên là ul. Bạn có thể thêm dấu * nữa theo bạn chọn, tuy nhiên cách này cũng ít khi dùng.

E>F {
  declaration block
}

Chỉ Chọn phần tử F nào là con trực tiếp của E. Nếu là cháu, chắt... thì sẽ không ảnh hưởng.

h2+p {
  declarations
}

Chỉ chọn những phần tử  p nào nằm kế bên phần tử h2, nghĩa là phần tử h2 rồi mới đến phần tử p.

h2~p {
  declarations
}

Chọn tất cả các phần tử p có cùng cấp với phần tử h2, nhưng phần tử h2 phải được liệt kê trước và các phần tử p có thể không cần nằm kế phần tử h2.

Bài viết tới đây có lẽ là đã dài tôi sẽ tiếp tục giới thiệu các cách chọn phần tử html vào các bài kế tiếp. Các bài kế tiếp chúng ta sẽ tìm hiểu về cách chọn phần tử với Pseudo-classes và Pseudo-elements. Nếu chỗ nào bạn còn mập mờ chưa rõ thì cứ làm ví dụ nhiều nhiều thì khắc ngộ ra. Cái gì mà mập mờ không rõ thì sẽ nhanh quên bới vậy bạn đừng ngại bỏ chút thời gian làm ví dụ.