HTML&CSS. Что такое псевдоклассы.

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

Псевдоклассы задают изменяемое со временем или с помощью действий пользователя динамическое состояние элементов, а также положение в дереве документа. Например, текстовая ссылка при наведении курсора изменяет свой цвет.

Для применения псевдоклассов используется следующий синтаксис - элемент, двоеточие и затем имя псевдокласса. После этого идет стандартное описание стилей. Например: a:hover {color:red;} Здесь элементом является ссылка (тэг <a>), псевдоклассом - состояние ссылки, когда на нее наведен курсор мыши (hover), далее следует стиль (красный цвет ссылки).

Кстати, допустимым является применение псевдоклассов к именам идентификаторов, классов, а также к контекстным селекторам (например, a.menu:hover {color: #ccc}  или  .menu a:hover {color: #ccc;}).

Условно все псевдоклассы делятся на определяющие состояние элементов и имеющие отношение к дереву документа. К первой группе относятся те, которые определяют текущее состояние элемента и применяют к нему заданный стиль.

active
Задействуется при активации элемента, (как например при наведении курсора на ссылку и кликом по ней).

link
Применяется к непосещенным ссылкам. Здесь стоит отметить, что записи a {...} и a:link {...} имеют равнозначный результат, так что псевдокласс link даже можно не указывать.

focus
Применяется к элементу при получении им фокуса. В случае текстового поля получение фокуса означает, что курсор установлен в поле, и в него можно вводить текст с клавиатуры. К примеру, если мы зададим стиль input:focus { color: red; }, то при клике на текстовом поле вводимый текст будет красным, а при активации другого элемента, введенный текст станет опять по-умолчанию черным.

Мы можем использовать псевдокласс focus только для тех элементов, которые могут получить фокус, а именно: теги <a>, <input>, <select> и <textarea>. Также следует заметить, что данный псевдокласс не поддерживается браузером Internet Explorer. (Этот браузер, наверное, и так никто не любит).

hover
Псевдокласс hover активизируется, когда курсор наведен на элемент.

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

Необходимо иметь ввиду, что при использовании псевдоклассов для ссылок имеет значение их порядок. Например, задать стили можно следующим образом:

<style type="text/css">
  a:link { 
    color: #ccc;
   }
   a:visited { 
    color: #333;
   }
   a:hover { 
    color: #666;
   }
   a:active { 
    color: #999;
   }
  </style>

Вначале мы указываем псевдокласс visited, а затем уже hover, иначе посещенные ссылки не изменят цвет при наведении на них курсора.

Псевдоклассы link и visited могут применяться только к ссылкам, а вот active и hover можно использовать и с другими элементами (например, tr или td).

Правда всеми "любимый" Internet Explorer (версии 6 и младше) позволяет использовать псевдоклассы active и hover только для ссылок. А с версии 7.0 уже можно добавлять псевдоклассы и к другим элементам.

Вторая группа - это псевдоклассы, имеющие отношение к дереву документа. К ней относятся псевдоклассы, определяющие положение элемента в дереве документа (их на самом деле немного, но некоторые браузеры расширяют этот список). Одним из таких псевдоклассов является first-child. Он применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.

Допустим, у нас есть следующий html-код:

<body>
  <p><strong>Hello</strong> my dear friends, <strong>I want</strong> to tell you
  about <strong>pseudoclasses</strong>.</p>
  <p><strong>Привет</strong> дорогие друзья, <strong>хочу поведать</b> 
  вам о <strong>псевдоклассах</strong>.</p>
</body>

Задав следующий стиль, мы получим в результате то, что каждый первый контейнер <strong> в КАЖДОМ контейнере <p> (так как каждый тэг <p> является уже новым родительским элементом для тэга <strong>) будет выделен цветом #ccc.

<style type="text/css">
   strong:first-child { 
    color: #ccc;
   }
</style>

Internet Explorer поддерживает псевдокласс first-child также начиная только с версии 7.0.

Надеюсь, вы разберетесь, что к чему, желаю удачного применения знаний =)

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.