30 CSS selectors cần nhớ

Cái này quá đơn giản rồi nên ko cần phải giải thích nhiều, có thể áp dụng cho tất cả các thẻ HTML hoặc cho tất cả các phần tử con thuộc 1 phần tử

1. *

CSS
* {
margin: 0;
padding: 0;
}

Selector này chắc hẳn đã rất quen thuộc. Với * có nghĩa là chọn tất cả elements.

Với cách viết như ví dụ trên thì tất cả các thẻ trong website đều được áp dụng 2 thuộc tính margin, paddingvới giá trị 0.

* cũng có thể sử dụng để chọn tất cả các elements trong 1 element. Ví dụ:

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

=> áp dụng cho tất cả các elements là con của #container.

Demo

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2.#X

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

# là id selector. 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.

Demo

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

CSS
.error {
color: red;
}

Đâ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.

Demo

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4.X Y

CSS
li a {
text-decoration: none;
}

Đây gọi descendant selector. Khi ta cần chỉ rõ phạm vi áp dụng css cho element. Ví dụ trên 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, typeselector.

Ví du:

CSS
#table td.title  {
text-align: center;
}

Demo

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

CSS
a { color: red; }
ul { margin-left: 0;}

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.

Demo

Compatibility:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

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

: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

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

CSS
ul + p {
color: red;
}

Đâ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;

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8.X > Y

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

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ụ trên thì chỉ có thẻ ul là con trực tiếp của div#container mới được lấy

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

CSS
ul ~ p {
color: red;
}

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 X còn X~Y thì nó sẽ lấy tất cả Y sau X

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

CSS
a[title] {
color: green;
}

Nó được gọi là attributes selector. Selector này sẽ lấy theo thuộc tính. Như ví dụ trên thì nó sẽ lấy tất cả các thẻ a mà có thuộc tính [title]

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href=”foo”]

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

Đâ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. Lưu ý giá trị phải được đặt trong dấu “”.

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*=”viblo”]

CSS
a[href*="https://viblo.asia"] {
color: red;
}

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

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^=”http”]

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

=> 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ư ở trên.

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

CSS
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.

Demo

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:

CSS
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).

Demo

Compatibility:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~=”bar”]*

CSS
/* Css1*/
a[data-info~="external"] {
color: red;
}
/* Css2*/
a[data-info~="image"] {
border: 1px solid black;
}

Selector này sử dụng attribute thể select. Ta thấy có điều đặc biệt là nó sử dụng dấu ~. Nó cho phép ta select element theo attribute được phân cách bởi space(dấu cách).

Ví dụ ta có HTML như sau:

HTML
<a href="http://www.google.com" data-info="external" title="Some title">consectetur</a>
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-info="external image" class="hoverZoomLink">Getting Good with Git</a>

Ta thấy thẻ a thứ 2 có phần attribute data-info=”external image”. Chú ý external và image có dấu cách(space) ở giữa Quay trở lại đoạn CSS ở trên. Css1 định nghĩa style cho attribute data-info có tên làexternal Css2 cũng định nghĩa style cho data-info nhưng với tên khác image

Trong thẻ a thứ nhất chỉ tồn tại external nên chi đc áp dụng css1, còn thẻ a thứ 2 có cả exxternal vàimage nên nó sẽ đc áp dụng cả 2 style trên

Demo

Compatibility:

  • IE 7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

CSS
input[type=radio]:checked {
border: 1px solid black;
}

Đây là 1 class giả — pseudo class nó chỉ áp dụng với tag radio và checkbox. Lý do đơn giản là chỉ có chúng mới có thể tick chọn được thôi

Demo

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

CSS
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}

:after — pseudo class. Tương ứng với tên gọi của nó. Nó sẽ append toàn bộ css đã được định nghĩa vào sauX.

[Demo]

Compatibility:

  • IE 8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

CSS
div:hover {
background: #e3e3e3;
}

Selector này thì chắc hẳn đã quá quen thuộc rồi. CSS được định nghĩa trong :hover sẽ có hiệu lực khi ta rê chuột lên element đó.

Ví dụ:

CSS
a:hover {
border-bottom: 1px solid black;
}

=> Mọi thẻ a khi rê chuột vào sẽ có viền đen với kích thước 1px.

Compatibility:

  • IE 6+
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(Y)

CSS
div:not(Y) {
color: blue;
}

Mình gọi nó là selector phủ định :). Câu văn đại loại là “áp dụng CSS cho những thằng không phải là Y

Ví dụ:

CSS
*:not(p) {
color: green;
}

=> tất cả những tag không phải p sẽ có màu xanh

Demo

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

CSS
p::first-line {
font-weight: bold;
font-size: 1.2em;
}

Ta có thể sử dụng element giả hay còn gọi là pseudo elements bằng cách sử dụng dấu :: để định nghĩa style cho element. Dưới đây là danh sách 1 số psedo elements:

  • first-line: Dòng đầu tiên
  • first-letter: Ký tự đầu tiên
  • before: Trước element
  • after: Sau element

Demo

Compatibility:

  • IE 6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

CSS
li:nth-child(3) {
color: red;
}

Tham số n là 1 số cụ thể tương ứng với số thứ tự element tính từ trên xuống Ví dụ trên sẽ định nghĩa style cho những thẻ li thứ 3. Chú ý số đêm được tính từ 1

Demo

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

CSS
li:nth-last-child(2) {
color: red;
}

Tương tự như n ở selector trên, nhưng ở đây n sẽ là số thứ tự của element được tính từ dưới lên. nth-last-child sẽ style cho những element X thứ n tính từ dưới lên

Demo

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

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

Có lúc thay vì chọn 1 element bất kỳ ta sẽ cần chọn nhiều element. Đó là lý do nth-of-type được sinh ra. Tham số n là 1 số cụ thể tương ứng với số thứ tự element tính từ trên xuống Ví dụ trên sẽ quy định đường viền đen cho thẻ ul thứ 3.

Demo

Compatibility:

  • IE 9+
  • Firefox3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

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

Chắc hẳn bạn đã thấy có điều gì đó quen thuộc ở đây :v Đúng vậy nth-last-of-type cũng tương tự nhưnth-of-type. có điều nó nhận vào tham số n là số thứ tự của element được tính từ dưới lên.

Compatibility:

  • IE 9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

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

first-child — pseudo class. Định nghĩa style cho element đầu tiên

Demo

Compatibility:

  • IE 7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

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

last-child — pseudo class. Định nghĩa style cho element cuối cùng Demo

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

28. X:only-child

CSS
div p:only-child {
color: red;
}

Chỉ select những element duy nhất của element cha.

Ví dụ ta có đoạn mã HTML như thế này:

HTML
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

Đoạn css trên sẽ style cho thẻ p nào là con duy nhất của thẻ div. Cụ thể là text của nó sẽ mang màu đỏ. Như vậy nó sẽ áp dụng style cho thẻ div đầu tiên

Demo

Compatibility:

  • IE 7+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

CSS
li:only-of-type {
font-weight: bold;
}

Selector này sẽ target vào 1 type element duy nhất trong container. Nghĩa là trong container chỉ tồn tại duy nhất 1 type duy nhất thì nó mới được select

Ví dụ:

CSS
ul > li:only-of-type {
font-weight: bold;
}

=> áp dụng font-weight cho li thuộc ul — chỉ chứ duy nhất 1 thẻ li(ngoài ra không còn li nào khác thuộc ul

Demo

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

first-of-type cho phép ta chọn những element con đầu tiên nằm trong type element cha. Ví dụ:

CSS
ul:first-of-type {
font-weight: bold;
}

=> lấy tất cả element con nằm trong ul đầu tiên.

Demo

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Happy Codding!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.