Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Псевдоклассы CSS используются для добавления стилей к HTML-элементам, когда выполняется какое-то определенное условие. Какое именно условие должно быть соблюдено зависит от самого псевдокласса, который добавляется к селектору. Например, это может быть момент наведения пользователем курсора мыши на элемент или определенное положение элемента в дереве HTML-документа и т.д.

Псевдоклассы указываются следующим образом: сначала записывается какой-нибудь простой селектор (класс, идентификатор, селектор атрибутов и т.д.), а затем через двоеточие (:) сам псевдокласс. Общий синтаксис:

селектор:псевдокласс { свойство: значение; свойство: значение; ... }

Так как псевдокласы имеют отношение к селекторам, а не свойствам CSS, то, к сожалению, их нельзя использовать во встроенных стилях создаваемых с помощью атрибута style.

Пример использования псевдоклассов CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоклассы CSS</title>
  <style type="text/css">
   a:link { color: red; } /* красный цвет непосещенной ссылки */
   a:visited { color: blue; } /* синий цвет посещенной ссылки */
   a:hover {
    color: green; /* зеленый цвет ссылки под курсором мыши */
    font-weight: bold; /* жирный шрифт */
    text-decoration: none; /* убираем подчеркивание */
   }
   a:active { color: yellow; } /* желтый цвет ссылки в момент нажатия */
   tr:hover {
    background: green; /* зеленый цвет рядов таблицы под курсором мыши */
   }
   td {
    padding: 5px; /* внутренние отступы ячеек таблицы */
    border: 1px #000 solid; /* стили рамки вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <p><a href="/">Самостоятельное создание сайтов</a></p>
  <table>
   <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
   <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
   <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
  </table>
 </body>
</html>

Результат в браузере

Самостоятельное создание сайтов

Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

В этом примере был изменен цвет ссылок в зависимости от их состояния (непосещенная, посещенная, под курсором мыши, в момент нажатия), а также цвет рядов таблицы при наведении на них курсора мыши.

На что надо обратить внимание. Ну, во-первых, если вы недавно были на главной странице сеодон.ру, то цвет ссылки у вас сразу окрасится в «посещенный». Во-вторых — никогда не изменяйте размер или жирность шрифта ссылок в зависимости от их состояния, как было сделано в примере. Так как при этом размер ссылок начинает прыгать, что очень раздражает посетителей, да и вообще некрасиво, а вот убирать у них подчеркивание бывает очень даже к месту.

Internet Explorer 6.0 понимает псевдокласс :hover только для тега <A>, поэтому цвет рядов таблицы в нем не будет меняться.

Домашнее задание.

Задание будет довольно сложным, поэтому я не уверен, что вы сможете самостоятельно выполнить все так, как показано в результате задания, но тем интересней, попытайтесь.

  1. Возьмите макет одного из предыдущих домашних заданий и укажите в нем стили ссылок во всех меню так, как показано в результате. Возможно для этого вам придется убрать лишние стили, которые были актуальны для того задания и немного изменить HTML-код.
  2. Сделайте так, чтобы любой первый дочерний элемент (надеюсь помните, что это значит) находящийся внутри любого параграфа отображал текст красным цветом. При этом, если первым дочерним является <STRONG>, то текст внутри него должен быть дополнительно еще и подчеркнут.
  3. Разместите на странице три изображения и пусть они частично накладываются друг на друга. Сделайте так, чтобы та картинка, которая находится выше в HTML-коде, располагалась поверх двух других. Тут вам понадобится свойство z-index, но не пытайтесь его освоить «с наскока». Это свойство, как и вообще позиционирование, требует к себе очень бережного и нежного отношения, хотя само по себе оно и не сложное, а просто немного запутанное.
Соседние селекторы← Содержание →Псевдоэлементы