Hướng dẫn css first-of-class - css hạng nhất

  
    Hello

    Hola

  

  
    Hello

    Hola

  
  
    I am left behind...
  

  
    Hello

    Hola

  
  
    I am left behind...
  

  
This is paragraph 1
  
This is paragraph 2
  
This is paragraph 3
  
This is paragraph 4

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

  
    Hello

    Hola

  
  
    I am left behind...
  

  
    Hello

    Hola

  
  
    I am left behind...
  

  
    Hello

    Hola

  
  
    I am left behind...
  

  
    Hello

    Hola

  
  
    I am left behind...
  

  
    Hello

    Hola

  
  
    I am left behind...
  

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

  
Heading
  
Meta data
  
Subheading
  
Some article text

.hello {
  color: red;
}

.hello {
  color: red;
}

.hello {
  color: red;
}

.hello {
  color: red;
}

.hello {
  color: red;
}

.hello {
  color: red;
}

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

#app {
  color: red;
}

#app {
  color: red;
}

#app {
  color: red;
}

#app {
  color: red;
}

* {
  color: yellow;
}

* {
  color: yellow;
}

* {
  color: yellow;
}

#app {
  color: red;
}

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

* {
  color: yellow;
}

Biết cách sử dụng các Bộ chọn CSS [hay còn gọi là CSS Selector] là một kỹ năng bắt buộc của lập trình viên front end.Bộ chọn CSS [hay còn gọi là CSS Selector] là một kỹ năng bắt buộc của lập trình viên front end.

CSS Selector là gì?

CSS Selector là gì?

Hiểu đơn giản CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng.CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng.

CSS Selector giống như là đường đẫn, chỉ định để cho CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy.

Đây là file HTML và file CSS. Và bạn sẽ viết CSS để điều chỉnh, tạo kiểu cho phần tử HTML.

CSS Selector trong file CSS

Qua bài viết này, bạn sẽ được tìm hiểu về 8 Loại CSS Selector phổ biến nhất.8 Loại CSS Selector phổ biến nhất.

Chỉ với 8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp.8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp.

Tại sao bạn cần biết 8 CSS Selector này?

8 Loại CSS Selector Phổ biến nhất

Mặc dù có rất nhiều CSS Selector khác, nhưng mình thấy chúng thiếu tổ chức, thiếu ví dụ hoặc có quá nhiều thông tin.

Đó là lý do tại sao mình nhóm CSS Selector này thành 8 loại chung.

Khi bắt đầu tìm hiểu về mỗi nhóm, bạn sẽ thấy có một đoạn mã HTML.

Hãy sử dụng đoạn mã HTML đấy để thử nghiệm loại CSS Selector được giới thiệu trong nhóm.

Lưu ý: Danh sách này không đầy đủ và nó còn tiếp tục được update.

Nhưng về cơ bản, nó sẽ đáp ứng hầu hết các nhu cầu sử dụng CSS Selector của bạn.

Mục lục:

• 1. Basic CSS Selectors
• 2. Descendant CSS Selectors
• 3. Multiple CSS Selector
• 4. Combination CSS Selectors
• 5. Sibling CSS Selectors
• 6. Pseudo CSS Selectors
• 7. Pseudo CSS Selectors [link và input]
• 8. Attribute CSS Selectors

1. Basic CSS Selector

Bộ chọn CSS cơ bản [Basic CSS Selector] sử dụng chọn element / class / id. [Basic CSS Selector] sử dụng chọn element / class / id.

Chúng được sử dụng thường xuyên nhất và dễ nhớ nhất.

... Như đã nói từ trước, đây là code HTML sử dụng để cho bạn chơi với Basic CSS Selector.

Code HTML:

  
    Hello

    Hola

  
  
    I am left behind...
  

• Element Selector:

  * {
    color: yellow;
  }

  5. Nó chọn bất kỳ phần tử nào đó.

p { color: blue; }
div { color: magenta; }

• Class Selector:

  * {
    color: yellow;
  }

  6. Nó chọn tất cả các phần tử có

  * {
    color: yellow;
  }

  7 đã cho.

.hello {
  color: red;
}

• ID Selector:

  * {
    color: yellow;
  }

  8. Nó chọn tất cả các phần tử có 

  * {
    color: yellow;
  }

  9 đã cho.

#app {
  color: red;
}

• Universal selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  00. Nó chọn tất cả các phần tử.

* {
  color: yellow;
}

> Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.

Và CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé.CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé.

Học CSS Selector qua Game CSS Dinner

2. Descendant CSS Selector

Đây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.

Code HTML:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• Element Selector:

  * {
    color: yellow;
  }

  5. Nó chọn bất kỳ phần tử nào đó.

* {
  color: yellow;
}

* {
  color: yellow;
}

Chúng ta có thể kết hợp với

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

ID Selector:

* {
  color: yellow;
}

* {
  color: yellow;
}

Universal selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

> Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Và CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor [bên dưới đây] và dùng nó để vượt qua 32 Level này nhé.

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Học CSS Selector qua Game CSS Dinner

2. Descendant CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau.

Đây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• Any descendant selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  01. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâu.

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

1 Chúng ta có thể kết hợp với

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

00 để chọn tất cả các phần tử hậu duệ:

CSS Selector trên chọn mọi phần tử bên trong

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Child Selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Code HTML:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• Thử nghiệm với CSS như sau để xem kết quả nhé:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

3.  Multiple CSS Selector

Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau. nhắm chọn các phần tử anh chị em.

Code HTML:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• Code HTML:

  
Heading
  
Meta data
  
Subheading
  
Some article text

Multiple CSS Selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

  
Heading
  
Meta data
  
Subheading
  
Some article text

• 4. Combination CSS Selector

  
Heading
  
Meta data
  
Subheading
  
Some article text

Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu.

Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột [hovered] / nhấp [clicked] bằng cách cung cấp cho chúng một class

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Combination CSS Selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

  
Heading
  
Meta data
  
Subheading
  
Some article text

Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có class. [Nhớ là để chúng sát với nhau]

Đây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.

  
Heading
  
Meta data
  
Subheading
  
Some article text

• Any descendant selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  01. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâu.

  
Heading
  
Meta data
  
Subheading
  
Some article text

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

  
Heading
  
Meta data
  
Subheading
  
Some article text

CSS Selector trên chọn mọi phần tử bên trong

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Child Selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Thử nghiệm với CSS như sau để xem kết quả nhé:

  
Heading
  
Meta data
  
Subheading
  
Some article text

• Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  05 trong HTML này không phải là hậu duệ trực tiếp.

  
Heading
  
Meta data
  
Subheading
  
Some article text

• 3.  Multiple CSS Selector

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau.

Code HTML:

• Multiple CSS Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  06 . Để chọn nhiều phần tử / class / id.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

4. Combination CSS Selector

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu.

• Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột [hovered] / nhấp [clicked] bằng cách cung cấp cho chúng một class

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  07.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

• Không chọn:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  34. Chọn tất cả các phần tử A mà không phải B.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

• Bộ chọn loại đầu tiên:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  35. Nó chọn phần tử đầu tiên thuộc loại này trong số các phần tử anh chị em của nó.

Nghe có vẻ tương tự

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Nhưng không phải.

Để cảm nhận sự khác biệt của nó, hãy thử nghịch nó xem sao:

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Ok, đó không phải là một ví dụ hay vì nó cho thấy kết quả tương tự như

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Hãy làm một ví dụ khác:

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Cái này thì tốt hơn.

So sánh với

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

.hello {
  color: red;
}

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Điều này là do

.hello {
  color: red;
}

.hello {
  color: red;
}

• Bộ chọn loại cuối cùng:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  43. Giống như trên, nhưng ngược lại.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

• Bộ chọn loại thứ N:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  44. Cũng giống như hai bộ chọn trên, nhưng nó chọn phần tử thứ N.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Hãy thử với phần tử khác.

div p { color: purple; }
div p:first-of-type { color: red; }
div p.special { color: green; }
div p.special ~ p.special { color: purple; }

Nếu chúng ta thay đổi nó thành

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Ngoài ra nếu chúng ta thay đổi nó thành

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

.hello {
  color: red;
}

• Bộ chọn Only type:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  49. Chọn phần tử chỉ có loại đó, không có Anh / Chị / Em.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

Chú ý, chúng ta có hai phần tử

.hello {
  color: red;
}

Điều này là do có hai phần tử

.hello {
  color: red;
}

7. Pesudo-Selector [links và input]

Dưới đây là danh sách các pesudo selector khác. Chúng thường được liên kết với các liên kết [

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

Code HTML:

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

• Hover Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  54. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

Không chỉ hoạt động với thẻ 

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

• Focus Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  56. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  57.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

• Active Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  58. Chọn phần tử đang có trạng thái active.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

Lưu ý khi bạn click vào nó, nền [background] sẽ thay đổi.

• Link Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  59. Nó chọn tất cả các link chưa được click.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

8. Attribute CSS Selector

Bộ chọn thuộc tính CSS [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes]. [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes].

Code HTML:

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

• Hover Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  54. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

div p { color: purple; }
div p:first-of-type { color: red; }
div :nth-child[1 of p.special] { color: green; }

• Không chỉ hoạt động với thẻ 

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  52. Bộ chọn này hoạt động với mọi thứ.

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• Bộ chọn thuộc tính cụ thể [Bắt đầu với ...]:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  67. Chọn tất cả các phần tử

  p { color: blue; }
  div { color: magenta; }

  5 có thuộc tính

  p { color: blue; }
  div { color: magenta; }

  6 với giá trị bắt đầu là

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  66. Ký tự

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  71 là ký tự thể hiện chuỗi bắt đầu [trong Biểu thức chính quy [Regex]].

  
    Hello

    Hola

  
  
    I am left behind...
  

• Active Selector:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  58. Chọn phần tử đang có trạng thái active.Ký tự 

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  76 là ký tự thể hiện chuỗi kết thúc trong [Biểu thức chính quy [Regex]].

  
    Hello

    Hola

  
  
    I am left behind...
  

• Lưu ý khi bạn click vào nó, nền [background] sẽ thay đổi.Chọn tất cả phần tử

  p { color: blue; }
  div { color: magenta; }

  5 với thuộc tính

  p { color: blue; }
  div { color: magenta; }

  6 chứa giá trị

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  66.

  
    Hello

    Hola

  
  
    I am left behind...
  

Link Selector:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

8. Attribute CSS Selector

Bộ chọn thuộc tính CSS [Attribute CSS Selector] sử dụng để chọn thuộc tính HTML [HTML Attributes].

Bộ chọn thuộc tính cơ bản:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

Bộ chọn thuộc tính cụ thể:

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

p { color: blue; }
div { color: magenta; }

p { color: blue; }
div { color: magenta; }

div p {color: purple; }
div p:first-of-type { color: red; }
div p.special:first-of-type { color: green; }

• div p { color: purple; }
  div p:first-of-type { color: red; }
  div :nth-child[1 of p.special] { color: green; }
  

  9 Bộ chọn thuộc tính cụ thể [Bắt đầu với ...]:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  67. Chọn tất cả các phần tử

  p { color: blue; }
  div { color: magenta; }

  5 có thuộc tính

  p { color: blue; }
  div { color: magenta; }

  6 với giá trị bắt đầu là

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  66. Ký tự

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  71 là ký tự thể hiện chuỗi bắt đầu [trong Biểu thức chính quy [Regex]].
• Bộ chọn thuộc tính cụ thể [Kết thúc với ...]:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  72. Chọn tất cả các phần tử

  p { color: blue; }
  div { color: magenta; }

  5 có thuộc tính

  p { color: blue; }
  div { color: magenta; }

  6 với giá trị kết thúc là

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  66. Ký tự 

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  76 là ký tự thể hiện chuỗi kết thúc trong [Biểu thức chính quy [Regex]].BEM để quản lý
• Bộ chọn thuộc tính cụ thể [Chứ ký tự ...]:

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  77. Chọn tất cả phần tử

  p { color: blue; }
  div { color: magenta; }

  5 với thuộc tính

  p { color: blue; }
  div { color: magenta; }

  6 chứa giá trị

  div p {color: purple; }
  div p:first-of-type { color: red; }
  div p.special:first-of-type { color: green; }
  

  66.

Ok, đến đây, mình rât tiếc phải xin lỗi rằng:

Bạn đã biết quá nhiều về CSS Selector...CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ.

Mi đã biết quá nhiều về CSS SelectorChia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé!

Với 8 Bộ CSS Selector này mình tin rằng đáp ứng đầy đủ cho bạn trong quá trình lập trình web / app.

Thậm chí, với các nguyên tắc viết CSS mang lại hiệu suất tốt như Nguyên tắc Độ đặc hiệu thấp thì:
//guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/
//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Nên sử dụng CSS Selector cùng một độ đặc hiệu [như là

* {
  color: yellow;
}

Và đặt tên class theo nguyên tắc BEM để quản lý

Các CSS Selector càng sâu, càng cụ thể càng làm giảm hiệu suất.

Vì thế,

Bạn chỉ cần hiểu CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ.

Nếu thấy hay thì hãy Chia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé!

Tham khảo:

//www.w3schools.com/cssref/css_selectors.asp //guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/ //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors