Как работать с псевдоклассами css

Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать с псевдоклассами в правилах css. Псевдокласс используется для того, чтобы определить определённое состояние элемента, например, ‘hover’ (состояние для наведения мышкой), ‘focus’ или ‘active’. Вы можете ознакомиться с этой ссылкой для получения более детального описания. Для того чтобы работать с псевдоклассами, ознакомьтесь с инструкциями ниже:

1. Откройте страницу и нажмите на клавишу F12, для того чтобы открыть инструмент Firebug (или другой инструмент исследования). Вы можете узнать больше о том, как использовать инструменты исследования на следующей странице.

2. Найдите элемент, для которого Вы хотите задать стили. Для того чтобы это сделать, активируйте инспектор, нажав на значок слева вверху в окне Firebug (1) и нажмите на элемент на странице, для того чтобы его использовать (2):

   

   В качестве альтернативы, Вы можете нажать на нужный элемент правой кнопкой мышки и выбрать ‘Исследовать с Firebug’ (или ‘Исследовать’ для других инструментов).

3. Справа Вы увидите стили, которые применяются к элементу в обычном состоянии. Выберите псевдокласс, нажав на маленькую стрелку вверху списка Стили (Styles), для того чтобы сделать так, чтобы применённые к элементу стили с псевдоклассами отобразились:

   

4. Теперь Вы можете видеть все элементы, которые влияют на элемент в остальных состояниях, например, при наведении мышкой. Это позволит Вам задать новый цвет для кнопок, изменить масштабирование и т.д. Измените значение свойства в коде, например, цвет или фон, и добавьте !important перед символом ; в конце строки со свойством. Обратите внимание на пример ниже:

   Исходное правило (определяет белый цвет ссылки при наведении мышкой):

   ?

   1 2 3 4

   .entry-content a:hover {     color: #ffffff; }

   Правило с изменениями (теперь цвет ссылки меняется на #123456 при наведении мышкой):

   ?

   1 2 3 4

   .entry-content a:hover {     color: #123456 !important; }

5. Вы можете задать определение любому свойству css таким способом. Закончив редактирование правила, скопируйте это новое (изменённое) правило в конец вашего файла .css (он может называться style.css, template.css, global.css и т.д.) Проверьте ваш сайт после применения изменений. В некоторых случаях Вы можете внести изменения непосредственно в код, в этом случае добавление ‘!important’ не обязательно.

Это конец данного туториала. Теперь Вы знаете, как работать с псевдоклассами в CSS.

Вы можете также ознакомиться с детальным видео-туториалом ниже: