Loadding..

CSS Selecter hay sử dụng

CSS Selecter hay sử dụng

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
Tags:

Image

enqtran

I'm enqtran - A coder and blogger :) [email protected]