Thứ Ba, Tháng Bảy 5, 2022
HomeWikiCSS Selector là gì? 8 Loại CSS Selector CẦN BIẾT

CSS Selector là gì? 8 Loại CSS Selector CẦN BIẾT

CSS Selector là gì ? 8 Loại CSS Selector CẦN BIẾT

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.

CSS Selector là gì?

CSS Selector là gì?

CSS Selector là gì?

Hiểu đơn giản CSS Selector là thứ

cho phép bạn nhắm tiềm năng tới những thành phần HTML để vận dụng những 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 kiểm soát và điều chỉnh, tạo kiểu cho thành phần HTML nào vậy .

Ví dụ minh họa về CSS Selector

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

CSS Selector trong file CSS

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

Chỉ với8 Bộ chọn CSSnà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

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 Selector

Bộ chọn CSS cơ bản (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: Element. Nó chọn bất kỳ phần tử nào đó.

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

  • Class Selector: .class. Nó chọn tất cả các phần tử có class đã cho.

. hello { color: red; }

  • ID Selector: #id. Nó chọn tất cả các phần tử có id đã cho.

# app { color: red; }

  • Universal selector: *. 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é.

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é.Vàlà một trò rất mê hoặc để bạn rèn luyện sử dụng CSS Selector. Vừa học triết lý về những 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

 

> Tham khảo ngay các khóa học dưới đây để nhanh chóng làm chủ bộ kỹ năng lập trình Web. Học với giảng viên doanh nghiệp. Hỗ trợ việc làm cuối khóa.

  • KHÓA HỌC LẬP TRÌNH PHP
  • KHÓA HỌC LẬP TRÌNH JAVA


 

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.

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

  • Any descendant selector: A B. 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.

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


Chúng ta có thể kết hợp với * để chọn tất cả các phần tử hậu duệ:

 

. paragraph-container * { color: blue; }

CSS Selector trên chọn mọi phần tử bên trong .paragraph-container

Child Selector: A > B. 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é:

 

. paragraph-container >. hello-class { color: blue; }

Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class .hello-class trong HTML này không phải là hậu duệ trực tiếp.

 

. container >. hello-class { color: blue; }


 

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.

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

class =” outside-class “>I’m outside

  • Multiple CSS Selector: A, B, C, D .... Để chọn nhiều phần tử / class / id.

. outside-class,. again-class,. hola-class { color: purple; }


 

4. Combination CSS Selector

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

Code HTML:

class =" container ">

class =" paragraph-container ">

id =" hola-id " class =" hola-class ">Hola world

class =" hello-class ">Hello world

class =" hello-class active ">Hello again world

class =” outside-class “>I’m outside

  • Combination CSS Selector: AB. 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.

p. active { color: yellow; }

Chúng ta hoàn toàn có thể phối hợp nhiều thứ, không phải chỉ có class. ( Nhớ là để chúng sát với nhau )

p# hola-id { color: blue; } . hello-class.active { color: red; }

5. Sibling CSS Selector

Sibling CSS Selector nhắm chọn các phần tử anh chị em.

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

class =” outside-class “>I’m outside

  • Bộ chọn Anh / Chị / Em liền kề (Nghiêm ngặt): A + B. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó.

# hola-id +. hello-class { color: blue; }

Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class .again, mặc dù đó là anh chị em của #hola-id, nhưng nó cách #hola-id 2 phần tử.

# hola-id +. again-class { color: blue; }

  • Bộ chọn Anh / Chị / Em liền kề (Không nghiêm ngặt): A ~ B. 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.

# hola-id ~. hello-class { color: purple; }

Bạn thấy không, nó chọn cả thẻ p bên dưới vì chúng là phần tử anh chị em với nhau và có class là .hello-class

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 giải trí .

. again-class ~ # hola-id { color: red }

6. Pesudo CSS Selector

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

class =” outside-class “>I’m outside

id =” list-id ” class =” list-class “>

class =” list-item-class “>First

class =” list-item-class “>Second

class =” list-item-class “>Third

class =” list-item-class “>Fourth

class =” list-item-class “>Fifth

class =” single-paragraph-container “>

I’m the only child of this span

  • Chọn phần tử đầu tiên: A:first-child. Nó chọn đến phần tử con đầu tiên. (A phải có cha mẹ).

li: first-child { color: blue; }

Bạn đoán thử xem. Nhắm mục tiêu ul:first-child có thành công không?

ul: first-child { color: red; }

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

Điều này là do mặc dù ul có cha mẹ (div với class .container), nhưng ul không phải là con đầu tiên (nó là con thứ 3).

CSS dưới đây sẽ hoạt động vì .paragraph-container là con đầu tiên của .container.

. paragraph-container: first-child { color: red; }

  • Chọn phần tử con cuối cùng: A:last-child. Hoạt động như A:first-child, 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.

li: last-child { color: purple; }

  • 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 (A:first-child) và phần tử con cuối cùng (A:last-child). Ngoại trừ mục tiêu không được có anh chị em nào.

p: only-child { color: red; }

Lưu ý mặc dù chúng ta có một số phần tử p, chỉ phần tử cuối cùng được áp dụng vì các phần tử p khác không phải là phần tử con duy nhất của cha mẹ chúng.

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: A:nth-child(n). Nó chọn từng mục tiêu là con thứ n của cha mẹ nó.

li: nth-child(2) { color: red; }

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

p: nth-child(2) { color: red; }

Bạn có thể thấy tại sao hai phần tử p thay đổi màu sắc?

  • Bộ chọn con thứ N cuối cùng: A:nth-last-child(n). Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng.

li: nth-last-child(2) { color: red; }

  • Không chọn: A:not(B). Chọn tất cả các phần tử A mà không phải B.

p: not(. outside-class) { color: blue; }

  • Bộ chọn loại đầu tiên: A:first-of-type. 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ự :first-child 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:

li: first-of-type { color: blue; }

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

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

p: first-of-type { color: red; }

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

So sánh với p:first-child. Bạn sẽ nhận thấy rằng p ở giữa chuyển sang màu đỏ khi sử dụng :first-of-type.

Điều này là do p ở giữa là loại phần tử p đầu tiên trong số các anh chị em của nó.

  • Bộ chọn loại cuối cùng: A:last-of-type. Giống như trên, nhưng ngược lại.

li: last-of-type { color: blue; }

  • Bộ chọn loại thứ N: A:nth-of-type(n). Cũng giống như hai bộ chọn trên, nhưng nó chọn phần tử thứ N.

li: nth-of-type(2) { color: blue; }

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

p: nth-of-type(2) { color: blue; }

Nếu chúng ta thay đổi nó thành p:nth-of-type(1), thì nó hoạt động giống như first-of-type.

Ngoài ra nếu chúng ta thay đổi nó thành p:nth-of-type(4), không có thay đổi gì. Đây là do không có phần tử p thứ 4 trong số các anh chị em.

  • Bộ chọn Only type: A:only-of-type. Chọn phần tử chỉ có loại đó, không có Anh / Chị / Em.

p: only-of-type { color: purple; }

Chú ý, chúng ta có hai phần tử p đổi màu.

Điều này là do có hai phần tử p 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 (a) (mặc dù chúng có thể hoạt động với các phần tử không liên kết non-link).

Code HTML:

id =" app ">

class =" cheesyLink " href =" # ">I like cheese

class =” sweetLink ” href =” # “>I like donut

class =” burger “>I like cheezburger

class =” container “>

onsubmit =” sự kiện. preventDefault ( ) “>

class =” myinput “type =” text ” / >

class =” mysubmit ” type =” submit ” / >

  • Hover Selector: A:hover. 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.

a: hover { color: red; }

Không chỉ hoạt động với thẻ a. Bộ chọn này hoạt động với mọi thứ.

. burger: hover { color: red; }

  • Focus Selector: A:focus. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với input.

input: focus { background: red; }

  • Active Selector: A:active. Chọn phần tử đang có trạng thái active.

. cheesyLink: active { background: red; }

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

  • Link Selector: A:link. Nó chọn tất cả các link chưa được click.

a: link { background: blue; }

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

Code HTML:) sử dụng để chọn thuộc tính HTML ( ). Code HTML :

for =" chocolate ">Chocolate

for =” peanut “>Peanut

for =” butter “>Butter

Jelly

  • Bộ chọn thuộc tính cơ bản: A[B]. Chọn tất cả các phần tử A có thuộc tính B.

div[for] { color: red; }

  • Bộ chọn thuộc tính cụ thể: A[B="C"]. Chọn các phần tử A có thuộc tính B với giá trị là C.

div[for=" chocolate "]{ color: blue; }

  • A[B^="C"]. Chọn tất cả các phần tử A có thuộc tính B với giá trị bắt đầu là C. Ký tự ^ 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 đơn cử ( Bắt đầu với … ) :. Chọn tổng thể những phần tửcó thuộc tínhvới giá trị mở màn là. Ký tựlà ký tự biểu lộ chuỗi mở màn ( trong ( Regex ) ) .

div[for^ =" cho "] { color: magenta; }

  • Bộ chọn thuộc tính cụ thể (Kết thúc với …): A[B$="C"]. Chọn tất cả các phần tử A có thuộc tính B với giá trị kết thúc là C

    Ký tự$là ký tự bộc lộ chuỗi kết thúc trong ( Biểu thức chính quy ( Regex ) ) .

div[forUSD=" er "] { color: yellow; }

  • Bộ chọn thuộc tính cụ thể (Chứ ký tự …): A[B*="C"]

    Chọn tất cả phần tử A với thuộc tính B chứa giá trị C.

div[for* =" ut "]{ color: cyan; }

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

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.

Hoặc Tự học Lập trình Java onlineCó thể bạn sẽ thích : Hoặctại nhà chỉ với 1 bài viết One for All này

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

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

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

  • Các CSS Selector càng sâu, càng đơn cử 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

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 trong thực tiễn + Tuyển dụng ngay !

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

SĐT : 02435574074 – 0383.180086

E-Mail : hello@niithanoi.edu.vn

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

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

Source: https://entechgadget.com
Category: Wiki

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Bài viết hay nhất

DANH MỤC WEBSITE