Tổng hợp vùng chọn CSS

Trần Đức Lĩnh

Vùng chọn CSS cần nắm thật vững để thao tác tùy vào các element trong HTML một cách chính xác nhất.

Mục lục.

1) Alone

  • Universal

/* Vùng chọn (*) được bao gồm cho tất cả */
* {}
  • Type / element selector

/* Vùng chọn bao hàm các thẻ có cùng h1, hoặc p */
h1 {};
p {};
/* Grouping */
/* Vùng chọn h1 và p được chỉ định dùng chung */
h1, p {};
  • Id

/* Chỉ có một và chỉ một id */
/* div id="id_name" */
#id_name {};
  • Class

/* Tên class được tái sử dụng ở nhiều nơi */
/* div class="class_name" */
.class_name{};
  • Attribute

a[target="_top"] {};
  • Pseudo element

p::first-line {};
p::selection {};

#first::before {};
#secon::after {};
  • Pseudo class

:link {};
:hover {};

2) Combinator

  • Descendant

/* descandant */
div ul {};
/* descandant class selector */
div .ulist {};
/* type class selector */
ul.ulist {};
/* type type.class selector */
div ul.ulist {};
  • Child

/* child - tổ hợp con */
p > li {};

/* --(o)
    |---(o)
    |    |---(x) (not)
         |---(x) (not)
    |---(o)
*/
  • Sibling

    • General
    /* general - chung */
    p ~ li {};
    
    /*|---(o)
        |---(o)
        |---(o)
    */
    • Adjacent
    /* adjacent - liên kề */
    p + li {};
    
    /*|---(o)
        |---(o)
        |---(x) (not)
    */