Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Псевдоклассы и Псевдоэлементы

psevdoПсевдоклассы и псевдоэлементы помогают решать задачи, которые обычным способом достигнуть труднее или невозможно. Иногда можно обойтись без их использования, но при доскональной настройки стилей они широко применяются веб-разработчиками. Кроме функциональных отличий - псевдоэлементы добавляются к селекторам по отдельности, а псевдоклассов может быть несколько в одном селекторе. Из статьи вы узнаете о наиболее популярных псевдоклассах и псевдоэлементах.

Псевдоклассы

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

селектор:псевдокласс {значения}  => a:hover{color:red}

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

Наиболее распространенные псевдоклассы:

  • target - для перехода к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
  • root - определение корневого элемента документа
  • active - при активации элемента пользователем
  • focus - при клике на объект, например поле для ввода данных
  • hover - активация элемента при наведении на него
  • link - стиль к не посещенным ссылкам
  • visited - стилевое оформление к посещенным ссылкам
  • indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
  • checked - стиль для radio и checkbox для в выбранном положении: input:checked {color:red}
  • first-child - стиль для первого дочернего элемента селектора
  • last-child - изменения в последнем элементе родителя
  • only-child - для дочерних элементов, единственных у родителя
  • lang (en) - определение языка элемента, где en - выбранный язык

Пример: a:hover {color:red}

Сохранив эту запись в файле стилей, на сайте при наведении на ссылку, она будет менять цвет на красный.

Псевдоэлементы

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

селектор:псевдоэлемент {значения}

Наиболее применяемые псевдоэлементы:

  • after - установка указанного слова (предложения) после текста: div:after {content:"Подпись"}
  • before - аналогично с after, но запись впереди текста
  • first-letter - определение стиля первой буквы в контенте
  • first-line - стилевое оформление первой строки в тексте
  • selection - применение стилей к выделенному тексту

Пример:

.new:before {content:"Внимание!"; color:red;}

Сохранив эту запись в файле стилей, на сайте перед элементом с классом new, мы увидим красный текст Внимание!

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

Защитный код
Обновить

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...