30 CSS selectors cần nhớ (P1)

HTML - CSS 17/09/2016 07:00 573
Trong bài viết này mình xin tóm tắt tới các bạn 30 css selector mà bất kỳ lập trình viên phát triển website, hay app mobile cũng cần phải nhớ và bỏ túi.

1. *

Selector này chắc hẳn các bạn đã rất quen thuộc rồi phải không. Với * có nghĩa là chọn tất cả elements.

Với cách viết như ví dụ sau thì tất cả các thẻ trong website đều được áp dụng hai thuộc tính marginpaddingvới giá trị 0.

// áp dụng cho toàn bộ html
* {
	margin: 0;
	padding: 0;
}
// Hoặc chỉ áp dụng toàn bộ trong div.container cụ thể
.container * {
	margin: 0;
	padding: 0;
}

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2.#X

# là selector id. CSS ứng với selector này được áp dụng cho duy nhất 1 element có id="X". Vì id là duy nhất nên nó không thể tái sử dụng.

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

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

Đây là class selector. Với class selector thì ta có thể tái sử dụng chúng. Vì class có thể đặt ở nhiều nơi. Đây cũng là sự khác nhau của id và class selector.

.error {
  color: red;
}

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4.X Y

Đây gọi descendant selector. Khi ta cần chỉ rõ phạm vi áp dụng CSS cho element nào đó. Ví dụ sau đây có nghĩa là tất cả các tag a nằm trong tag li thì đều mang giá trị css text-decoration: none. X Y chỉ là đại diện cho selector. Không nhất thiết phải là tag element. Ta có thể hoặc xen kẽ thêm nhiều tấng Id, Class, Loại Selector(Type Selector).

li a {
	text-decoration: none;
}

Ví dụ:

#table td.title  {
	background:#DDD;
}
h2.title a{
	color:#333;
	font-size:16px;	
}

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

Type selector được sử dụng khi ta muốn áp dụng CSS cho tất cả các tag cùng tên trong page.

a { color: red; }
ul { margin-left: 0; }
input{ border:1px solid #DDD; }

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

:link là pseudo-class. Nó trỏ đến các tag a mà chưa được click. a:visted ngược lại với :link nó trỏ đến các tag a đã được click

a:link { color: red; }
a:visted { color: purple; }

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

Đây gọi là adjacent selector. Như tên gọi của nó. Phạm vi áp dụng là những element liền kề ngay sau selector được khai báo(X). Trong ví dụ trên ta có thể hiểu là: CSS áp dụng cho thẻ p đầu tiên đứng ngay sau thẻ ul sẽ có color: red;

ul + p {
   color: red;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8.X > Y

X > Y khác X Y ở chỗ X > Y sẽ lấy phần tử con Y trực tiếp của X chứ ko lấy tất cả các phần tử con khác.

Như ví dụ sau thì chỉ có thẻ ul là con trực tiếp của div#container mới được lấy

div#container > ul {
  border: 1px solid black;
}

P/s: Trong một số trường hợp mình thích viết css với selector như này vì nó không bị xung đột nhưng đôi khi nó làm selector của bạn dài nếu tham chiếu tới các phần tử chắt - chút - chít.

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

Nó tương tự X+Y nhưng ít nghiêm ngặt hơn, có nghĩa là X+Y sẽ lấy phần tử Y đầu tiên sau Xcòn X~Y thì nó sẽ lấy tất cả Y sau X

ul ~ p {
   color: red;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

Nó được gọi là attributes selector. Selector này sẽ lấy theo thuộc tính.

Như ví dụ sau thì nó sẽ lấy tất cả các thẻ a mà có thuộc tính [title]

a[title] {
   color: green;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href=”foo”]

Đây cũng vẫn là attributes selector nhưng nó chi tiết hơn. Nó truyền theo giá trị của attributes.

P/s: Giá trị phải được đặt trong dấu "".

a[href="http://google.com.vn"] {
  color: #1f6053;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*=”viblo”]

Ta thấy selector này có thêm dấu * ở phần attributes. Ví dụ sau có nghĩa là lấy tất cả thẻ X có thuộc tínhh ref và giá trị có chứa từ chiasephp.net

Ví dụ:

a[href*="chiasephp.net"] {
  color: red;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^=”http”]

Lấy tất cả thẻ a mà có thuộc tính href bắt đầu bằng http

Với selector này, ta có thể tham chiếu đến element có thuộc tính mang giá trị bắt đầu bằng value. Chỉ cần thêm kí tự carat “^” như ví dụ sau.

a[href^="http"] {
   background: url(../icon.png) no-repeat;
   padding-left: 10px;
}

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=”.jpg”]

P/s: $ nghĩa là kết thúc.

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

Trái ngược với selector trên, nó tham chiếu đến element có thuộc tính mang giá trị kết thúc bằng value.

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. name[data-*=”value”]

Chuyện gì xảy ra nếu chúng ta muốn tham chiếu đến tất cả liên kết đến mọi định dang file ảnh .jpg, .png, .gif. Nếu sử dụng với kí tự $, chúng ta cần nhiều dòng css như sau:

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {
 color: red;
}

Để linh động, chúng ta có thể tự đặt thuộc tính riêng attribute-name (thông thường ta sẽ bắt đầu với data-attributename).

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

Tổng kết:

Do nội dung của bài viết quá dài. Các bạn vui lòng xem tiếp 30 CSS Selector cần nhớ P2 tại đây nhé. Xem tiếp

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.