Css Selector là gì?
Selector dịch tiếng anh thì có nghĩa là “người được chọn” . Trong CSS thì selector được dùng để truy vấn đến các thẻ trong file HTML. Trong một file HTML thì có rất nhiều thẻ giống nhau và thông thường chúng ta sẽ đặt các ID, Class cho các thẻ để phân biệt, do đó trong CSS ta sẽ dựa vào các ID, class và các thuộc tính của thẻ HTML đó để làm việc. Selector trong CSS rất quan trọng và nếu không nắm được thì sẽ không thể style cho các thành phần HTML được.
Đây là một số Css Selector thường được sử dụng nhất.
1. * select All
* { margin: 0; padding: 0; } #container * { border: 1px solid black; }
2. #X select Id
#container { width: 960px; margin: auto; }
3. .X select class
.error { color: red; }
4. X Y – select tags
li a { text-decoration: none; }
6. X:visited and X:link
a:link { color: red; } a:visted { color: purple; }
7. X + Y
ul + p { color: red; }
8. X > Y
div#container > ul { border: 1px solid black; }
9. [title]
a[title] { color: green; }
10 X:checked
input[type=radio]:checked { border: 1px solid black; }
11. X:not(selector)
div:not(#container) { color: blue; }
12 X::pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; } p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
13. X:nth-child(n)
li:nth-child(3) { color: red; }
14. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
15. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
16 X:first-child
ul li:first-child { border-top: none; }
17 X:last-child
ul > li:last-child { color: green; }
18. X:only-child
div p:only-child { color: red; }
19. X:only-of-type
li:only-of-type { font-weight: bold; }
-Lời kết: Với những selector “thông dụng” ở trên bạn đã làm việc tốt với html và css rồi đúng không.
Print