Hướng dẫn selection css - lựa chọn css

• Trang chủ
• Tham khảo
• CSS
• CSS3
• ::selection

Nội dung chính Show

• Định nghĩa và sử dụng
• Cấu trúc
• Hiển thị trình duyệt khi đã có css:
• 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
• .container .hello-class { color: red; } Chúng ta có thể kết hợp với .hello { color: red; }6 để chọn tất cả các phần tử hậu duệ:
• ID Selector: .hello { color: red; }4. Nó chọn tất cả các phần tử có .hello { color: red; }5 đã cho.
• 6. Pesudo CSS Selector
• 7. Pesudo-Selector (links và input)
• 8. Attribute CSS Selector
• Bạn đã biết quá nhiều về CSS Selector...

Định nghĩa và sử dụng

• "::selection" chọn phần tử được người dùng chọn.

Cấu trúc

::selection {
    property: value; 
}

::-moz-selection{
    property: value;
}

Ví dụ

HTML viết:

Hãy chọn một đoạn text để thấy hiệu ứng

Hiển thị trình duyệt khi chưa có CSS:

Hãy chọn một đoạn text để thấy hiệu ứng

CSS viết:

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Hiển thị trình duyệt khi đã có css:

Hãy chọn một đoạn text để thấy hiệu ứng

CSS viết:

Hiển thị trình duyệt khi đã có css:

Đoạn text được chọn sẽ có màu xanh, hãy chọn một đoạn text để thấy hiệu ứng.

Trình duyệt hỗ trợ::-moz-selection

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:

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

 class="hola">Hola

• Element Selector:

  .hello {
    color: red;
  }

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

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

• Class Selector:

  .hello {
    color: red;
  }

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

  .hello {
    color: red;
  }

  3 đã cho.

.hello {
  color: red;
}

• ID Selector:

  .hello {
    color: red;
  }

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

  .hello {
    color: red;
  }

  5 đã cho.

#app {
  color: red;
}

• Universal selector:

  .hello {
    color: red;
  }

  6. 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:

 class="container">
   class="paragraph-container">
     id="hola-id" class="hola-class">Hola World

 class="hello-class">Hello World

 class="hello-class again-class">Hello Again World

• Element Selector:

  .hello {
    color: red;
  }

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

.hello {
  color: red;
}

.hello {
  color: red;
}

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

.hello {
  color: red;
}

Hãy chọn một đoạn text để thấy hiệu ứng

ID Selector:

.hello {
  color: red;
}

.hello {
  color: red;
}

Universal selector:

.hello {
  color: red;
}

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

Hãy chọn một đoạn text để thấy hiệu ứng

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

Hãy chọn một đoạn text để thấy hiệu ứng

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.

Hãy chọn một đoạn text để thấy hiệu ứng

• Any descendant selector:

  .hello {
    color: red;
  }

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

Hãy chọn một đoạn text để thấy hiệu ứng

.container .hello-class { color: red; } Chúng ta có thể kết hợp với .hello { color: red; }6 để 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

.hello {
  color: red;
}

Child Selector:

#app {
  color: red;
}

Code HTML:

Hãy chọn một đoạn text để thấy hiệu ứng

• Element Selector:

  .hello {
    color: red;
  }

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

Hãy chọn một đoạn text để thấy hiệu ứng

Class Selector:

.hello {
  color: red;
}

.hello {
  color: red;
}

Hãy chọn một đoạn text để thấy hiệu ứng

ID Selector: .hello { color: red; }4. Nó chọn tất cả các phần tử có .hello { color: red; }5 đã cho.

Universal selector:

.hello {
  color: red;
}

Code HTML:

Hãy chọn một đoạn text để thấy hiệu ứng

• Element Selector:

  .hello {
    color: red;
  }

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

Hãy chọn một đoạn text để thấy hiệu ứng

Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class

#app {
  color: red;
}

#app {
  color: red;
}

#app {
  color: red;
}

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

• Bộ chọn Anh / Chị / Em liền kề (Không nghiêm ngặt):

  #app {
    color: red;
  }

  9. Giống như bộ chọn bên trên nhưng không giới hạn 1 phần tử đầu tiên.

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Bạn thấy không, nó chọn cả thẻ

* {
  color: yellow;
}

#app {
  color: red;
}

Lưu ý: Bộ chọn này không hoạt động ngược lại.

Thế nên CSS bên dưới không hoạt động.

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

6. Pesudo CSS Selector

Code HTML:

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

• Chọn phần tử đầu tiên:

  * {
    color: yellow;
  }

  2. Nó chọn đến phần tử con đầu tiên. (

  * {
    color: yellow;
  }

  3 phải có cha mẹ).

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Bạn đoán thử xem. Nhắm mục tiêu

* {
  color: yellow;
}

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Chẳng có gì xảy ra.

Điều này là do mặc dù

* {
  color: yellow;
}

* {
  color: yellow;
}

* {
  color: yellow;
}

CSS dưới đây sẽ hoạt động vì

.hello {
  color: red;
}

* {
  color: yellow;
}

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

• Chọn phần tử con cuối cùng: A:last-child. Hoạt động như

  * {
    color: yellow;
  }

  2, ngoại trừ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng.

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

• Chỉ chọn phần tử con: A:only-child. Chọn tất cả A là con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên (

  * {
    color: yellow;
  }

  2) và phần tử con cuối cùng (

   class="container">
     class="paragraph-container">
       id="hola-id" class="hola-class">Hola World
  
   class="hello-class">Hello World
  
   class="hello-class again-class">Hello Again World
  
  
  

  2). Ngoại trừ mục tiêu không được có anh chị em nào.

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Lưu ý mặc dù chúng ta có một số phần tử

* {
  color: yellow;
}

* {
  color: yellow;
}

Nói cách khác, phần tử con có anh chị em thì không được áp dụng.

• Bộ chọn phần tử con thứ N:

   class="container">
     class="paragraph-container">
       id="hola-id" class="hola-class">Hola World
  
       class="hello-class">Hello World
  
       class="hello-class again-class">Hello Again World
  
    
  

  5. Nó chọn từng mục tiêu là con thứ

   class="container">
     class="paragraph-container">
       id="hola-id" class="hola-class">Hola World
  
       class="hello-class">Hello World
  
       class="hello-class again-class">Hello Again World
  
    
  

  6 của cha mẹ nó.

::selection{
    background: blue;
}

::-moz-selection{
    background: blue;
}

Hãy thử với phần tử

* {
  color: yellow;
}

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

     class="hola">Hola

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

Bạn có thể thấy tại sao hai phần tử

* {
  color: yellow;
}

• Bộ chọn con thứ N cuối cùng:

   class="container">
     class="paragraph-container">
       id="hola-id" class="hola-class">Hola World
  
       class="hello-class">Hello World
  
       class="hello-class again-class">Hello Again World
  
    
  

  9. Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng.

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

     class="hola">Hola

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

• Không chọn:

  .container .hello-class {
    color: red;
  }

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

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

     class="hola">Hola

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

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

  .container .hello-class {
    color: red;
  }

  1. 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ự

.container .hello-class {
  color: red;
}

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:

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

     class="hola">Hola

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

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

.container .hello-class {
  color: red;
}

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

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

     class="hola">Hola

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

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

So sánh với

.container .hello-class {
  color: red;
}

* {
  color: yellow;
}

.container .hello-class {
  color: red;
}

Điều này là do

* {
  color: yellow;
}

* {
  color: yellow;
}

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

  .container .hello-class {
    color: red;
  }

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

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

     class="hola">Hola

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

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

     class="hola">Hola

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

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

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

     class="hola">Hola

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

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

Hãy chọn một đoạn text để thấy hiệu ứng

Hãy chọn một đoạn text để thấy hiệu ứng

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

Hãy chọn một đoạn text để thấy hiệu ứng

* {
  color: yellow;
}

• Bộ chọn Only type:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

     class="hola">Hola

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

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

* {
  color: yellow;
}

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

* {
  color: yellow;
}

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 (

Hãy chọn một đoạn text để thấy hiệu ứng

Hãy chọn một đoạn text để thấy hiệu ứng

Hãy chọn một đoạn text để thấy hiệu ứng

Hãy chọn một đoạn text để thấy hiệu ứng

Code HTML:

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

     class="hola">Hola

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

• Hover Selector:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

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

Hãy chọn một đoạn text để thấy hiệu ứng

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

• Focus Selector:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  13.

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

• Active Selector:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

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

• Link Selector:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

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:

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

• Hover Selector:

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

Hãy chọn một đoạn text để thấy hiệu ứng

Hãy chọn một đoạn text để thấy hiệu ứng

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  * {
    color: yellow;
  }

  3 có thuộc tính

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  22. Ký tự

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

• Bộ chọn thuộc tính cụ thể (Kết thúc với ...):

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  * {
    color: yellow;
  }

  3 có thuộc tính

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  22. Ký tự 

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  32 là ký tự thể hiện chuỗi kết thúc trong (Biểu thức chính quy (Regex)).Ký tự 

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

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

• Bộ chọn thuộc tính cụ thể (Chứ ký tự ...):

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  * {
    color: yellow;
  }

  3 với thuộc tính

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  18 chứa giá trị

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

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

  * {
    color: yellow;
  }

  3 với thuộc tính

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  18 chứa giá trị

  
  
  
  Hãy chọn một đoạn text để thấy hiệu ứng
  
  

  22.

.hello {
  color: red;
}

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

Mi đã biết quá nhiều về CSS Selector

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.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ì:Nguyên tắc Độ đặc hiệu thấp thì:

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

  .hello {
    color: red;
  }

  2)
• Và đặt tên class theo nguyên tắc BEM để quản lý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á đủ.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é!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
https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0383.180086

Email:

Fanpage: https://facebook.com/NIIT.ICT/

#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php #java #python