Я знаю, что я могу настраивать элементы, которые имеют определенный атрибут в CSS, например:
input[type=text]
{
font-family: Consolas;
}
Но возможно ли таргетировать элементы, которые имеют атрибут любого значения (за исключением ничего, например, когда атрибут не был добавлен к элементу)?
Примерно что-то вроде:
a[rel=*]
{
color: red;
}
который должен быть нацелен на первый и третий теги <a> в этом HTML:
<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>
Я полагаю, что это возможно, потому что по умолчанию cursor: pointer применяется к любому тегу <a>, который имеет значение для своего атрибута href.
Следующее будет соответствовать любому тегу привязки с определенным rel:
a[rel]
{
color: red;
}
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
Обновление: чтобы учесть упомянутый сценарий @vsync, в разделе комментариев (различая emtpy/непустые значения), вы можете включить CSS :not псевдокласс:
a[rel]:not(a[rel=""])
{
color: red;
}
Да в селекторах CSS 3 существует несколько селекторов атрибутов.
например.
[ATT] Представляет элемент с атрибутом att, независимо от значения атрибута.
[ATT = значение] Представляет элемент с атрибутом att, значение которого равно "val" .
[ATT ~ = значение] Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно "val" . Если "val" содержит пробелы, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Также, если "val" - пустая строка, это никогда не будет представлять ничего.
[ATT ^ = значение] Представляет элемент с атрибутом att, значение которого начинается с префикса "val" . Если "val" - это пустая строка, то селектор ничего не представляет.
[ATT $= значение] Представляет элемент с атрибутом att, значение которого заканчивается суффиксом "val" . Если "val" - это пустая строка, то селектор ничего не представляют.
[ATT * = значение] Представляет элемент с атрибутом att, значение которого содержит хотя бы один экземпляр подстроки "val" . Если "val" - пустое string, то селектор ничего не представляет.
Следует добавить, что если браузер устанавливает атрибут по умолчанию, вам может потребоваться обходной путь. Похоже, что это не проблема в "современных" браузерах, но это проблема, с которой я сталкивался, поэтому обязательно проверьте производительность в разных браузерах.
Например, я обнаружил, что в IE до 9 colSpan устанавливается для всех TD в таблице, поэтому любая отдельная ячейка имеет скрытое значение colspan, равное 1.
Поэтому, если вы нацелены на "любой TD с атрибутом colspan", который вы применяете в своем веб-документе, даже td, не имеющий установленного атрибута colspan, например, любой TD, являющийся отдельной ячейкой, получит стиль CSS. IE меньше 9 будет в основном их стиль!
Единственная причина для беспокойства по этому поводу - все остальные пользователи XP, которые не могут обновиться выше IE8.
Например, у меня есть группа таблиц, содержимое которых может меняться от конца к концу, оставляя пустыми от 1 до 7 ячеек в конце или в начале.
Я хочу применить цвет к любым пустым ячейкам в конце или начале, используя атрибут colspan. Использование следующего не будет работать в IE менее 9
#my td[colspan] {background-color:blue;}
... все TD будут стилизованы (забавно, поскольку стилизация условных атрибутов в IE предположительно лучше, но я отвлекся...).
Использование следующего работает во всех браузерах, когда я устанавливаю значение colspan равным 'single' для любой отдельной ячейки /TD, которую я хочу включить в схему стилей, однако это "взлом" и не будет правильно проверяться...
#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}
В качестве альтернативы вы должны быть в состоянии более адекватно решить проблему, используя условные стили, используя "if lt IE 9" для переопределения. Это был бы правильный способ сделать это, просто имейте в виду, что в процессе вы должны скрыть "правильно построенный CSS" от IElt9, и я думаю, что единственный правильный способ сделать это - с помощью выборочных таблиц стилей.
В любом случае, большинство из нас уже делают это, но, тем не менее, вам все равно стоит подумать и проверить, применяет ли браузер автоатрибут, когда он его не видит, и как он может обрабатывать ваш остальной синтаксис для стилизации значений атрибутов.
(Кстати, colspan просто еще не указан в спецификации css [по состоянию на css3], поэтому в этом примере ошибка проверки не выдается.)