CSS селектор, когда: цель пуста

Question

Мне нужен селектор css3 для нацеливания на элемент, когда: target равен id элемента (легко) или когда :target пусто (невозможно?).Это сложно объяснить, поэтому позвольте мне привести простой пример.

div {
  background: blue;
}
div:target, div:no-target {
  background: red;
}

Но, конечно, псевдокласс :no-target не существует;).Есть ли способ обойти это без использования Javascript ?Заранее спасибо!

Answer 1

Вздох. Мне кажется, что я воскрешаю мертвую тему, но для этого нужен реальный ответ.

Это можно сделать только с помощью CSS, просто используя :last-child и общий комбинатор в виде :target ~ :last-child:

.pages > .page:target ~ .page:last-child,
.pages > .page {
    display: none;
}

/* :last-child works, but for some reason .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

(живой пример)

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

Answer 2

На этот вопрос есть отличный ответ: default-target-with-css

Он вращается вокруг этой уловки , которая, похоже, имеет проблемы в iOS. Это было исправлено в Safari, так что, может быть, это будет в iOS 5?

Answer 3

Почему бы вам не использовать div:not(:target) или div:target:empty?

Answer 4

Все, что я могу думать, - это то, что у вас есть какой-то javascript, который проверяет, является ли хеш пустым.Если это так, он добавляет класс к тегу body с именем "noHash".Затем вы можете использовать тот факт, что в ваших правилах CSS есть класс noHash.

if (window.location.hash.length <= 1) {
     document.body.className += " noHash";
}

Тогда ваш CSS может выглядеть следующим образом:

div {
  background: blue;
}
div:target, body.noHash div {
  background: red;
}

Если есть какие-либо обстоятельствагде пользователь может добавить хеш-значение после факта, тогда вам, возможно, придется следить за этим, чтобы убедиться, что класс noHash удаляется надлежащим образом.

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

Answer 5

Вы можете использовать селектор :not(:target).