Hướng dẫn sử dụng CSS Selectors kết hợp

Xem thêm các chuyên mục:

1- Descendant combinator

Descendant combinator (Bộ kết hợp hậu duệ): Một khoảng trắng (white space) được đặt giữa 2 Selector, chẳng hạn ( A  B ). Đầu tiên, nó tìm kiếm tất cả các phần tử phù hợp với Selector 1 và nhận được kết quả 1, sau đó nó tìm kiếm các phần tử là hậu duệ (descendant) của các phần tử trong kết quả 1 và phù hợp với Selector 2 và nhận được kết quả 2. Kết quả 2 chính là thứ được trông đợi.
Cú pháp:
selector1  selector2  {

}

selector1  selector2  selector3 {

}
Ví dụ, tìm kiếm các phần tử <span> là hậu duệ của các phần tử <div>:
div  span  {
   background: yellow;
}
Ví dụ, tìm kiếm tất cả các phần tử <li> là hậu duệ của các phần tử "ul.sidebar".
/* List items that are descendants of the "sidebar" list */
ul.sidebar li {
  margin: 2em;
}
Ví dụ:
combinator-example1.css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
combinator-example1.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Descendant combinator</title>
      <link rel="stylesheet" type="text/css" href="combinator-example1.css" />
   </head>
   <body>
      <h3>CSS Descendant combinator</h3>
      <ul>
         <li>
            <div>CSS</div>
            <ul>
               <li>
                  <div>CSS Selectors</div>
                  <ul>
                     <li>Basic Selectors</li>
                     <li>Combinator</li>
                  </ul>
               </li>
               <li>CSS Tables</li>
            </ul>
         </li>
         <li>
            <div>Java</div>
            <ul>
               <li>Spring</li>
               <li>Struts</li>
            </ul>
         </li>
      </ul>
   </body>
</html>

2- Child combinator

Child combinator (Bộ kết hợp con): Ký tự "lớn hơn" ( > ) được đặt giữa 2 Selector, chẳng hạn ( A > B ). Đầu tiên, nó tìm kiếm tất cả các phần tử phù hợp với Selector 1 và nhận được kết quả 1, sau đó nó tìm kiếm các phần tử là con trực tiếp của các phần tử trong kết quả 1 và phù hợp với Selector 2 và nhận được kết quả 2. Kết quả 2 chính là thứ được trông đợi.
Cú pháp:
selector1 > selector2 {

}

selector1  > selector2 >  selector3 {

}
Ví dụ:
combinator-example3.css
div.box {
   margin: 5px;
   padding: 5px;
   border: 1px solid green;
}

div.box > p.title {
   font-size: 20px;
   color: blue;
}
combinator-example3.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Descendant combinator</title>
      <link rel="stylesheet" type="text/css" href="combinator-example3.css" />
   </head>
   <body>
      <h3>CSS Child combinator</h3>

       <div class="box">
           <p class="title">CSS</p>
           <p class="content">
               CSS stands for Cascading Style Sheets,...
           </p>
       </div>


       <div class="box">
           <p class="title">Javascript</p>
           <p class="content">
               JavaScript is a scripting or programming language that
               allows you to implement complex features on web pages,...
           </p>
       </div>
   </body>
</html>

3- General sibling combinator

General sibling combinator (Bộ kết hợp anh chị em nói chung): Dấu ( ~ ) được đặt giữa 2 Selector, chẳng hạn (A ~ B). Đầu tiên, nó tìm kiếm tất cả các phần tử phù hợp với Selector 1 và nhận được kết quả 1, sau đó nó tìm kiếm các phần tử là "anh chị em trẻ hơn" (younger siblings) của các phần tử trong kết quả 1 và phù hợp với Selector 2 và nhận được kết quả 2. Kết quả 2 chính là thứ được trông đợi.
Ví dụ:
combinator-example5.css
a {
   margin:5px;
   font-size: 20px;
}

.menubar {
   margin: 10px 0px;
   padding: 5px;
   border: 1px solid #ddd;
}

a:hover {
    color: blue;
    font-weight: bold;
}

a:hover ~ a {
    font-size: 80%;
    font-style: italic;
    color: black;
}
combinator-example5.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS General Sibling combinator</title>
      <link rel="stylesheet" type="text/css" href="combinator-example5.css" />
   </head>
   <body>
      <h3>CSS General Sibling combinator</h3>

       <a href="#">Top Link</a>

       <div class="menubar">
            <a href="#">CSS</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">Bootstrap</a>
            <a href="#">jQuery</a>
       </div>

   </body>
</html>

4- Adjacent sibling combinator

Adjacent sibling combinator (Bộ kết hợp anh chị em liền kề): Dấu ( + ) được đặt giữa 2 Selector, chẳng hạn (A + B). Đầu tiên, nó tìm kiếm tất cả các phần tử phù hợp với Selector 1 và nhận được kết quả 1, sau đó nó tìm kiếm các phần tử là "anh chị em liền kề trẻ hơn" (younger adjacent siblings) của các phần tử trong kết quả 1 và phù hợp với Selector 2 và nhận được kết quả 2. Kết quả 2 chính là thứ được trông đợi.
Ví dụ:
combinator-example7.css
a {
   margin:5px;
   font-size: 20px;
}

.menubar {
   margin: 10px 0px;
   padding: 5px;
   border: 1px solid #ddd;
}

a:hover {
    color: red;
    font-weight: bold;
}

a:hover + a {
    font-size: 80%;
    font-style: italic;
    color: black;
}
combinator-example7.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Adjacent Sibling combinator</title>
      <link rel="stylesheet" type="text/css" href="combinator-example7.css" />
   </head>
   <body>
      <h3>CSS Adjacent Sibling combinator</h3>

       <a href="#">Top Link</a>

       <div class="menubar">
            <a href="#">CSS</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">Bootstrap</a>
            <a href="#">jQuery</a>
       </div>

   </body>
</html>

5- Column combinator

Column Combinator: đang trong quá trình thử nghiệm, chưa được các trình duyệt hỗ trợ.

Xem thêm các chuyên mục: