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

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;  }