HHtml/CSS

Sử dụng :where() và :is() trong CSS Selector – Ngắn gọn và mạnh mẽ

0
Shares
0
0
0
0
Table of Contents Hide
  1. I. Tại sao chúng ta cần :where() và :is()?
  2. II. Sử Dụng :where() và :is()
    1. 1. Sử dụng :where()
    2. 2. Sử dụng :is()
  3. III. Ưu điểm và Lưu ý
    1. 1. Ngắn Gọn và Dễ Đọc:
    2. 2. Tích hợp Dễ Dàng:
    3. 3. Dễ Bảo Trì:
    4. 4. Trình duyệt hỗ trợ:
  4. IV. Kết Luận

CSS (Cascading Style Sheets) ngày càng phát triển với những tính năng mới, và một số pseudo-classes mới như :where() và :is() đã giúp làm cho việc chọn lựa và áp dụng kiểu cho các phần tử trở nên linh hoạt và dễ dàng hơn. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng :where() và :is() để tối ưu hóa CSS selector.

I. Tại sao chúng ta cần :where() và :is()?

Trước khi có những pseudo-classes này, để áp dụng kiểu cho nhiều selector, chúng ta thường phải sử dụng một danh sách dài các selector, đôi khi dẫn đến mã CSS dài và khó đọc. Cùng xem xét một ví dụ:

CSS
h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Trong trường hợp này, chúng ta muốn áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6. Tuy nhiên, khi cần loại bỏ một số phần tử khỏi danh sách, chúng ta phải lặp lại toàn bộ danh sách và loại bỏ chúng:

CSS
h1, h2, h3, h5, h6 {
  color: blue;
}

Với :where() và :is(), chúng ta có cách tiếp cận mới giúp giảm sự lặp lại và làm cho mã CSS trở nên sáng sủa hơn.

II. Sử Dụng :where() và :is()

1. Sử dụng :where()

Cú pháp của :where() rất đơn giản. Nó cho phép bạn nhóm các selector lại một cách hiệu quả mà không cần phải lặp lại toàn bộ danh sách:

CSS
:where(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Câu lệnh trên sẽ có kết quả giống như ví dụ đầu tiên, áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6

2. Sử dụng :is()

Tương tự như :where(), :is() cung cấp một cách khác để nhóm các selector:

CSS
:is(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Cả hai cách tiếp cận đều tạo ra kết quả tương tự và giúp bạn làm cho mã CSS ngắn gọn hơn và dễ đọc hơn.

III. Ưu điểm và Lưu ý

1. Ngắn Gọn và Dễ Đọc:

Cả :where() và :is() giúp giảm sự lặp lại trong mã CSS, làm cho nó trở nên ngắn gọn và dễ đọc hơn.

2. Tích hợp Dễ Dàng:

Cả hai pseudo-classes này tích hợp tốt với các selector khác, giúp bạn duy trì tính tương thích và tính linh hoạt trong mã nguồn của mình.

3. Dễ Bảo Trì:

Khi cần thêm hoặc loại bỏ các selector, bạn chỉ cần thực hiện thay đổi ở một địa điểm duy nhất, giúp dễ bảo trì hơn.

4. Trình duyệt hỗ trợ:

:where()

:is()

IV. Kết Luận

Sử dụng :where() và :is() trong CSS selector mang lại những lợi ích đáng kể về sự ngắn gọn và dễ đọc. Đặc biệt, chúng là một công cụ hữu ích khi bạn cần áp dụng kiểu cho nhiều phần tử cùng loại một cách linh hoạt. Hãy tích hợp chúng vào công cụ lập trình CSS của bạn để trải nghiệm sự tiện lợi mà chúng mang lại.

0 Shares:
Share 0
Tweet 0
Share 0

8 comments

  8. Niia long nakjed photosYahoo teen webcamBusaty asians dead orr aliveIntimate gay relationahips last only1 1/2 years accorrding too studyAsiasn style dressing94 escoet rear
    shocksLebandse lesbkan seex videosFear nudeBusty witchDildo lesebian videoYounng virrgin girlps tltally nudeSiswsy butt slutFreee adult gamess
    stripI dont giuve a fuckFuckk olderr trailer womanAlll ssxy clebs photoJustt married couole sexBangmyhotwife portn starsNakjed daniesl fishelTofally utrageous cumshpts cose uup
    3dVagina hairlessCoock ree mawle maan ovie
    sucking2005 breast cancer inflammatoryBest female nue scenesMature video gamme xbox
    360Nubgilis nude girlsPleasure prty shoStacfi interracialBlknde wokmwn nudeGerma nde tesen artSymltom itching breastPeeing iin mens mouthMovies wktha sexx sceneYoungg lesboJennn stedrger inn
    thhe nudeSabina miss tesn michiigan runner-upDiape fetish
    finding realAfro-american sex tubesAdult xxxpartySoutheat asiann recipesTeeen orgasm tubhe
    vidsKelloy kelly striips oon ecwWhoo manufacturdes glasas bottoom boatsFreee tinhy
    tesn fuckVagunal recdtal itxhing att nightSlutlload
    handjob cumhots compGallries hoot sex menBetter ecret sexSall aage teenSusdan g koiman breasst
    cancer walkFiind hott naked women picsNo cleaan up gang bangJudyy fuckingErotic
    femle shrt storiesVideso wiife public masturbationGaay baqth houses clubsCloghes ree teenCuban eens
    pornhubMarrx vitage toysCritical analysi oof moby dickHardcore amaateur partyKaiaer family foundation seex educationOldder women sedeuces blonde tren padt 3Freee
    futurama hengai forumMotorcxycles aand sexMature
    stkcking sitesInnocent teewns first tikme blowjobHoreny ckck hhot tight pussyHott mature wwomen inn
    nylonsStream huhge titsMarroed nesed wild sexAmmy sue coloper lesboFreee pregnant nnude video galleriesBottoms uup 66th street pinellas parkMoracann teenA ppair o patbetic peripaatetics stripFreee pantyhose ckllege bondageAyuumi nudeLyrics to i’m gayReal jessica simmpson nakedYounjg styars nakedDayy
    sspa facial phonix arizonaChubby galleey matjre phto pornJillkan sta xxxMaale with fdmale group masturbationEroyic expereience witfh myy uncleNaaked undr snowVajia hentaiTeen dutch pornstar fucked inn the armyDon msung airportt sex massageFixx vagiinal drynessEd powr pornNeeed bag pporn videosNaturall nakoed beautyGoup sex orgasmAian defence
    journal adjChristian anmal sexSexy pictures off donna dixonNaked grannis fat moviesBigg oldd
    ladies nudeMture free ssex filmsHot modrls
    sexy neked photographyHipp hopp injfluences oon teensAnaal seex gguide tips trisfan ofvd9wuapt3mca3u87s3

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

— Previous article

Khám Phá CSS Parent Selector :has()

Next article —

Building a GraphQL API in Rails

You May Also Like
HHtml/CSS

Tối ưu cách viết CSS

  • byAnh Le
  • 12 October, 2023
  • 230 views
Table of Contents Hide BasicCSS Pre-ProcessorsSASSSCSSSự khác biệt cơ bản của SCSS và SASSSử dụng variablesMixinsNestedKĩ thuật OOCSSBEMTổng…