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

Question

Nội dung chính Show

Introduction
The subsequent sibling combinator
The subsequent sibling combinator and :first-of-class
CSS Selectors level 4
CSS Selector là gì?
Tại sao bạn cần biết 8 CSS Selector này?
1. Basic CSS Selector
2. Descendant CSS Selector
Học CSS Selector qua Game CSS Dinner
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ệ:
3. Multiple CSS Selector
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)
7. Pesudo-Selector (links và input)
8. Attribute CSS Selector
8. Attribute CSS Selector

Đã đăng vào thg 1 22, 2019 3:09 SA 3 phút đọc 3 phút đọc

Introduction

Như chúng ta đã biết

 id="app">
   class="container">
     class="hello">Hello
 class="hola">Hola


 class="other">
I am left behind...

3 là pseudo-class - có thể hiểu là "giả class", tức ta coi trạng thái, hay thông tin đặc biệt của element như là một class - cho phép chúng ta chọn ra những elements dựa vào vị trí của nó trong document tree. Tuy nhiên khi sử dụng nó thì Selector bắt buộc phải là type selector, tức là chỉ có thể sử dụng trực tiếp với element mà thôi (vd:

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
 class="other">
I am left behind...

4,

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
 class="other">
I am left behind...

5,...)

The :nth-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question.

Giả sử như trong HTML:


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

Và CSS

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

Và ở đây ta mong muốn rằng

 id="app">
   class="container">
     class="hello">Hello
 class="hola">Hola

 class="other">
I am left behind...

6 sẽ có màu đỏ và

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

7 sẽ có màu xanh. Nhưng vì

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

8 không phải là type selector, nên

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

9 sẽ không có tác dụng gì cả và thế nên đương nhiên

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

7 cũng sẽ không có màu xanh:

The subsequent sibling combinator

Với vấn đề như trên, thay vì sử dụng

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

1, chúng ta có thể sử dụng Subsequent sibling

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

2

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

3 giống như

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

4trong đó

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

5 và

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

6là hai

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

7 chứ không bị giới hạn ở

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

8, nó cho phép ta select

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

6 khi mà

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

5 và

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

6 cùng chung thẻ cha và

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

5 ở trước

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

6 trong document tree.

Xét trong vd dưới:


  Heading
  Meta data
  Subheading
  Some article text

Với selector

.hello {
  color: red;
}

4 thì nó sẽ select thẻ

.hello {
  color: red;
}

5 thứ hai theo sau thẻ

.hello {
  color: red;
}

6 chứ không phải thẻ

.hello {
  color: red;
}

5 đầu tiên.

The subsequent sibling combinator and :first-of-class

Chúng ta có thể khiến selector

.hello {
  color: red;
}

8 ở trong vd ban đầu có tác dụng như

.hello {
  color: red;
}

9 qua hai bước:

Dùng selector

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

8 style tất cả các thẻ

.hello {
  color: red;
}

5 special thành màu mong muốn (xanh)

Sau đó dùng
```
#app {
  color: red;
}
```
2
```
#app {
  color: red;
}
```
3 để style tất cả thẻ
```
.hello {
  color: red;
}
```
5 special đứng sau thẻ
```
.hello {
  color: red;
}
```
5 special đầu tiên thành màu tím ban đầu

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

và được kết quả như mong đợi:

CSS Selectors level 4

Trong phiên bản CSS level 4, với pseudo class

#app {
  color: red;
}

6 - cho phép select ra những element là dựa trên vị trí của nó so với những element con khác - nhận tham số dạng

#app {
  color: red;
}

7. Trong đó

#app {
  color: red;
}

8 cho phép ta có thể tạo các function để tính toán giá trị của

#app {
  color: red;
}

9, và option

* {
  color: yellow;
}

0 mang ý nghĩa là pseudo class sẽ match với phần tử

* {
  color: yellow;
}

1 của selector.

Thay vì sử dụng

* {
  color: yellow;
}

2, ta có thể dùng với pseudo class

#app {
  color: red;
}

6 như sau:

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

Summary

Bài viết nhằm chia sẻ một vài trick về

* {
  color: yellow;
}

4, bài viết không tránh khỏi những hạn chế và thiếu sót, cảm ơn các bạn đã dành thời gian theo dõi.

Nguồn:

https://dev.to/philnash/css-select-first-of-class-with-the-subsequent-sibling-combinator-13li
https://www.w3.org/TR/selectors/#general-sibling-combinators
https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107

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ì?

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

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:

 id="app">
   class="container">
     class="hello">Hello
 class="hola">Hola

 class="other">
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; }

0

Element Selector:
```
* {
  color: yellow;
}
```
5. Nó chọn bất kỳ phần tử nào đó.

Class Selector:

* {
  color: yellow;
}

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

* {
  color: yellow;
}

7 đã cho.

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ệ:

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

2

ID Selector:

* {
  color: yellow;
}

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

* {
  color: yellow;
}

9 đã cho.

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ử.

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

3

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

4

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

5

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

6

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

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

Child Selector:

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

04. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.

Code HTML:

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

7

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

8

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.

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

9

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

5

Code HTML:


  Heading
  Meta data
  Subheading
  Some article text

1

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.


  Heading
  Meta data
  Subheading
  Some article text

2

4. Combination CSS Selector


  Heading
  Meta data
  Subheading
  Some article text

3

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.

Combination CSS Selector:

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

08. Cho phép chọn phần tử chứa cả A và B. Cú pháp trông giống như Descendant CSS Selector, ngoại trừ phần này không có khoảng trắng.


  Heading
  Meta data
  Subheading
  Some article text

4

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

5

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

6

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ệ:


  Heading
  Meta data
  Subheading
  Some article text

7

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

03

Child Selector:

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

04. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.

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


  Heading
  Meta data
  Subheading
  Some article text

8

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

9

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

0

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

1

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

2

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

3

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

4

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

36 nhỉ?

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

5

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

37 😅.

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

6

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

38. Bạn sẽ nhận thấy rằng

.hello {
  color: red;
}

5 ở giữa chuyển sang màu đỏ khi sử dụng

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

40

Điều này là do

.hello {
  color: red;
}

5 ở giữa là loại phần tử

.hello {
  color: red;
}

5 đầu tiên trong số các anh chị em của nó.

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

7

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

8

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

9

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

45, thì nó hoạt động giống như

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

46.

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

47, không có thay đổi gì. Đây là do không có phần tử

.hello {
  color: red;
}

5 thứ 4 trong số các anh chị em.

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

0

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

.hello {
  color: red;
}

5 đổi màu.

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

.hello {
  color: red;
}

5 này không có Anh / Chị / Em cùng loại.

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

52) (mặc dù chúng có thể hoạt động với các phần tử không liên kết

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

53).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; }

52) (mặc dù chúng có thể hoạt động với các phần tử không liên kết

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

53).

Code HTML:

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

1

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

2

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 :nth-child(1 of p.special) { color: green; }

3

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

4

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

5

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

6

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

7

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

8

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ứ.

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.

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)).

 id="app">
   class="container">
     class="hello">Hello
 class="hola">Hola

 class="other">
I am left behind...

0

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)).

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

1

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.

 id="app">
   class="container">
     class="hello">Hello
     class="hola">Hola
  
   class="other">
    I am left behind...

2

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.

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

60. 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.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.

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

63. Chọn 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ị là

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

66.Nguyên tắc Độ đặc hiệu thấp thì:

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ì:
https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/
https://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;
}

6)

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:

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

programming css CSS class first-child nth-child Nth-of-class First-child CSS CSS selector Class CSS first-of-type First-child trong CSS

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

Introduction

The subsequent sibling combinator

Heading

Subheading

The subsequent sibling combinator and :first-of-class

CSS Selectors level 4

Summary

CSS Selector là gì?

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

1. Basic CSS Selector

2. Descendant CSS Selector

Học CSS Selector qua Game CSS Dinner

3. Multiple CSS Selector

Heading

Subheading

Heading

Subheading

Heading

Subheading

Heading

Subheading

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)

Heading

Subheading

Heading

Subheading

Heading

Subheading

Heading

Subheading

Heading

Subheading

7. Pesudo-Selector (links và input)

8. Attribute CSS Selector

8. Attribute CSS Selector

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội