Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

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

Изучаем псевдоклассы в CSS

Добрый день, друзья, сегодня разберём понятие псевдокласса в языке CSS (разницу между псевдоклассом и псевдоэлементом смотрите в конце статьи).

Псевдоклассы — это специальные команды, с помощью которых можно реализовывать более тонкую выборку элементов и задавать им CSS-свойства, а также воспроизводить некоторые анимационные эффекты.

Обычная схема псевдокласса в CSS, выглядит следующим образом:

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

Или

:псевдокласс {
 CSS-свойства: значения;
}

Перед именем псевдокласса, ставится двоеточие.

Распространённый пример псевдокласса, это изменение внешнего вида элемента, при наведении на него курсора мыши. Например вы можете увидеть данный эффект, если наведёте курсор мыши на ссылку находящуюся в боковом меню: снизу у ссылки появится подчеркивание. Этот анимационный эффект, появляется благодаря псевдоклассу :hover.

В CSS-коде это выглядит следующим образом:

/* Отключаем подчеркивание у ссылок */
a {
 text-decoration:none;
}
/* Включаем подчёркивание, при 
наведении на неё, курсором мыши */
a:hover {
 text-decoration:underline;
}

С помощью псевдокласса :hover, помимо ссылок также можно изменять внешний вид и других элементов. Например на моём сайте для вебмастеров, происходит подсвечивание строк таблицы при наведении на них курсором мыши, данный эффект вы можете увидеть в статье Цвета в CSS

В CSS-коде это выглядит следующим образом:

table tr:hover {
 background:#ddd;
}

Какие псевдоклассы существуют в CSS?

Рассмотрим, какие псевдоклассы существуют в языке CSS.

Псевдоклассы работающие с состоянием элемента

  • :link — задаёт CSS-свойства ссылкам, но не якорям
  • :visited — задаёт CSS-свойства уже посещённым ссылкам
  • :hover — задаёт CSS-свойства при наведении курсора мыши на элемент
  • :active — задаёт CSS-свойства при нажатии левой кнопкой мыши по элементу, при условии что кнопка мыши еще не отпущена
  • :focus — задаёт CSS-свойства при получении элементом фокуса, например щелкнули по текстовому полю (для того чтобы ввести данные), фокус могут получить (ссылки, кнопки, элементы формы), помимо щелчка мыши фокус могут получать элементы при нажатии на кнопку табуляции (Tab) на клавиатуре

Псевдоклассы применяемые к элементам формы

  • :checked — задаёт CSS-свойства при выделении элементов формы, таких как флажки (radio) или переключаетели (checkbox)
  • :disabled — задаёт CSS-свойства отключённым (заблокированным) элементам формы
  • :enabled — задаёт CSS-свойства включённым (обычным) элементам формы
  • :optional — задаёт CSS-свойства не обязательным для заполнения элементам формы input, у которых отсутствует атрибут required
  • :required — задаёт CSS-свойства обязательным для заполнения элементам формы input, у которых имеется атрибут required

Псевдоклассы работающие с деревом элементов

  • :first-child — задаёт CSS-свойства первому потомку родителя (родитель потомок:first-child { })
  • :last-child — задаёт CSS-свойства последнему потомку родителя
  • :first-of-type — задаёт CSS-свойства первому потомку родителя по типу
  • :last-of-type — задаёт CSS-свойства последнему потомку родителя по типу
  • :nth-child — задаёт CSS-свойства потомкам родителя на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-child(odd|even|число|выражение))
  • :nth-last-child — то же что и :nth-child, только нумерация идёт с конца
  • :nth-of-type — задаёт CSS-свойства потомкам элемента по типу, на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-of-type(odd|even|число|выражение))
  • :nth-last-of-type — то же что и :nth-of-type, только нумерация идёт с конца
  • :only-child — задаёт CSS-свойства элементу потомку, при условии что он единственный у родителя
  • :only-of-type — задаёт CSS-свойства элементу потомку по типу, при условии что он единственный у родителя

Под родителем тут понимается обычный селектор, в котором находятся данные элементы.

Остальные псевдоклассы

  • :empty — задаёт CSS-свойства, пустым элементам страницы, внутри которых ничего нету, даже пробела, например <span></span> или <td></td>
  • :not(селектор) — задаёт CSS-свойства всем элементам, кроме селекторов указанных в скобках
  • :target — задаёт CSS-свойства для элементов, к которым переходят по ссылкам-якорям

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

На этом пока всё, хотите узнать Разницу между псевдоклассами nth-child и nth-of-type, тогда добро пожаловать в следующий урок 🙂

Детские татарские стихи — для малышей и их родителей, участвующих на утренниках в детском саду.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 26 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget