▷ Când Se Utilizează Pseudo-selectoarele CSS: Empty și: Blank

Am făcut o greșeală teribilă când am scris pe Twitter :empty și :blank cu ceva timp in urma. am spus că :empty nu a fost util și :blank este mult mai util decât :empty.

Cand se utilizeaza pseudo selectoarele CSS empty si blank

Am gresit!

:empty este de fapt suficient de bun. Nici nu avem nevoie :blank!

O introducere rapidă

Bine, mai întâi, ce este :empty si ce este :blank?

:empty este un pseudo-selector. Vă permite să selectați elemente care sunt goale.

/* This is CSS */

:empty { /* do something */}

Elementele goale sunt elemente care nu au nimic în ele. Nu poate avea nici măcar un spațiu alb.

<!-- This is html -->

<!-- Example of an empty element --><div></div>

Totuși, elementele goale pot avea comentarii, atâta timp cât comentariile completează întregul element.

<!-- This is html -->

<!-- Empty elements can have comments --><div><!-- this is a comment --></div>

:blank este o formă alimentată de :empty. Vă permite să selectați elemente care au spații albe în ele:

<!-- This is html -->

<!-- Matched with :blank but not with :empty --><div> </div>

Ambii :empty și :blank sunt utile dacă este nevoie să:

Stilează un element gol
Creați stări goale

Un exemplu

Să presupunem că aveți un <div>. Vei umple doar this

cu conținut atunci când apare o eroare.

<!-- This is html -->

<!-- Without errors --><div class="error"></div>

<!-- With errors --><div class="error">Whoops! Something went wrong!</div>

Aici, trebuie să aranjați .error div. Dacă nu folosiți :empty, trebuie să vă bazați pe o clasă sau un atribut. Acest lucru se simte redundant.

<!-- This is html -->

<!-- With errors --><div class="error" data-state="error">Whoops! Something went wrong!</div>

/* This is CSS */

.error { display: none; background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}

.error[data-state="error"] { display: block;}

Dar dacă folosești :empty, nu aveți nevoie de clasa sau atributul suplimentar. Puteți stiliza clasa .error direct. Nici nu ai nevoie display: none;!

/* This is CSS */

.error { background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}

.error:empty { padding: 0;}

Iată un codepen Demo gol Am creat pentru a vă juca cu (încercați să eliminați padding: 0; din .error:empty, veți vedea un fundal roșu?).

Să presupunem că doriți să creați o listă de tot. Când utilizatorii dvs. văd lista pentru toate lucrurile pentru prima dată, probabil că vor vedea zero articole pentru toate lucrurile.

Ce arăți când sunt zero todos?

Această stare zero tot este ceea ce numim o stare goală.

Dacă doriți să creați o stare goală pentru lista de lucruri, puteți adăuga un plus <div> după your

binati

p

s

<!-- This is html -->

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

/* This is CSS */

.empty-state { display: none;}

ul:empty + .empty-state { display: block;}

Am învățat cum să folosesc :empty în acest fel de la Heydon Pickering. Verifică Articolul lui Heydon pe Componente incluzive dacă doriți să vedeți exemplul de listă de lucruri la lucru.

Notă: stările goale sunt importante. Dacă aveți nevoie de ceva convingător, verificați Acest articol pe Invision.

Demontând raționamentul meu

:empty este adesea suficient în practică. am simțit :empty nu este suficient de bun din două motive:

Experiență slabă a dezvoltatorului
Va trebui să decupez manual spațiile albe cu JavaScript

Primul motiv este valid, dar nu este mare lucru.

Al doilea motiv nu este valid. Am presupus că trebuie să tund spațiile albe, dar nu trebuie.

Te voi plimba prin amândoi.

Să ne întoarcem la exemplul de listă de tot. Să presupunem că am creat o listă de lucruri de făcut și că avem acest marcaj.

<!-- This is html -->

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

Cum ați verifica dacă :empty Lucram?

Ei bine, aș înlătura fiecare <li> wia cmd + x. Această comandă taie întreaga linie. Când am eliminat toate three

, voi termina cu acest marcaj:
```

```
```
<ul></ul>
```
Până acum, veți ști că HTML-ul de mai sus nu se va declanșa :empty. :empty funcționează numai atunci când nu există spații albe în element.

A trebuit să îndepărtez spațiile albe pentru :empty să lucreze, ceea ce înseamnă încă câteva apăsări de taste. Aceasta a fost o corvoadă prin care am sperat că nu va trebui să trec.

Dar, din nou, este o mică problemă pentru un mare beneficiu.

O spun din nou. Nu trebuie să tăiați manual spațiile albe în JavaScript dacă folosești :empty. Am făcut o presupunere greșită.

Să trecem printr-un exemplu și veți vedea la ce mă refer. Vom folosi exemplul de listă de lucruri tot o dată.

Spuneți că avem acest cod HTML chiar acum:
```

```
```
<ul> <li>Item 1</li></ul><div class="empty-state"></div>
```
Pentru ca starea goală să funcționeze, trebuie să eliminăm ultima <li> item from