Зачем нужен псевдо класс :target CSS3
Псевдо класс :target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа.
Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.
Поддержка
Как использовать :target?
Демонстрация
На демонстрационной странице приведен вполне наглядный пример того, как и когда использовать :target. Псевдо класс :target может улучшить уровень удобства использования вашего ресурса.
Разметка HTML
Ниже приводится пример из демонстрации. У нас есть 4 ссылки и такое же количество блоков. Каждая группа имеет свой уникальный идентификатор.
Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).
Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
Перевел: Сергей Фастунов
Урок создан: 15 Февраля 2011
Просмотров: 27746
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
November 04, 2013
Начнем издалека и вспомним (если кто читал) одну из глав книги Энди Бадда “Мастерская CSS”. Глава называется “Изменение стиля элемента при наведении указателя на отдаленный элемент” и речь в ней идет о том, как сделать так, чтобы управлять одним элементом с помощью другого.
Техника, описанная в данной главе, представляла из себя следующее. В ссылку вкладывались несколько элементов, которые позиционировались абсолютно на странице и размещались в любом ее месте.
Способ достаточно хорош, за исключением того, что применяется дополнительная разметка и нарушается семантика HTML-документа. На момент написания этой книги это был единственный способ управления “отдаленными элементами на странице.
Приведу в качестве примера кусок кода, демонстрирующий такой подход:
Псевдо-класс :target как раз и служит для стилизации элемента с якорем, на который указывает такая ссылка. Давайте приступим к стилизации, чтобы воочию увидеть, как работает этот псевдо-элемент.
Для одного из параграфов мы уже назначили идентификатор, который является якорем. Пропишем для него немного правил:
В нашем случае это будет клик на ссылке. Для таких правил синтаксис следующий:
Он применил прописанные для него правила только при совершении некоего события. И применены они были к обособленному участку HTML-кода (помеченному идентификатором #example ), который почти никак не связан со ссылкой.
Можно немного усложнить пример и связать несколько параграфов между собой, то есть таким образом:
Откроем вновь страницу в браузере и посмотрим результат. Все ОК.
Ниже привожу, как всегда, полный текст кода.
Псевдоклассы CSS: :not и :target
Дата публикации: 2017-02-08
От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Ранее в этой главе мы уже говорили, что псевдоклассы позволяют задавать стили на основе информации, которую невозможно получить из дерева документа и на которую нельзя сослаться с помощью простых селекторов. К ним относятся логические и лингвистические псевдоклассы типа :not и :lang(), а также псевдоклассы, срабатывающие на пользовательские события, типа :hover и :focus.
В этом разделе мы рассмотрим тайные и малоизвестные псевдоклассы с упором на то, что есть в браузерах: дочерние и типизированные дочерние псевдоклассы, а также псевдоклассы ввода. Дочерние обычные и дочерние типизированные псевдоклассы позволяют выбирать элементы на основе их позиции в поддереве документа. Псевдоклассы ввода выбирают поля форм по их значениям и состояниям.
Выделение фрагментов страницы с помощью :target
Идентификатор фрагмента – это та часть URL, которая идет после символа #. Например, #top или #footnote1. Вы могли их использовать для создания внутренней навигации по странице – так называемые якоря. С помощью :target можно выделить часть документа, относящуюся к этому фрагменту. И тут совсем не нужен JS.
Например, у вас есть несколько комментариев или ветка дискуссионного клуба:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
16 мая 2012 | Опубликовано в css | 3 Комментариев »
Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.
Что такое: target?
: target является псевдоклассом и относится к группе псевдоклассов (псевдоселекторов), которые определяют текущее состояние элемента и применяют к ним стили.
Псевдокласс, с которым вы, вероятно, наиболее знакомы — :hover, он позволяет объявить специальный стиль, который будет активирован при наведении указателя мыши на элемент. При помощи псевдокласса :target вы так же можете создавать свои стили, которые будут активированы в конкретной ситуации.
Целевой элемент
Специальное событие для псевдокласса :target зависит от идентификатора, который указан в конце адресной строки браузера или так называемого «целевого элемента».
:target срабатывает тогда, когда хэш URL адреса и идентификатор элемента совпадают.
Вот небольшая демонстрация того, как это работает.
Эта страница содержит ряд тегов h1, каждый из которых обладает уникальным ID. Вот основная структура документа:
Использование: target для создания события при нажатии
Теперь пришло время использовать наш псевдокласс :target. Стиль для элемента :target будет активирован только тогда, будет активна ссылка, на которую нажали.
Добавим анимацию
Управление нецелевыми объектами
Скажем, мы хотим изменить стили абзаца, который идет после выбранного заголовка.
Сделать это очень просто при помощи следующего кода. Смотрите демо здесь.
Создание простого слайд-шоу при помощи CSS
Разработчики придумали тонны приложений с использованием псевдокласса : target. Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.
Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.
Теперь добавим наши стили:
Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.
Смотрите демонстрацию слайд-шоу на чистом CSS здесь.
Кроссбраузерность
Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.
Заключение
Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор
:target-хороший тому пример. Только убедитесь, что вы не переборщили со стилями.
По материалам статьи designshack
Ещё один интересный пример использования :target смотрите здесь
Исчерпывающее руководство по псевдоэлементам и псевдоклассам в CSS
May 8, 2016 · 19 min read
Hola a todos! Всем привет! Будучи молодым веб-дизайнером я был вынужден учиться методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen или каких-то других замечательнх штук, доступных нам сегодня. Найти кого-то, кто мог бы показать фишки веба, особенно что касалось CSS, было невероятно полезно.
Теперь я немного оброс жирком опыта. И сегодня поделюсь с вами в очень дружелюбной, непринужденной и ненавязчивой манере всем, что касается псевдоклассов (ПК) и всевдоэлементов (ПЭ).
Если вы опытный веб-дизайн е р или разработчик, то вы наверняка знаете и используете большую часть ПК и ПЭ, описанных в статье. Тем не менее, вы можете пробежаться по списку. Наверняка найдутся один или два пункта, о которых вы раньше не знали.
Перед тем как перейти к сути, и потому что это непосредственно относится к ПК и ПЭ, давайте начнем с основ: вы когда-нибудь задумывались что значит “псевдо”? Если так, то вот определение с Dictionary.com:
1. то, что подразумевается, но не имеется на самом деле; делать вид; ложный или поддельный; фиктивный.
2. почти, приближенное, или пытающееся быть.
Не вдаваясь в технические подробности определения, данного консорциумом W3C, в основе псевдокласса лежит фантомное состояние элемента или его специфичная характеристика, управляемая через CSS. Несколько распространенных примеров псевдоклассов :link, :hover, :active, :first-child и :nth-child. На самом деле их гораздо больше и мы рассмотрим их чуть позже.
Кроме того ПК всегда начинаются с двоеточия (:). Затем идет имя ПК и иногда значение в скобках. Знакомы с :nth-child?
Перейдем к псевдоэлементам. Они являются виртуальными элементами, которыми мы можем манипулировать как обычными html-элементами. Разница в том, что ПЭ не существуют в дереве документа или DOM. Это значит что мы не пишем ПЭ в html-разметке, а создаем их при помощи CSS.
Примеры ПЭ :after, :before и :first-letter. Мы вспомним о них ближе к концу этой статьи.
Одинарное или двойное двоеточие для ПЭ?
Короткий ответ — в большинстве случаев подойдут оба написания.
Двойное двоеточие (::) было представлено в CSS3 для дифференциации таких псевдоэлементов, как ::before и ::after от псевдоклассов, например :hover и :active. Двойное двоеточие поддерживают большинство браузеров, включая Internet Explorer (IE) 8 и ниже.
Хотя некоторые ПЭ, такие как ::backdrop, требуют только двойного двоеточия.
Лично я использую одинарное двоеточие, это делает мой CSS-код обратно совместимым со старыми браузерами. Конечно же я использую написание с двойным двоеточием для тех ПЭ, которые этого требуют.
Вы в праве использовать оба варианта. В этом вопросе действительно нет однозначно правильного или неправильного ответа.
Тем не менее спецификация на момент написания этой статьи рекомендует использовать именно одиночное двоеточие по упомянутой выше причине обратной совместимости:
Пожалуйста, обратите внимание что в CSS3 новый способ написания ПЭ предусматривает двойное двоеточие, например a::after <…>, для визуального отделения от ПК. Вы могли видеть такое написание в CSS. CSS3 тем не менее все еще поддерживает одиночное двоеточие ради обратной совместимости. И мы рекомендуем вам придерживаться подобного написания еще какое-то время.
В тексте этой статьи ПЭ, которые поддерживают как одинарное, так и двойное двоеточие будут показаны в обоих вариантах; ПЭ, требующие только двойного двоеточия, будут показаны как есть.
Когда (не) использовать CSS сгенерированное содержимое
Создание контента с помощью CSS достигается путем объединения свойства content и ПЭ :before или :after.
Этот “контент” может быть простым текстом или контейнером, которыми мы можем манипулировать при помощи CSS для отображения графических форм или декоративных элементов. Дальше я буду говорить о первом типе такого контента — тексте.
Сгенерированный контент не должен использоваться для важной информации или текста по следующим причинам:
Используйте сгенерированный контент в декоративных целях или для не особо важной информации. Но убедитесь что он правильно распознается программами чтения с экрана. Перед использованием этого инструмента “думайте прогрессивно”.
На Smashing Magazine есть великолепная статья об использовании сгенерированного контента CSS.
Экспериментальные псевдоклассы и псевдоэлементы
ПК или ПЭ считаются экспериментальными пока их спецификация не стабильна или не является финальной. Синтаксис и поведение могут изменится по ходу пьесы.
В этой статье вы увидите пометку “экспериментальный” рядом с такими ПК или именами ПЭ.
Псевдоклассы
Мы начнем обсуждение с псевдоклассов, имеющих отношение к определенным состояниям.
ПК состояний обычно вступают в игру, когда пользователь выполняет определенное действие. “Действие” в CSS может так же означать “отсутствие действия”, например в случае со ссылками, по которым еще не было переходов.
Давайте рассмотрим их по порядку.
:link это ПК, отвечающий за “нормальное” состояние ссылки и используется для выбора ссылок, которые еще не были посещены. Объявление :link перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.
Его так же можно опустить и писать так:
:visited
:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).
:hover
:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.
Этот ПК должен идти третьим в списке (после :visited).
:active
ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.
Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.
Этот ПК должен идти четвертым (после :hover).
:focus
ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.
Бонус: SASS миксины для ссылок
Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.
Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.
Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.
:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.
Обратите внимание, что эти миксины могут быть использованы для любого html-тега, не только для ссылок.
Структурные псевдоклассы нацелены на создание дополнительной информации в дереве документа или DOM и не могут быть представлены другими типами комбинаторов или селекторов.
:first-child
:first-child представляет первого ребенка родительского блока.
В примере ниже только первый элемент li будет с текстом оранжевого цвета.
:first-of-type
:first-of-type выбирает первый элемент указанного типа в родительском контейнере.
В следующем примере первый элемент li и первый span будут с текстом оранжевого цвета.
:last-child
:last-child ПК выбирает последнего ребенка в родительском элементе.
В примере последний элемент li будет с оранжевым цветом.
:last-of-type
:last-of-type выбирает последний элемент указанного типа в родительском контейнере.
В примере оранжевый текст будет только у последних элементов li и span.
ПК :not так же известен как негативный псевдокласс. Он принимает аргумент — обычно другой “селектор” — в круглых скобках. Аргументом на самом деле может быть другой псевдокласс.
Он может быть составным, но не может содержать еще один:not селектор.
В следующем примере :not ПК совпадает с элементом, не представленным аргументом.
:nth-child
ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.
Этот ПК является одним из самых универсальных и мощных вCSS.
Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/ even(четный).
В формулах типа an+b:
Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:
Давайте выберем второго ребенка. В этом случае только “Beta” будет оранжевой:
Теперь выберем других детей, начиная со второго ребенка. И так, “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa” будут оранжевыми:
Выберем все четные дочерние элементы в списке:
Давайте выберем каждого второго ребенка начиная с шестого. “Zeta,” “Theta” и “Kappa” будут оранжевыми:
:nth-last-child
ПК :nth-last-child в основном работает так же как :nth-child за исключением того, что выбор элементов начинается с конца, а не с начала.
Выбираем второго с конца ребенка. “Iota” будет оранжевой:
Теперь выбираем все другие дочерние элементы начиная со второго с конца. “Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:
Раскрасим все четные элементы начиная с конца:
Теперь раскрасим всех детей начиная с шестого с конца. “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:
:nth-of-type
:nth-of-type в целом работает так же как :nth-child, главным отличием является то, что он более специфичный поскольку мы обращаемся к определенному элементу и его отношениям к другим элементам, вложенным в родительский блок.
В следующем примере все вторые параграфы в любых родительских контейнерах будут оранжевыми:
:nth-last-of-type
:nth-last-of-type работает так же как :nth-of-type, разница в том, что отсчет начинается с конца.
Пример ниже мы начинаем отсчет снизу и все первые параграфы поменяют цвет текста на оранжевый:
Обратитесь к этим двум ресурсам при работе с :nth ПК:
:only-child
ПК :only-child выбирает единственный дочерний элемент в родителе.
В примере первый элемент ul имеет единственного ребенка, которому будет назначен оранжевый цвет текста. Второй элемент ul содержит несколько детей. Таким образом на них не повлияет правило ПК :only-child.
:only-of-type
ПК :only-of-type нацелен на элемент, который не имеет братьев этого конкретного типа. Это похоже на :only-child за исключением того, что мы можем нацелится на конкретный элемент, сделав селектор более специфичным.
В примере первый ul имеет единственного ребенка, которому будет назначен оранжевый текст.
:target
:target ПК… что ж, он выбирает уникальный ID элемента и помещает его в URL.
Пример: статья с уникальным ID будет иметь желтый фон если URL страницы заканчивается на #target.
Совет: Вы можете использовать шорткат background: вместо background-color: — результат будет одинаковым.
Формы всегда были бичом веб-дизайна и разработки. При помощи ПК валидации мы можем сделать процесс заполнения формы более “гладким” и приятным в плане опыта пользователя.
Однако следует отметить, что хотя большинство ПК, перечисленных в этом разделе хороши для работы с элементами формы, некоторые из них могут использоваться так же и другими html-элементами.
Давайте проверим на деле!
:checked
ПК :checked управляет радио-кнопками, чекбоксами и элементами option, которые были выбраны.
Пример: когда чекбокс “активирован” (выбран) подпись становится выделенной, улучшая тем самым удобство использования.
:default
ПК :default нацелен на элемент по умолчанию в форме среди группы сходных элементов.
В случае, если вам нужно назначить кнопку по умолчанию в форме, но элемент не имеет класса, то вы можете воспользоваться псевдоклассом :default.
Обратите внимание, что кнопки “Reset” или “Clear” в формах сопровождаются серьезными проблемами с юзабилити. Используйте их только там, где без этого совершенно невозможно обойтись. В следующих статьях этот вопрос освещен более подробно:
:disabled
:disabled работает с элементами форм в их отключенном состоянии. “Задизейбленный” (отключенный) элемент не может быть выбран, с ним нельзя взаимодействовать или активировать его, он не может получить фокус.
Пример: поле ввода имени отключено, поэтому оно отображается прозрачным на 50%.
Совет: Использовать disabled=”disabled” в разметке не требуется. Вы получите тот же результат используя только логический атрибут dasabled. Однако стоит помнить, что использование disabled=”disabled” обязательно в XHTML.
:empty
ПК :empty нацелен на элементы, которые не содержат в себе контент любого рода. Если элемент содержит букву (текст), другой html-элемент или даже пробел, то этот элемент не считается пустым.
Вот определение “пустого” и “не пустого”:
:enabled
:enabled выбирает включенные (активные для взаимодействия) элементы. Все элементы формы активны по умолчанию — утверждение верно до тех пор, пока мы не используем disabled атрибут в разметке.
Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.
Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:
Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.
:in-range
:in-range выбирает элементы, которые имеют диапазон значений и значения, находящиеся в этом диапазоне.
Пример: элемент ввода поддерживает диапазон от 5 до 10. Значения в этом диапазоне активируют зеленую обводку.
:out-of-range
:out-of-range работает с элементами, которые имеют диапазон значений и значения которого выходят за пределы этого диапазона.
Пример: элемент ввода поддерживает диапазон значений от 1 до 12. Значения вне этого диапазона будут подсвечены оранжевой обводкой.
:indeterminate
:indeterminate ПК нацелен на элементы ввода (радио-кнопки и чекбоксы), которые не были выбраны или не выбраны при загрузке страницы.
Примером является ситуация когда страница загружается с группой радио-кнопок и среди них нет выбранного по умолчанию пункта или когда JavaScript установил флажок “неопределенное состояние”.
:valid
ПК :valid нацелен на элемент формы, который заполнен в соответствии с форматированием этого элемента.
Пример: поле ввода электронной почты заполнено в соответствии с установленным форматированием. Таким образом поле будет считаться валидным и будет отображаться с зеленой рамкой в 1px:
:invalid
ПК :invalid работает с элементами формы, чье форматирование не совпадает с требуемым.
Пример: когда в поле ввода электронной почты введены данные, не совпадающие с требуемым форматирование, значение будет считаться невалидным и у поля появится оранжевая обводка:
:optional
:optional предназначен для полей ввода, которые не являются обязательными. Другими словами до тех пор, пока поле не имеет атрибута required, оно будет подчиняться ПК :optional.
Пример: поле является опциональным (необязательным). У него нет атрибута required, поэтому текст будет серым.
:read-only
ПК :read-only нацелен на нередактируемый элемент. Поведение похоже на :disabled. Наличие атрибута в разметке поможет решить, какой из псевдоклассов следует использовать.
Он будет полезен, например, в формах, где нам нужно показать предварительно заполненную информацию, которая не может быть изменена. Но она необходима для отображения в элементе формы в качестве примера.
Пример: у элемента формы в html указан атрибут readonly. Поэтому для него сработают правила псевдокласса :read-only и текст будет серым.
:read-write
:read-write ПК выбирает элементы, которые могут быть отредактированы пользователем. Сработает так же как если бы у элемента был атрибут contenteditable в html.
Этот псевдокласс можно сочетать с :focus для улучшения UX в определенных ситуациях.
Пример: пользователю нужно кликнуть на div, чтобы отредактировать его содержимое. Мы можем улучшить опыт взаимодействия, применив особые стилевые правила, выделяющие этот кусок контента на фоне других. Тем самым обеспечим визуальную подсказку для пользователя, что содержимое редактируемо.
:required
:required работает с элементами, которые имеют атрибут required в html-разметке.
В дополнение к обычной “звездочке” (астериску — *) возле подписи к полю ввода, показывающей обязательность его заполнения, мы можем визуально выделить поле при помощи CSS. Фактически мы получаем лучшее из двух миров.
Пример: у поля есть атрибут required. Улучшаем UX, применяя определенный стиль, который дает сигнал, что поле обязательное.
:scope (эксперимент)
Псевдокласс :scope имеет наибольший смысл, когда он связан с html-атрибутом scoped у тега style.
Если атрибута scoped нет у тега style внутри страницы, то :scope будет применен к элементу html, который является дефолтным (по умолчанию) в таблице стилей.
Пример: html-блок имеет таблицу стилей с атрибутом scoped и поэтому весь текст внутри второго блока будет написан курсивом.
Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не управляют никакими медиа-элементами, такими как изображения или видео.
:dir (эксперимент)
ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.
В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).
Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.
Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.
Параграф ниже написан на английском (слева направо). Текст будет синим.
ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.
Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.
В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.
В разных ситуациях этот механизм может срабатывать правильно или неправильно. Поскольку есть различия между кавычками, которые ставятся автоматически при помощи внутренних механизмов браузера. Предпочтительно использование правила для кавычек в CSS.
Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:
Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):
Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :lang и css-свойства quotes.