Как обратиться к span в css
Перейти к содержимому

Как обратиться к span в css

  • автор:

Как обратиться к span в css

HTML-элемент является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id ) или потому, что они имеет общие значения атрибутов, например lang . Он должен быть использован только когда нет другого подходящего по семантике элемента. очень похож на элемент , но является блочным элементом, в то время как является строчным.

Интерактивный пример

Категории контента Потоковый контент, фразовый контент.
Допустимое содержимое Фразовый контент.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который разрешает фразовый или потоковый контент в качестве содержимого.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLSpanElement (en-US) (до HTML5, интерфейсом был HTMLElement )

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Как можно обратиться к элементам span содержащим скажем определенный текст с помощью css?

Подскажите, пожалуйста, я могу как-то обращаться к элементам span , содержащим, скажем, определенный текст, с помощью CSS и установить для них определенные стили? Например:

Это красный фрукт Что по белым полоскам зебры катится На светофоре свет зелёный пешеходам 

Отслеживать
2,057 2 2 золотых знака 24 24 серебряных знака 44 44 бронзовых знака
задан 15 апр 2015 в 13:05
4,480 6 6 золотых знаков 40 40 серебряных знаков 95 95 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

На чистом CSS — никак. Можно выставить только стиль для пустых элементов ( :empty ) и только в CSS3.

Отслеживать
ответ дан 15 апр 2015 в 13:09
user177221 user177221
спасибо, но жаль..
15 апр 2015 в 13:31
если не на голом css — то можно сделать через api.jquery.com/contains-selector
– user177221
15 апр 2015 в 13:34

Недавно был такой же вопрос, такое можно только в jQuery с его движком Sizzle через это свойство.
На чистом CSS это невозможно, да и, если подумать, это не его дело. CSS описывает правила отображения и ему фиолетово что именно в этих контейнерах.
Через JS можно выбрать все элементы и потом проверить их на наличие нужного текста — там уж можно развернуться даже с регулярками, что, конечно, куда лучше.

Отслеживать
ответ дан 15 апр 2015 в 13:35
user31688 user31688

Спасибо! реализовал на js. а, если еще нужно проделать то же самое, но для определенных разрешений экрана — как это реализовать?

16 апр 2015 в 10:36

пытаюсь подключать так — не срабатывает.. if (window.innerWidth < 600) < document.write('‘); document.write(‘‘); document.write(‘‘); >

Главный текстовый тег — span

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

При оформлении текста с помощью css чаще всего используют тег . Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.

Однако, дополнительный смысл данному тегу добавляют с помощью классов. Например:

А уже для класса с помощью css задают стили и тем самым изменяют оформление.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 28 февраля цена 17 900 ₽ 22 900 ₽

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Главный текстовый тег — span

Прогрессивное улучшение

Нельзя просто так взять и рассказать про Progressive Enhancement, не упомянув о Graceful Degradation. В чем же разница между этими понятиями? Как уже говорилось в более ранней статье, Graceful Degradation можно перевести, как отказоустойчивость.

Это очень широкое понятие, но в контексте веба его можно понимать как отказоустойчивость клиентских веб-интерфейсов, серверной части сайтов и так далее. В этой статье Graceful Degradation будет пониматься как отказоустойчивость клиентских веб-интерфейсов.

Как обратиться к span в css

HTML5 IE Cr Op Sa Fx

    Тег SPAN   

Бернард Шоу

Результат данного примера показан ниже.

Рис. 1

Рис. 1. Вид текста, оформленного с помощью тега и стилей

Статьи по теме

  • Строчные элементы
  • Строчные элементы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *