Các kết hợp trong CSS – Combinator

Việc sử dụng CSS kết hợp rất quan trọng trong việc thiết kế layout trong thiết kế web và lập trình web. Sau đây tôi xin giới thiệu đến các bạn việc kết hợp này.
 
Có bốn loại combinator khác nhau trong CSS và từng loại mang lại lợi ích độc đáo của riêng:
  • Descendant Selector- Selector con cháu
  • Child Selector – Selector con
  • Sibling Selector – Selector anh chị em ruột liền kề
  • Sibling Selector Tổng quát

Descendant Selector

Descendant Selector bao gồm 2 hay nhiều selector phía sau nó, cách nhau bởi khoảng trắng. Trong ví dụ này, nếu chúng ta muốn áp dụng style cho các thẻ
<p>

bên trong thẻ

<div class="facts">

 có class là “facts” chúng ta có thể viết như sau:

.facts p {color : # ff0080 ; }

 

Child Selector

Child Selector có một chút khác biệt so với Descendant Selector. Khác biệt đầu tiên là chúng ta sẽ sử dụng dấu “>” giữa 2 Selector với nhau để truy xuất xuống các con bên dưới. Việc sử dụng cách này chỉ khi nào chúng ta cần áp dụng cho những thẻ con ngay sau thẻ cha một mức.
 
Các bạn xem hình dưới đây:
 
#wrapper > p { color: #ff0080; }

Theo như phần tôi mô tả ở trên và dựa vào hình, chúng ta muốn áp dụng CSS cho 2 thẻ p liền kề thẻ cha div ở trên.

Adjecent Sibling Selector

Adjecent Sibling Selector sẽ áp dụng đối với thẻ nằm ngay sau một thẻ ở cùng một cấp trong kiến trúc cây DOM.  Chúng ta sẽ sử dụng dấu cộng (+) giữa Selector đầu tiên và Selector thứ 2. Các bạn xem hình dưới đây:
 
 
Code trong CSS sẽ như sau:
h1 + p { color: #ff0080; }

Như trong hình vẽ, thẻ p ngay sau thẻ h1 sẽ được áp dụng.

 

General Sibling Selector

General Sibling Selector sẽ áp dụng cho các thẻ liền kề, nhưng không giống như Adjacent Sibling Selector ở trên, nó áp dụng cho tất cả các thẻ liền kề sau thẻ ban đầu chứ không phải duy nhất một thẻ kế cạnh. Nó sử dụng kí hiệu (~) giữa 2 Selector. Các bạn xem hình vẽ bên dưới:
 
 
 
h1 ~ p { color: #ff0080; }

 

Như trên hình vẽ, các bạn sẽ thấy nó áp dụng cho cả 2 thẻ p sau thẻ h1.
 

Kết luận

CSS Combinator giúp giảm thiểu tối đa các khai báo class và ID trong CSS. Nó cũng tốt cho các trình duyệt của chúng ta.

Related Post


Video học bootstrap 3 Tiếng Việt
Monday, November 3, 2014
Bootstrap hiện tại là 1 framework css mạnh và phổ biến hiện nay. Khi đã nắm được nó các bạn sẽ thấy việc phát triển layout website rất thú ví và đơn giản hơn rất nhiều. Bản thân mình cũng sử dụng bootstrap cho khá nhiều dự án của mình. Nhưng chủ yếu là học theo ví dụ kiểu cưỡi ngựa xem hoa và bị hổng kiến thức khá nhiều. Hôm này mò mẫm trên google tìm ra được 1 serial video hướng dẫn bootstrap khá hay, mình nghĩ nó sẽ giúp những cho những bạn chưa biết về bootstrap có cái nhìn tổng quan về framework này, và những thành phần nhác đọc siêng ngủ như mình bù đắp được một số kiến thức bị hổng của bootstrap từ đó hoàn thiện mình hơn....
Làm hiệu ứng hover đẹp mắt với thư viện css3 - hover.css
Tuesday, August 19, 2014
hover.css là một thư viện các hiệu ứng hover css3 có thể dễ dàng áp dụng lên các phần tử website của bạn như button, logo, image... Hiện tại bộ thư viện này có đến hơn 40 hiệu ứng cho các bạn lựa chọn.
Search

Đăng ký nhận bài mới


Category

Blog Archive