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

Псевдокласс – css термин, использующийся в технологии CSS, с целью обозначения специального атрибута, который позволяет определить уникальный стиль или стили для элемента веб-страницы состояние которого может изменяться в зависимости от действий пользователя. Кроме того, псевдоклассы (в рамках технологии CSS) применяются с целью отслеживания положения определенных элементов, присутствующих в структуре каскадной таблицы стилей (CSS документа).

Синтаксис для применения псевдоклассов в CSS:

Элемент css: Псевдокласс { Описание правил стиля }

Как видим из нашего с вами примера выше, вначале идет «элемент-css», а уже к нему добавляется «псевдокласс», «двоеточие», после двоеточия указываем имя нашего псевдокласса. Как правило, в css документах допускается применять псевдоклассы к классам или именам идентификаторов:

a.psevdoklass:hover {color: red}

А также к селекторам:

.psevdoklass a:hover {background: #ffffff}

Пример псевдоклассов: active, link, focus, hover, visited, first-child и другие.

Название и назначение псевдоклассов

  • link — стиль не посещенной ссылки;
  • hover — изменяет состояние объекта при наведении на него мышкой;
  • active — состояние активного объекта;
  • visited — стиль посещенной ссылки;
  • focus — когда вы используете какой-то объект на странице, фокусируетесь мышкой на нем;
  • first-child — дочерний первый элемент текущего элемента;
  • last-child — дочерний последний элемент;
  • only-child — применяет стиль для элемента, если он единственный дочерний элемент;
  • empty — данный псевдокласс выбирает пустые элементы;
  • target — если у вас адрес имеет вид index.html#terminscss, то данный псевдокласс задаст необходимое правило правило для элемента с id=»terminscss»;
  • enabled — выбирает активные инпуты;
  • disabled — выбирает неактивные инпуты;
  • checked — делает чекбоксы отмеченными и радиобаттоны выбранными;
  • indeterminate — для радиобаттонов и чекбоксов определяет состояние, когда они не выбраны, и ни не выбранные;
  • default — элемент «по-умолчанию», например кнопка отправки формы и т.д.;
  • required — псевдокласс, который делает поля обязательными;
  • optional — псевдокласс, который делает поля обязательными необязательными;
  • read-only — делает элементы доступными только для чтения;
  • read-write — делает элементы доступными для чтения и записи.
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

3 вопроса / комментария

  1. Евгений,
    1

    Весьма полезная статья в первую очередь для тех, кто только начинает учиться языкам программирования и вообще основам построения сайта и основам общего сайтостроительства и также блогостроительства. А ведь все эти термины как раз и направлены на то, чтобы максимально ознакомить всех начинающих дизайнеров и программистов с теми первоочередными этапами правильной структуры сайта а также уникального стиля элементов веб-страницы. И в первую очередь таким инструментом для определения и выступают псевдоклассы CSS.

  2. Ольга,
    2

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

  3. Евгений Москаленко,
    3

    Ольга, возможно вам поможет вот этот вот видеокурс — evgmoskalenko.com/site-cr...videourokov.html

Задать вопрос / Оставить комментарий