В CSS псевдоклассы используются для изменения свойств элементов, когда они находятся в определенном состоянии. Например, если на картинку навести курсор мыши, то у нее появляется состояние hover. В таблице стилей может быть правило изменения каких-либо свойств элемента img в этом состоянии (размеров, затенения, рамок).
Селектор превдокласса элемента имеет следующий синтаксис:
тег:превдокласс {
…
}
То есть псевдоклассам предшествует двоеточие.
Если псевдокласс описывается для класса, выглядеть это может так:
тег.класс:превдокласс {
…
}
В отличие от классов, в элементах HTML превдоклассы не упоминаются. То или иное состояние элемента случается или нет, независимо от html-кода страницы. Ряд состояний может быть характерным только для определенного типа элементов.
Так для ссылок (гиперссылок) выделяют четыре состояния:
link – непосещенная ссылка (в истории браузера не хранится ее адрес),
visited – посещенная ссылка (в истории есть адрес),
hover – курсор мыши находится над ссылкой,
active – ссылка в момент, когда на нее наведен курсор мыши, и зажата левая кнопка мыши.
По умолчанию во всех четырех состояниях ссылки имеют подчеркивание. Непосещенная ссылка окрашена в синий цвет, посещенная – в фиолетовый. При наведении на ссылку курсора, он меняется со стрелки на иконку руки. Ссылка в момент «активации» приобретает красный цвет.
В настоящее время оформление ссылок по-умолчанию используется редко. Обычно его изменяют в таблице стилей, стилизуя ссылки под цветовую схему сайта. При этом последовательность описания состояний, приведенная выше, должна сохраняться. Некоторые могут быть пропущены. Общие свойства обычно выносят в селектор-тег (без псевдокласса).
Часто у ссылок убирают подчеркивание, а между посещенной и непосещенной не делают различий.
Когда любые селекторы группируются через запятую, это значит, что правило применяется ко всем в группе по отдельности. Так делают, чтобы избежать повторений, когда разные элементы оформляются одинаково.
В примере выше добавлять в правило селектор с псевдоклассом active не обязательно. Состояние active переопределяет hover. Поэтому если для active нет правила, то в этом состоянии ссылка будет выглядеть также, как в состоянии hover.
Для главного меню сайта ссылки часто стилизуют под кнопки:
На одной веб-странице ссылки могут быть не только в меню, также встречаться в теле статьи и другом контенте. Как сделать так, чтобы часть ссылок на странице была оформлена в одном стиле, а другая часть в другом?
Конечно, мы можем назначить одним ссылкам один класс, другим – иной, или оставить без класса.
Однако упоминание класса в каждой ссылке, особенно если их много, делает код грязным. Должно быть какое-то более экономичное решение.
В CSS есть возможность выбирать из html-документа элементы, которые вложены (то есть являются потомками) в определенный внешний элемент (предок), по-сути являющийся для них html-контейнером. Селектор, с помощью которого выполняется такой выбор, называется
селектором потомка. Он относится к комбинированным селекторам, которые создаются с помощью различных так называемых комбинаторов.
Комбинатор потомка обозначается пробелом. В селекторе пробел ставится между внешним контейнером и вложенным в него элементом, для которого описывается правило. В данном случае потомками называют элементы HTML на любом уровне вложенности: сразу или вложенные во вложенные в предка – неважно.
В примере на скрине выше ссылки меню заключены в контейнер <nav></nav>
. Nav относится к семантическим элементам HTML и предназначен для основного меню сайта, навигации по сайту. В то же время для ссылок в статье в качестве предка мы можем выделить контейнер <main></main>.
CSS-код ниже дает такое же оформление ссылок, как на скрине выше:
a {
text-decoration: none;
}
main a {
color: DarkGreen;
}
main a:hover {
border-bottom: dashed 1px Green;
}
nav a {
background: Green;
color: White;
padding: 15px 20px;
text-align: center;
display: inline-block;
width: 200px;
}
nav a:hover {
background-color: OliveDrab;
}
Здесь четыре селектора потомка. В частности, селектор
main a применяет свойства своего правила ко всем ссылкам, которые находятся в контейнере main. Таким образом, мы можем разделить стилизацию ссылок в зависимости от их обрамляющего html-элемента. При этом общее свойство было вынесено в селектор a. Его значение применяется для всех ссылок до их стилизации в зависимости от предка.
В отличие от примера, в котором использовался селектор класса, при использовании селектора потомка в коде HTML нет необходимости писать атрибут class в ссылках навигации, что делает код чище:
Ознакомьтесь с материалом — http://htmlbook. ru/css/text-decoration
| Автор: Yuri_Geruk
…
css — Подчеркивание части ссылки при наведении на всю ссылку
спросил
Изменено
6 лет, 5 месяцев назад
Просмотрено
2к раз
У меня ссылка — уведомления — с красным диском рядом. Я хотел бы навести курсор на диск ИЛИ текст, чтобы текст был только подчеркнут (я также хотел бы щелкнуть в любом месте ссылки, чтобы перейти к той же ссылке).
Я ничего не могу найти в Google по этому конкретному вопросу.
Все, что я пытаюсь сделать, делает 1 подчеркиванием, а также текстом уведомлений:
Вы можете сделать счетчик уведомлений псевдоэлементом с абсолютным позиционированием, а затем добавить счетчик в качестве атрибута. Таким образом, ваш HTML останется простым и чистым. Таким образом, HTML-код будет выглядеть так:
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
[CSS] — Как добавить подчеркивание к ссылке при наведении в CSS —
Узнайте, как добавить эффект подчеркивания к ссылке при наведении курсора с помощью свойства text-decoration в CSS.
👩💻 Технический вопрос
Спросил 1 месяц назад
в
CSS
by Yvette
Как добавить подчеркивание ссылки при наведении?
наведение
связь
текстовое украшение
Дополнительные вопросы по кодированию о CSS
👩💻 Технический вопрос
Спросил 9 дней назад
в
CSS
Татьяна
как закодировать страницу с фоновым изображением, которое является адаптивным
background-image
отзывчивый
CSS
медиа-запрос
👩💻 Технический вопрос
Спросил 17 дней назад
в
CSS
от Fania Kadiria
как центрировать div
УС
див
центр
поля
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 17 дней назад
в
CSS
от Jess
расскажите мне больше о поведении прокрутки css
поведение прокрутки
плавная прокрутка
внутренние ссылки
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 17 дней назад
в
CSS
Джесс
щелчок по ссылке не прокручивается, приводит к прямой ссылке на привязку на странице
поведение при прокрутке
якорная ссылка
веб-страница
плавная прокрутка
современные браузеры
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by Maryam
как увеличить поле ввода?
поле ввода
размер
ширина
высота
КСС
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Рикке В.
что такое подзаголовок в ccs?
УС
подзаголовок
теги заголовков
стиль
классы
ID
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Рикке В.
что такое блок в css
CSS
коробочная модель
макет
позиция
свойства
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by Ravneet
как поставить картинку на фон страницы
background-image
HTML
CSS
веб-дизайн
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by Chicherem
все о переходе
CSS
переход
анимация
временная функция
МДН
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by Ravneet
как поставить границу вокруг текста
HTML
CSS
граница
стиль
элемент
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Патриция Даниэль
как настроить расстояние между горизонтальным списком
CSS
горизонтальный список
интервал
допуск
прокладка
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Патриция Даниэль
как сделать список горизонтальным
список
горизонтальный
флексбокс
выравнивание
стиль
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 18 дней назад
в
CSS
Джесс
межбуквенный интервал css
УС
межбуквенный интервал
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 18 дней назад
в
CSS
Патриция Даниэль
как добавить эффекты тени на кнопку
CSS
HTML
тень
последствия
кнопка
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by A
почему моя сетка не подходит к телу, когда страница свернута
сетка
отзывчивый
медиазапросы
макет
размер экрана
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Анна
дайте мне цветовую палитру песочного цвета
цветовую палитру
песочный цвет
бежевый
коричневатый
оттенки
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
Анна
дайте мне градиент серого, зеленого и бежевого цветов
градиент
цвет
шифер серый
бежевый
светло-зеленый
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Emer
как переместить содержимое
справа от изображения?
HTML
CSS
изображение
элементы списка
встроенный блок
допуск
вертикальное выравнивание
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
Автор: Linda
Я создал панель навигации с помощью элемента ul, и все элементы li отображаются как встроенные в CSS.
Я хочу, чтобы это было отзывчивым, но когда я пытаюсь изменить размер экрана, я хочу, чтобы элементы находились друг под другом, но они все еще находились в одной строке. Как я могу это исправить?
отзывчивый
медиазапросы
панель навигации
ул
ли
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 19 дней назад
в
CSS
by Emer
как поместить контент в горизонтальные столбцы и удалить маркеры на
CSS
горизонтальные столбцы
отверстия от пуль
стиль списка
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
от Katusiime
как выровнять по центру мою кнопку
выровнять по центру
кнопка
CSS
допуск
дисплей
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Victoria
Мой h2 не меняется, когда страница расширяется по центру
CSS
медиа-запрос
Отзывчивый дизайн
выравнивание текста
элемент h2
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Victoria
Как сделать так, чтобы h2 отображался ниже на странице
CSS
позиционирование
допуск
h2
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Rikke V.
как изменить цвет кнопки?
кнопка
цвет
фон
стиль
CSS
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
Рикке В.
что такое наведение?
наведение
Веб-разработка
мышь
CSS-эффекты
элемент
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Parisa
как добавить тень к кнопке
CSS
тень
кнопка
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Folasade
Как мне собрать несколько фотографий, которые будут переворачиваться при просмотре
перевернуть
изображений
анимация
HTML
JavaScript
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Agnieszka
Что такое медиа-запросы и когда их использовать? Что можно использовать вместо медиазапросов?
Должно быть какое-то более экономичное решение.
имя_класса вложенный_элемент {
…
}
функции (1310)
постинг (213)
ru (434)
ru/css/text-decoration
Я хочу, чтобы это было отзывчивым, но когда я пытаюсь изменить размер экрана, я хочу, чтобы элементы находились друг под другом, но они все еще находились в одной строке. Как я могу это исправить? 
