Tìm hiểu selectors trong CSS

Selectors là một khái niệm rất quan trọng các bạn cần phải nắm vững khi học CSS, bài viết dưới đây mình sẽ tổng hợp một số selectors thường gặp nhất, giúp các bạn học CSS nhanh hơn.

I. Selectors là gì?

Selectors là các lựa chọn dùng để truy vấn đến các phần tử HTML nhằm định dạng CSS cho chúng.

Ví dụ khi chúng ta muốn định dạng tất cả các thẻ span trong văn bản HTML thì dùng selectors như sau:

span{
  color:red;
}

II. Các dạng selectors thường gặp

1. Selector *

Selector sẽ tác động đến tất cả các thẻ HTML trên trang web. Nhiều người rất hay lạm dụng để reset css như reset tất cả các thẻ về margin 0 và padding 0 chẳng hạn. Theo mình là không nên, tốt nhất là tạo 1 class có margin 0 và padding 0 rồi khi dùng thì gắn class vào thẻ HTML cần dùng là được.

Ví dụ CSS có tất cả các thẻ HTML

*{
    color: blue;
}

Ngoài ra thì selector * có thể dùng để chọn tất cả các phần tử trong 1 phần tử HTML.

Ví dụ CSS cho các phần tử trong thẻ HTML có class là container

.container * {
 border: 1px solid red;
}

2. Selector TagName

Selector TagName sẽ tác động đến các thẻ HTML có tag name mà nó quy định.

Ví dụ CSS cho các thẻ div

div{
  padding: 0px;
}

3. Selector Class

Selector Class sẽ tác động đến tất cả các thẻ HTML có class mà nó đã quy định. Với class selector thì ta có thể tái sử dụng chúng. Đây là sự khác nhau nhau cơ bản giữ selector class và id.

Ví dụ CSS cho các thẻ HTML có Class là banner

.banner{
    color: red;
}

4. Selector ID

Selector ID sẽ tác động đến tất cả các thẻ HTML có ID mà nó đã quy định.

Ví dụ CSS cho các thẻ HTML có ID là banner

#banner{
    color: red;
}

5. Selector phân cấp

Selector phân cấp sẽ cho phép chúng ta css vào các thẻ HTML theo cấp cha con.

Ví dụ CSS cho tất cả các thẻ p bên trong thẻ div. Thẻ div là cha của thẻ p.

div p{
    color: #fff;
}

Ví dụ CSS cho tất cả thẻ span trong thẻ p có class là detail. Class detail là cha của thẻ span.

.detail span{
  color: blue;
}

Ví dụ CSS cho tất cả thẻ li trong thẻ div có id là category. ID category là cha của thẻ ul, thẻ li là con của thẻ ul.

#category ul li{
  padding: 0px;
}

6. Selector nhiều thẻ

Selector nhiều thẻ sẽ cho phép CSS cho nhiều thẻ mà chúng ta muốn định dạng như nhau mà không phải viết lại CSS.

Ví dụ CSS nhiều thẻ span, p, h3.

span, p, h3 {
  color: red;
}

 

7. Các dạng selector khác

X:link: định dạng cho tất cả liên kết khi chưa được click.

a:link { 
  color: red; 
}

X:visited: định dạng cho các thành phần đã được click.

a:visted { 
  color: purple; 
}

X:hover: định dạng cho các thành phần khi hover chuột.

a:hover{
  color: red;
}

X:active: định dạng cho các thành phần được kích hoạt.

a:active{
  color: blue;
}

X:before và X:after: thêm nội dung trước và sau xung quanh thành phần được chọn.

p:before{
  content : "Kiếm tiền từ Web"
}
p:after{
  content : "Tác giả: Ngọc Phương"
}

X:first-child: định dạng phần tử đầu tiên của thành phần cha chứa nó.

div p:first-child {
    color: red;
}

X:first-letter: định dạng ký tự đầu tiền của thành phần cha chứa nó.

div p:first-letter {
    color: red;
}

X:first-line: định dạng cho duy nhất dòng đầu tiên của một thành phần.

div p:first-line {
    color: #ff0000;
}

X:focus: định dạng cho thành phần được focus.

input:focus {
	background: red;
}

X + Y: định dạng cho thành phần liền kề ngay sau selector được khai báo.

ul + p {
   color: red;
}

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.

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

X:not(Y): chỉ định dạng CSS cho những thành phần không phải phần tử được chọn. 

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

X[target]: lấy theo thuộc tính của phần tử được chọn để CSS.

a[title] {
   color: red;
}

Bài viết nên đọc

Trên đây là những kiến thức từ kinh nghiệm bản thân mình nên các bạn có thể tham khảo. Nếu các bạn có góp ý cho mình thì hãy gửi vào đây, mình sẵn sàng nhận ý kiến đóng góp từ các bạn.

Ngoc Phuong

Ngoc Phuong - 82 bài viết - Đánh giá:

Có 2 cách học hiệu quả nhất, 1 là nói cho người khác biết thứ bạn mới học được, 2 là nói cho người khác biết thứ bạn sắp quên. Tôi mới học được rất nhiều thứ. Tôi cũng sắp quên rất nhiều thứ.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công khai