Блог Тимура Казанского

Все псевдоклассы в CSS


Всем привет! И сегодня мы с вами разберем такую тему, как псевдоклассы в CSS3.

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

Так вот, все это происходит благодаря селекторам псевдокласса и с их помощью, вы с легкостью можете изменять стилизацию ссылок на вашем сайте, кстати не только ссылок, но об этом чуть позже. Сразу хочу отметить, что псевдоклассы это не то же самое, что классы, хотя и можно считать их таковыми. Единственное их отличие состоит в том, что они никогда не указываются в HTML коде, отсюда и название, как бы класс, но не класс, словом - псевдо.

А теперь давайте рассмотрим, как обозначаются псевдоклассы и перейдем к примерам их использования.

Селекторы псевдоклассов обозначаются с помощью знака двоеточия (:), и как правило следуют за именем элемента (a:link), например возьмем хорошо знакомый нам элемент ссылки <a>, и с помощью псевдокласса изменим его стиль. В случае, если на ссылку не разу не щелкали, по умолчанию, она будет иметь синий цвет, а после щелчка - бордовый, так вот, мы с вами исправим эту ситуацию и придадим ссылке красный цвет до щелчка (a:link) и зеленый после (a:visited).

Стили по умолчанию

Стиль «До щелчка и После»

Пвсевдоклассы link и visited

a:link { стиль ссылки до щелчка мышью, т.е. вы еще ее не посещали
color: red;
}
a:visited { стиль ссылки после щелчка
color: green;
}

Хорошо, с этим разобрались, но какие еще стили оформления имеет элемент <a>, спросите вы, давайте посмотрим:

Стиль наведения

Пвсевдокласс hover

Предположим, вы хотите, чтобы при наведении курсора мыши по ссылке, она меняла цвет (с синего по умолчанию) на желтый, тогда вам нужен селектор :hover.

a:hover {
color: yellow;
}

Стиль фокуса

Пвсевдокласс focus

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

Если не замечали, то знайте, что с помощью псевдоклассов вы также можете (при щелчке на поле или говоря правильно, когда оно будет иметь фокус) изменить его фон, т.е. вы щелкнули мышью на поле (например, когда хотите ввести пароль), и в этот момент поле приобретает фокус, тем самым меняя свой фон.

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

a:focus {
color: grey;
}

Стиль активного состояния

Пвсевдокласс active

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

a:active {
color: pink;
}

Но имейте в виду, если вы захотите применить все 5 стилей к однму элементу <a>, то рекомендую использовать следующую последовательность при объявлении псевдоклассов:

a:link {}
a:visited {}
a:focus { }
a:hover { }
a:active { }

Если вы поменяете последовательность и укажете например псевдоклассы link и visited в конце, то в этом случае они отменят действия остальных псевдоклассов (т.е. вышеперечисленных).

Данные пвсевдокласс не отобразятся

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

Вот мы и разобрали с вами 5 самых распространенных и важных псевдоклассов CSS, которые применяются повсеместно и довольно часто. Какие еще псевдоклассы существуют? А ведь их еще 18. Давайте бегло пробежимся по ним, описывать их подробно, думаю не имеет смысла, так как они используются довольно редко.

  • 1.:target – переходит к элементу, id которого указан в адресной строке браузера после символа решетки (#), например site.ru/about/#id_elementa_p
  • 2.: lang() – указывает язык который будет использоваться в элементе, например p:lang("en"){}
  • 3.:not () – выбирает элемент за исключением того, который указан в скобках данного псевдокласса

Селекторы применяемые к пользовательским формам

  • 4.:enabled - применение стиля к доступным пользовательским интерфейсам
  • 5.:disabled – применение стиля для заблокированных форм и полей, которые не могут изменяться, нажиматься, а также иметь фокус
  • 6.:checked – данный псевдокласс применяется к таким элементам как checkbox и radio, при установки галочки или включении которых происходит их стилизация

Псевдоклассы применяемые на основании расположения элементов в дереве или структуре документа (о структуре документа я подробно писал в данной статье)

  • 7.:root Указывает на корневой элемент в структуре документа
  • 8.:empty Указывает на пустые элементы
  • 9.:only-child указывает на единственные дочерние элементы родителя
  • 10.:first-child указывает на первый дочерний элемент родителя
  • 11.:last-child указывает на последний дочерний элемент родителя соответственно
  • 12.:only-of-type задает стиль для первого элемента из всех дочерних элементов родителя
  • 13.:first-of-type – задает стиль для единственного элемента из всех дочерних элементов родителя
  • 14.:last-of-type - задает стиль для последнего элемента из всех дочерних элементов родителя
  • 15.:nth-child()– указывает стиль дочернего элемента основываясь на нумерации в структуре документа
  • 16.:nth-last-child() - указывает стиль дочернего элемента основываясь на нумерации в структуре документа, начиная от последнего элемента
  • 17.:nth-of-type() – указывает стиль элемента основываясь на нумерации в структуре документа
  • 18.:nth-last-of-type() - указывает стиль элемента основываясь на нумерации в структуре документа, начиная от последнего элемента

На этом я думаю все. Всем пока и с вами был Тимур Казанский. Увидимся в следующих статьях.

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0