Когда использовать: пустое и: пустые селекторы PSEudo CSS

Автор оригинала: FreeCodeCamp Community Member.

Я сделал страшную ошибку, когда я твитнул о : пусто и : пустым Данное назад. Я сказал, что : пусто не был полезным, а : пустым гораздо полезнее, чем : пусто Отказ

Я ошибался!

: пусто на самом деле достаточно хорош. Нам даже не нужно : пустым !

Быстрое введение

Хорошо, во-первых, что такое : пусто А что такое : пустым ?

: пусто это псевдоселектор. Это позволяет вам выбрать элементы, которые пустые.

/* This is CSS */

:empty { /* do something */}

Пустые элементы – это элементы, которые ничего не имеют в них. Это даже не может иметь пробел.

Пустые элементы могут иметь комментарии, хотя, пока комментарии заполняют весь элемент.

: пустым это форма питания : пусто Отказ Это позволяет вам выбрать элементы, которые имеют пробелы в них:

Оба : пусто и : пустым полезны, если надо:

1. Стиль пустой элемент
2. Создать пустые состояния

Пример

Допустим, у вас есть IV>. Вы будете заполняться только это

Whoops! Something went wrong!

Здесь вам нужно стиль .error девочка Если вы не используете : пусто , вам нужно положиться на класс или атрибут. Это чувствует себя избыточным.

Whoops! Something went wrong!

/* This is CSS */

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

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

Но если вы используете : пусто Вам не нужен дополнительный класс или атрибут. Вы можете стирать класс .error напрямую. Вам даже не нужно Дисплей: нет; !

/* This is CSS */

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

.error:empty { padding: 0;}

Вот кодепен Пустой демонстрация Я сделал для вас, чтобы играть с (попробуй удалить прокладку: 0; от .error: Пусть , вы увидите красный фон?).

Допустим, вы хотите создать список TODO. Когда ваши пользователи впервые увидите список TODO, они, вероятно, увидят нулевые элементы ToDo.

Что вы показываете, когда есть ноль TODOS?

Это нулевое состояние Todo – это то, что мы называем пустым состоянием.

Если вы хотите создать пустое состояние для вашего списка Todo-списка, вы можете добавить дополнительную IV> После Вы R

. Когда вы делаете это, вы можете использовать COM Binati OR: EM P TY и + (соседний S ITHORT) или ~ (последующий брат) селектор для стиля пустого состояния.

 
Item 1
 
Item 2
 
Item 3

/* This is CSS */

.empty-state { display: none;}

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

Я узнал, как использовать : пусто Таким образом от пикирования Гейдона. Проверьте Статья Гейдона на Инклюзивные компоненты Если вы хотите увидеть пример ToDo-списка на работе.

Разбирая мои рассуждения

: пусто достаточно часто на практике. Я чувствовал : пусто Не достаточно хорош из-за двух причин:

1. Бедный опыт разработчика
2. Мне нужно будет нарезать пробелы вручную с помощью JavaScript

Первой причиной действителен, но это не имеет большого значения.

Вторая причина недействительна Отказ Я предполагал, что мне пришлось обрезать пробелы, но мне не нужно.

Я пойду на тебя через них обоих.

Давайте вернемся к примеру ToDo-List. Скажем, мы создали список Todo, и у нас есть эта разметка.

 
Item 1
 
Item 2
 
Item 3

Как бы вы проверили, если : пусто работал?

Ну, я бы удалил каждый < Li> Wi TH C md + x. Эта команда разрезает всю строку. Когда я удалил все модерн E

К настоящему времени вы узнаете, что HTML выше не запускает : пусто Отказ : пусто работает только тогда, когда в элементе нет пробелов.

Я должен был удалить пробелы для : пусто Работать, что означает еще несколько нажатий клавиш. Это была хоре, которую я надеялся, что мне не нужно пройти.

Но опять же, это небольшая проблема для большой выгоды.

Я говорю это снова. Вам не нужно обрезать пробелы вручную в JavaScript Если вы используете : пусто Отказ Я сделал неправильное предположение.

Давайте пройдемся по примеру, и вы увидите, что я имею в виду. Мы будем использовать пример TODO-LISTER еще раз.

Скажем, у нас есть этот HTML сейчас:

 
Item 1

Для работы пустое состояние нам нужно удалить финал < Li> Предмет из

. Если вы используете простой JavaScript, вы можете сделать это с

// This is JavaScript

const ul = document.querySelector('ul')const li = ul.children[0]

ul.removeChild(li)

Я верил (ошибочно), что Removechild будет производить этот HTML:

Если он производит этот HTML, мне придется обрезать любые пробелы, оставшиеся в списке (что дополнительный JavaScript).

// This is JavaScript

const ul = document.querySelector('ul')const li = ul.children[0]

ul.removeChild(li)

if (ul.children.length === 0) { ul.innerHTML = ''}

Как я уже сказал, я ошибался. Это не произвело вышеперечисленного HTML. Вместо этого это произвело:

Что означает, что нам не нужен дополнительный JavaScript, чтобы нарезать пробел!

Вот код для этого примера:

Смотрите ручку Пустое демонстрация с тодолистом Я сделал ( @zellwk ) на Кодепен Отказ

: пусто Поддерживается на всех браузерах, а : пустым имеет плохую поддержку браузера. Это дает вам множество причин использовать : пусто над : пустым Cегодня!

Я надеюсь, что поддержка браузера для : пустым Улучшает один день, хотя.

Обертывание

: пусто и : пустым Позвольте вам стиль пустые элементы и легко производить пустые состояния.

: пустым лучше чем : пусто Потому что это дает нам лучший опыт разработчика. Но мы не можем использовать : пустым потому что : пустым не хватает поддержки браузера.

: пусто часто достаточно хорош. Вы можете использовать это уже. Используйте все, что вы хотите! ?

Дайте : пусто Иди и дайте мне знать, что вы думаете!

Спасибо за прочтение. Эта статья каким-либо образом поможет вам? Если вы сделали, Я надеюсь, что вы думаете об этом Отказ Вы можете помочь кому-то. Спасибо!

Эта статья была первоначально опубликована в мой блог Отказ

Подпишитесь на мой рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.