20 kiểu xác định đối tượng trong CSS nên biết

Sau đâu mình xin giới thiệu về 20 kiểu chọn đối tượng trong lập trình css.

1.*

* {
  margin: 0;
  padding: 0;
}

Kiểu ví dụ trên chắc chắn rằng chúng ta đã sử dụng nó rất nhiều lần rồi, nó có tác dụng reset toàn bộ phần tử html về dạng margin và padding băng 0.

#container * {
 border: 1px solid black;
}

Kiểu ví dụ trên là kết hợp với bộ chọn #container, nó có tác dụng là tất cả các phần tử thuộc con của thẻ có id là container đều có border là 1px kiểu nét liền vào có màu đen.

Có thể sử dụng trên

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2.#A

#container {
 width: 960px;
 margin: auto;
}

Kiểu chọn đối tượng theo ID cái này thì chắc chắn ai làm lập trình website cũng đều biết và sử dụng nó rồi, tuy nhiên các bạn hãy thận trọng khi sử dụng nó bởi vì nó sẽ không cho phép sử dụng lại nên nó sẽ làm cho file css của trúng ta bị phình to ra.

Có thể sử dụng trên

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3..A

.error {
  color: red;
}

Kiểu chọn đối tượng theo CLASS cái này thì chắc chắn các bạn cũng biết rồi mình sẽ không nói lại nữa.

Có thể sử dụng trên

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. A + B

ul + p {
  color: red;
}

Đây là kiểu chọn đối tượng cạnh nhau, tức là nó sẽ chỉ chọn phần tử nào dưới phần tử A. Trong ví dụ trên chỉ có thẻ p đầu tiên sau mỗi thẻ ul sẽ có văn bản màu đỏ.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

 5. A > B

Nó sẽ lấy phần tử B là phần tử con nhưng nó phải cấp 1 của phần tử A chứ không phải là phần tử kế tiếp. Trong ví dụ trên phần tử UL sẽ là con của phần tử div có ID là container và nó chỉ có tác dụng với cấp 1 tức là nó chỉ có tác dụng với UL cũng cấp với UL có class="cap1" nó sẽ không có tác dụng với UL có class="cap2".

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

6. A ~ B

ul ~ p {
  color: red;
}

Kiểu chọn này gần giống với kiểu 4, khác một cái là nó sẽ lấy tất cả các thẻ p nằm dưới thẻ UL sẽ có màu đỏ.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. A[title]

a[title] {
  color: red;
}

Kiểu chọn thuộc tính. Trong ví dụ trên nó sẽ lấy ra tất cả thể a có thuộc tính title sẽ có màu đỏ.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8.A[href="example"]

a[href="http://net.tutsplus.com"] {
  color: red;
}

Tương tự kiểu 7 nhưng ràng buộc lớn hơn, tức là tất cả những thẻ a có thuộc tính href="http://net.tutsplus.com"

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9.A[href*="example"]

a[href*="sudo"] {
  color: red;
}

Nó sẽ định kiểu cho tất cả thẻ a có giá trị thuộc tính sudo ở đâu đó trong href, VD: sudo.vn, sudo.com, vn-sudo.com, sudo-ecommerce.vn, thậm chí là sudono1.com

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10.A[href^="example"]

a[href^="http"] {
  color:red;
}

Sẽ định kiểu cho tất cả thẻ a có giá trị thuốc tính bắt đầu bằng http.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11.A[href$=".example"]

a[href$=".jpg"] {
  color: red;
}

Cái này sẽ ngược lại với kiểu số 10 là nó sẽ định kiểu cho thẻ a có giá trị thuộc tính kết thúc bằng .jpg

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12.A[foo~="bar"]

Sẽ định kiểu cho thẻ a có Attribute là data-info và có giá trị là external.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13.A:not(selector)

div:not(#container) {
  background: red;
}

Sẽ chọn tất cả những phần tử div có background là màu đỏ nhưng div có ID là #container sẽ không bị chọn.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14.A::pseudoElement

p::first-line {
  font-weight: bold;
}
p::first-letter {
  font-size: 2em;
}

Các bạn nhìn vào chắc chắn cũng hiểu được phần nào công dụng của nó.

::first-line dòng đầu tiên của các thẻ p sẽ được in đậm lên.

::first-letter chữ cái đầu tiên của thẻ p sẽ có kích thước 2em.

Có thể sử dụng trên

• IE6+
• Firefox
• Chrome
• Safari
• Opera

15.A:nth-child(n)

 Chọn ra phần tử theo thứ tự nằm trong Box cha, n là số nguyên.

Có thể sử dụng trên

• IE9+
• Firefox
• Chrome
• Safari
• Opera

16.A:nth-last-child(n)

Nhìn tên của nó chắc chắn các bạn cũng hiểu cung dụng của nó rồi đúng không, nó tương tự như kiểu 15 nhưng nó lại là ngược lại đếm từ dưới lên.

Có thể sử dụng trên

• IE9+
• Firefox
• Chrome
• Safari
• Opera

17.A:nth-of-type(n)

Nó tương tự như kiểu 15 nhưng, mình xin nói về cái hạn chế của kiểu thứ 15 là nó không xác định kiểu phần tử ở đây là thẻ li, mình sẽ lấy luôn css VD của kiểu 15 ul li:nth-child(3), nó sẽ lấy ra thẻ li thứ 3, nếu trong trường hợp không có các thẻ khác nằm cùng cấp và ở trên thẻ mà ta muốn css thì nó đùng, nhưng với trường hợp trên ta có thẻ p nằm xen kẽ thì nó lại sai bởi vì nó không xác định kiểu của thẻ.

Vậy :nth-of-type(n) ra đời khắc phục điểm yếu đó.

Có thể sử dụng trên

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

18.A:nth-last-of-type(n)

ul:nth-last-of-type(3) {
  border: 1px solid black;
}

Cái này nó cũng tương tự như kiểu 16 nhưng nó sẽ xác định kiểu thẻ ta muốn áp dụng css.

Mình đã giải thích rất rõ ràng ở kiểu 17 rồi.

Có thể sử dụng trên

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

19.A:first-child

ul li:first-child {
  border-top: none;
}

Vâng cái tên nói lên tất cả nó sẽ lấy thẻ li đầu tiên nằm trong ul.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

20.A:last-child

ul li:last-child {
  color: green;
}

Ngược lại của kiểu 19.

Có thể sử dụng trên

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Bonus.A:only-child

Xác định thẻ a có phần nào cùng cấp nữa hay không.

Như VD thẻ a có anchor text là Menu 1 sẽ được in đậm, còn thẻ a có anchor text Menu 2 sẽ không được in đậm, nó có thẻ ul nằm cùng cấp với nó.

Có thể sử dụng trên

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

Vậy là mình đã điểm qua 21 kiểu chọn đối tượng trong css mà lập trình viên nên ghi nhớ, hy vọng nó có thể giúp ích cho bạn.