Các loại selector trong CSS - CSS Combinators

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    336 lượt xem


CSS Combinators là tổ hợp các selector trong CSS, nó sẽ giúp cho việc CSS cho các phần tử trở nên đa dạng hơn.

CSS Combinators

CSS Selector có thể chứa nhiều selector đơn giản. Giữa các selector đơn giản, chúng ta có một combinators.

Có 4 combinator khác nhau:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Descendant Selector

Descendant selector chọn tất cả các element là con của một element được chỉ định.

Ví dụ sau đây chọn tất cả các element <p> bên trong các element <div>:

div p {    background-color: yellow;  }

 

Child Selector (>)

Child Selector chọn tất cả các element là con của một element được chỉ định.

Ví dụ sau đây chọn tất cả các element <p> là con của element <div>:

div > p {    background-color: yellow;  }

 

Adjacent Sibling Selector (+)

Adjacent Sibling Selector được sử dụng để chọn một element nằm ngay sau một element cụ thể khác.

Các element anh chị em phải có cùng một element mẹ và "liền kề" có nghĩa là "nằm ngay sau đó".

Ví dụ sau đây chọn element <p> đầu tiên được đặt ngay sau element <div>:

div + p {    background-color: yellow;  }

 

General Sibling Selector (~)

General Sibling Selector chọn tất cả các element là anh chị em tiếp theo của một element được chỉ định.

div ~ p {    background-color: yellow;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.