Псевдоклассы и псевдоэлементы: Псевдоэлементы и псевдоклассы CSS. Контекстные селекторы — учебник CSS – Pseudo-elements — Web technology for developers

Содержание

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

Псевдоэлемент  ::placeholder

Псевдоэлемент  ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги <input> атрибутом  type="text" или "email", но также их часто можно встретить в полях типа "url" или "search":

<p><input type="text" name="name" placeholder="Иван Иваныч"></p> <p><input type="email" name="email" placeholder="[email protected]"></p> <p><input type="url" name="site" placeholder="http://html-plus.in.ua"></p> <p><input type="search" name="sitesearch" placeholder="Поиск по сайту"></p>

<p><input type="text" name="name" placeholder="Иван Иваныч"></p>

<p><input type="email" name="email" placeholder="[email protected]"></p>

<p><input type="url" name="site" placeholder="http://html-plus.in.ua"></p>

<p><input type="search" name="sitesearch" placeholder="Поиск по сайту"></p>

Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

/* Chrome/Opera/Safari до 2017 года*/ ::-webkit-input-placeholder { color: orange; } /* Firefox 19-50 */ ::-moz-placeholder { color: orange; } /* Firefox 4-18 */ :-moz-placeholder { color: orange; } /* IE 10+ */ :-ms-input-placeholder { color: orange; } /*Microsoft Edge */ ::-ms-input-placeholder{ color: orange; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/* Chrome/Opera/Safari до 2017 года*/

::-webkit-input-placeholder {

  color: orange;

}

/* Firefox 19-50 */

::-moz-placeholder {

  color: orange;

}

/* Firefox 4-18 */

:-moz-placeholder {

  color: orange;

}

/* IE 10+ */

:-ms-input-placeholder {

  color: orange;

}

 

/*Microsoft Edge */

::-ms-input-placeholder{

  color: orange;

}

Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

See the Pen Псевдоэлемент ::placeholder by Elen (@ambassador) on CodePen.18892

В примере поле с type="search" имеет другой цвет текста в placeholder. Чтобы изменить цвет для определенного типа поля,  необходимо записать стили этого псевдоэлемента так:

input[type="search"]::placeholder { color: #09f; }

input[type="search"]::placeholder {

  color: #09f;

}

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

input[type="search"]::-webkit-input-placeholder{ color: #09f; } input[type="search"]:-moz-placeholder { color: #09f; } input[type="search"]::-moz-placeholder { color: #09f; } input[type="search"]:-ms-input-placeholder { color: #09f; } input[type="search"]::-ms-input-placeholder { color: #09f; }

input[type="search"]::-webkit-input-placeholder{

  color: #09f;

}

input[type="search"]:-moz-placeholder {

  color: #09f;

}

input[type="search"]::-moz-placeholder {

  color: #09f;

}

input[type="search"]:-ms-input-placeholder {

  color: #09f;

}

input[type="search"]::-ms-input-placeholder {

  color: #09f;

}

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

Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

  • color
  • font и все связанные свойства (font-size, font-family и т.д.)
  • text-decoration
  • text-indent
  • text-overflow
  • text-transform
  • line-height
  • word-spacing
  • letter-spacing
  • background и все связанные свойства (background-color, background-image и т.д.)
  • opacity
  • vertical-align

В основном, это свойства, так или иначе связанные с форматированием текста.

Псевдокласс :placeholder-shown

Кроме псевдоэлемента  ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown, посмотреть поддержку которого можно также на сайте caniuse.com.

Отличие  :placeholder-shown от  ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

<style> input, textarea { border: 2px solid black; } input:-moz-placeholder-shown, textarea:-moz-placeholder-shown { border: 2px dotted orange; } input:-ms-input-placeholder-shown, textarea:-ms-input-placeholder-shown{ border: 2px dotted orange; } input:placeholder-shown, textarea:placeholder-shown { border: 2px dotted orange; } </style> <div> <p><input type="text" name="name" placeholder="Иван Иваныч"></p> <p><input type="email" name="email" placeholder="[email protected]"></p> <p><textarea name="msg" placeholder="Сообщение"></textarea></p> </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<style>

input, textarea  { border: 2px solid black; }

 

input:-moz-placeholder-shown,

textarea:-moz-placeholder-shown { border: 2px dotted orange; }

 

input:-ms-input-placeholder-shown,

textarea:-ms-input-placeholder-shown{ border: 2px dotted orange; }

 

input:placeholder-shown,

textarea:placeholder-shown { border: 2px dotted orange; }

</style>

 

<div>

<p><input type="text" name="name" placeholder="Иван Иваныч"></p>

<p><input type="email" name="email" placeholder="[email protected]"></p>

<p><textarea name="msg" placeholder="Сообщение"></textarea></p>

</div>

Посмотрите пример в действии. Для этого нужно набрать какой-либо текст в поле ввода (<input>) или в текстовой области (<textarea>).

Отличный пример использования этого свойства можно продемонстрировать для первоначального скрытия текста метки поля (label), а затем анимированного ее перемещения в конец поля. Т.е. когда мы видим текст из атрибута placeholder, нам текст в label не нужен - поэтому он скрыт (свойство opacity: 0). Как только пользователь начинает вводить текст, заполняя поле, текст из placeholder автоматически пропадает, зато выезжает label и размещается в качестве подсказки в конце поля.

See the Pen Псевдокласс :placeholder-shown by Elen (@ambassador) on CodePen.18892

Цвет каретки

Теперь можно в CSS задать цвет каретки, т.е. курсора, который мерцает при вводе текста. Для этого нужно использовать свойство caret-color. Поддержка в современных браузерах пока не очень четкая, но последние версии и Firefox, и Chrome, и Safari, и Opera, причем и для ОС Android и iOS уже поддерживают это свойство. Отстает Microsoft Edge и IE и Opera Mini.

В примере ниже вы можете увидеть разницу между черной и синей кареткой.

Псевдоклассы :required и :optional

В HTML появился очень удобный атрибут required для обязательных к заполнению элементов форм. Ему соответству в CSS псевдокласс :required, который позволяет выделить нужным вам образом все обязательные поля. Другой псевдокласс - :optional, напротив, находит любые элементы <input> , у которых не установлен атрибут required. Он позволяет задавать необязательным элементам формы другие стили.

Попробуем на примере использовать псевдоклассы:required

и :optional. Выделим разными рамками обязательные и необязательные поля. Кроме того, используем привычную для всех звездочку для указания на обязательное поле, но не в виде текста, а в виде псевдоэлемента ::after для элемента label.

.group-field input:required + label::after { content: '*'; color: red; }

.group-field input:required + label::after {

  content: '*';

  color: red;

}

Для использования этого селектора нам понадобилось разместить label после input. Визуально поменяем их местами, назначив родительскому элементу p с классом .group-field свойство display: flex, а вложенному в него элементу input свойство order:1, использовав преимущества разметки с помощью модели Flexbox:

.group-field {display: flex;} .group-field input,.group-field select { order: 1; ...; } ------ <p> <input type="text" required="required"> <label for="name">Имя</label> </p>

.group-field {display: flex;}

.group-field input,.group-field select {

  order: 1;

  ...;

}

------

  <p>    

    <input type="text" required="required">

    <label for="name">Имя</label>

  </p>

Пример формы с обязательными и необязательными полями:

See the Pen Псевдоклассы :required и :optional by Elen (@ambassador) on CodePen.18892

Псевдокласс :checked

Все предыдущие свойства относились к оформлению текстовых полей и областей. Однако спецификация не обошла вниманием флажки и переключатели (или радио-кнопки). Как правило, их нужно отмечать или выбирать, т.е. назначать атрибут checked. Поэтому в CSS3 появился псевдокласс :checked. С его помощью мы можем стилизовать выбранные элементы формы.

Рассмотрим такой пример:

See the Pen Псевдокласс :checked by Elen (@ambassador) on CodePen.18892

При клике на любом флажке или переключателе текст в элементе label, привязанном к нему становится жирным и выделяется другим цветом. И все это за счет работы псевдокласса :checked:

input:checked + label { color: #179cb9; font-weight: bold; }

input:checked + label {

    color: #179cb9;

    font-weight: bold;

}

Поскольку нам нужно отформатировать именно текст в label, здесь использован соседний селектор (input:checked + label).  Для того чтобы задать форматирование только для радио-кнопок, можно использовать селектор атрибута:

input[type="radio"]:checked+label{ color: #179cb9; font-weight: bold; }

input[type="radio"]:checked+label{

    color: #179cb9;

    font-weight: bold;

}

 

 

Просмотров: 121

Задачи на работу с псевдоклассами и псевдоэлементами CSS

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На first-letter

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-letter.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На first-line

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-line.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На selection

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: selection.

Повторите страницу по данному по образцу (выделите текст и повторите цвет и фон выделения):

Вы можете открыть этот пример в отдельной вкладке браузера.

На placeholder

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: placeholder.

Повторите страницу по данному по образцу (поставьте курсор в инпут и попробуйте что-нибудь ввести):

Вы можете открыть этот пример в отдельной вкладке браузера.

На focus

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: focus.

Повторите страницу по данному по образцу (поставьте курсор в инпут и посмотрите как он себя поведет - это и надо повторить):

Вы можете открыть этот пример в отдельной вкладке браузера.

На after, before, content

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: after, before, content.

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст "Начало:", а в конце - ":конец!"):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст, в начале он покрашен в красный цвет, а в конце - в зеленый):

Вы можете открыть этот пример в отдельной вкладке браузера.

На counter-increment

Для решения задач данного блока вам понадобятся следующие CSS свойства, псевдоклассы и псевдоэлементы: counter-increment, counter-reset, after, before.

Повторите страницу по данному по образцу (в начале каждого абзаца вставлена автоматическая нумерация "Абзац №число. "):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (нумерация начинается с 8-ми):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в середине нумерация начинается с начала):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в середине нумерация имеет разрыв):

Вы можете открыть этот пример в отдельной вкладке браузера.

На nth

Повторите страницу по данному по образцу (первый li покрашен в красный цвет, а последний - в зеленый):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (третий li покрашен в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (четные li покрашены в зеленый цвет, нечетные - в красный):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (каждая третья li покрашена в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (всегда выбрана предпоследняя li, независимо от их количества):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (выбрана и покрашена в красный цвет только та li, которая является единственной li своего родителя):

Вы можете открыть этот пример в отдельной вкладке браузера.

На checked

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: checked.

На disabled, enabled

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: disabled-enabled.

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

Вы можете открыть этот пример в отдельной вкладке браузера.

На empty

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: empty.

Повторите страницу по данному по образцу (пустая li имеет маркер и границу):

Вы можете открыть этот пример в отдельной вкладке браузера.

На not

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: not.

Повторите страницу по данному по образцу (абзац без класса .test светится красным цветом):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (все li, кроме первой, покрашены в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (все li, кроме третьей, покрашены в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

На lang

Для решения задач данного блока вам понадобятся следующие CSS свойства, псевдоклассы и псевдоэлементы: lang quotes.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На target

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: target.

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

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок 4. Псевдоэлементы и псевдоклассы

Есть несколько элементов, которых нет в HTML, но они есть на странице (к примеру первая буква слова) их называют псевдоэлементами. Псевдоэлементам тоже можно задавать стиль.

К псевдоэлементам относят:

first-letter - стиль для первой буквы слова. Пример:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <p>
    Это текст параграфа, и первую букву мы выделили красным цветом.
    </p>
  </body>
</html>

Перекрасим первую букву параграфа в красный цвет, пишем:

 

p:first-letter{
  color:red;
}

 

Получаем:

first-line - стиль для первой строки абзаца. Перекрасим первую строку абзаца в синий цвет. Пишем: 

 

p:first-letter{
  color:red;
}
p:first-line{
  color:blue;
}

 

Получаем:

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

В CSS всего четыре псевдо-класса, псевдо-классы позволяют работать с ссылками. У ссылок бывает четыре состояния:

простая

активная

посещенная

на которую наведен курсор

Чтоб описать стиль для этих ссылок существуют псевдоклассы:

a:link - стиль простой ссылки

a:active - стиль активной ссылки

a:visited - стиль посещенной ссылки

a:hover - стиль ссылки, на которую наведен курсор

По умолчанию ссылки всегда синего цвета и подчеркнуты. Давайте потренируемся:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <a href="#">ссылка</a>
  </body>
</html>

 

Ссылка по умолчанию выглядит так:

 

Изменим цвет ссылке на зеленый и уберем подчеркивание:

 

a{
  color:green;
  text-decoration:none;
}

text-decoration - отвечает за подчеркивание, а значение none говорит, что подчеркивать не надо.

 

 

Пойдем дальше и изменим стиль ссылки, на которую навели курсор. Пусть она изменит цвет на красный: 

 

a{
  color:green;
  text-decoration:none;
}
a:hover{
  color:red;
}

 

Проверяем нашу страничку и видим, что при наведении мышкой ссылка меняет цвет с зеленого на красный.

CSS селекторы и псевдоклассы

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

CSS селекторы:

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

X:

Селектор тега, описывает стиль к тегам X.

a {color: green; }

Все ссылки окрасятся в зеленый цвет.

.X

Селектор класса, описывает стиль к классу X.

.elims-class { color:green; }

Все элементы класса "elims-class" окрасятся в зеленый цвет.

.X.Y

Селектор мультикласса, описывает стиль элементов, которые одновременно принадлежат к классу X и Y.

elims-class1.elims-class2 { color:green; }

Все абзацы <p> будут окрашены в зеленый цвет.

#X

Селектор идентификатора, описывает стиль элементов с id "elims-id". На странице может быть только один элемент с таким id, в отличии от класса.

#elims-id { width: 640px;}

*

* { margin: 0; padding: 0; }

Описывает стиль каждого элемента. Часто используется для обнуления всех элементов. Этот селектор нагружает браузер.

X Y

Селектор вложенности, описывает стиль элементов Y находящихся где-то внутри элемента X, независимо от глубины вложенности.

li a {color:red;}

Ссылки которые находятся в li-элементе будут окрашены в красный цвет

X *

Описывает стиль всех дочерних элементов X.

#elims-id * { padding-top: 10px ; }

X > Y

Дочерний селектор, описывает стиль элемента Y, который находиться где-то внутри элемента X на первом уровне вложенности.

div#elims-id > a {color:red;}

Ссылки находящиеся в div с id "elims-id" будут окрашены в красный цвет

X+Y

Селектор соседства, описывает стиль первого элемента Y, который идет сразу за X.

b + a {color: green}

Ссылки, которые идут после жирного текста буду окрашены в зеленый цвет.

X ~ Y

Селектор родственности, похож на селектор соседства, только описывает стиль не первого элемента Y который должен идти сразу за X, а всех элементов Y, которые идут за X и имеют одного и того же родителя.

div.elims-class ~ a {color: green}

X[Y]

Селектор атрибута, описывает стиль всех элементов X, у которых есть атрибут Y.

a[title] { color: red; }

Все ссылки имеющие атрибут title окрасятся в красный цвет.

X[Y="Z"]

Описывает стиль всех элементов X, имеющих атрибут Y, с точным значением Z.

a[href="https://elims.org.ua"]  { color: black; }

Все ссылки ведущие на главную elims.org.ua будут черного цвета.

X[Y*="Z"]

Описывает стиль всех элементов X, имеющих в тексте атрибута Y значение Z.

a[href*="elims.org.ua"]  { color: black; }

Все ссылки ведущие куда-либо на сайт elims.org.ua окрасятся в черный цвет.

X[Y^="Z"]

Описывает стиль всех элементов X, с атрибутами Y значение которых начинается на Z.

a[href^="https"]  { color: black; }

Все ссылки на https сайты окрасятся в черный цвет.

X[Y$="Z"]

Описывает стиль всех элементов X, с атрибутами Y значение которых заканчивается на Z.

a[href$=".jpg"]  { color: black; }

Все ссылки указывающие на изображения окрасятся в черный цвет

X[Y~="Z"]

Описывает стиль всех элементов X, с атрибутом Y значение которых содержит слово Z. Может пригодиться когда в атрибуте через пробел указано несколько классов.

div[class~="head"]  { width=100%; }

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

X:link

a:link { color: green; }

Псевдокласс :link, описывает стиль ссылкам, на которые еще НЕ кликнули

X:visited

a:visited { color: red; }

Псевдокласс :visited, выделяем все ссылки, по которым уже кликали.

X:hover

div.elims-class:hover {color:red}

Задаем стиль элементу X в тот момент, когда на него наведен курсор мышки

X:checked

Описывает отмеченные radio или checkbox элементы

input[type=radio]:checked { border:1px solid black; }

X:not(Y)

Задаем стиль всем элементам X, кроме того, который указан в скобках.

div:not(#elims-id) {color:red}

Все div-блоки кроме того, у которого id=elims-id окрасятся в красный цвет.

X:first-of-type

Задает стиль первому элементу X.

p:first-of-type {color:red}

Первый абзац будет красного цвета.

X:last-of-type

Задает стиль последнему элементу X.

p:last-of-type {color:red}

Последний абзац будет красного цвета.

X:nth-of-type(N)

Задаем стиль N-му элементу X. N может принимать не только значение целого числа, но и выражения. Например: "2n+1" - все нечетные элементы, "3n" - каждый третий элемент.

p:nth-of-type(3) {color:red}

Третий абзац будет красного цвета.

X:nth-last-of-type(n)

Задаем стиль N-му элементу X с конца. N может принимать выражение.

p:nth-of-type(3) {color:red}

Третий абзац с конца будет красного цвета.

X:first-child

Задает стиль первому дочернему элементу в X.

li:first-child {color:red}

Первый пункт списка будет красного цвета.

X:last-child

Задает стиль последнему дочернему элементу в X.

li:last-child {color:red}

Последний пункт списка будет красного цвета.

X:nth-child(N)

Задаем стиль N-му дочернему элементу элемента X. N может принимать выражение.

li:nth-child(2n) {color:red}

Текст в каждом втором (парном)  пункте списка(ul) будет красного цвета.

X:nth-last-child(N)

Задаем стиль N-му дочернему элементу элемента X отсчитывая с конца. N может принимать выражение.

li:nth-last-child(4) {color:red}

Текст в четвертом пункте списка (ul) с конца будет красного цвета.

X:only-child

Стиль для дочернего элемента который является единственным у своего родителя, никаких других элементов у родителя нет.

p:only-child {color:red}

X:only-of-type

p:only-of-type {color:red}

Стиль элемента который является единственным указанного типа у своего родителя. То есть если в div-блоке есть один абзац, один span и много изображений вне этого абзаца, то такой абзац будет окрашен, так как он является единственным в div-блоке.

Псевдоэлементы CSS:

X:before, X:after

Вывод желаемого контента (параметр content) с описанным стилем до и после элемента X.

 .new:after {content: "Новый материал!"; color: red; font-size: 90%;}

Добавляем красную надпись "Новый материал" после элементов класcа .new.

X::first-letter

Задаем стиль первой букве в элементе X.

p::first-letter{font-size:200%;}

Первая буква в параграфе будет в два раза больше.

X::first-letter

Задаем стиль первой строке в элементе X.

p::first-line{font-weight:600;}

Первая строка в параграфе будет с жирным текстом.

Ссылки:

  • cssdeck.com/labs - ресурс на котором можно тестировать css код, по ссылке откроется мой пример тестирования псевдоклассов only-child и only-of-type.
  • html5.by/blog/placeholder - псевдокласс placeholder и интересные эффекты

Понравилось? =) Поделись с друзьями:

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

Псевдоклассы подключают к HTML селекторам или селекторам классов, чтобы определить особое состояние данного селектора. Подобная декларация имеет следующую форму - селектор:псевдокласс { свойство: значение; }, т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.

Многие инициативы CSS не поддерживаются абсолютно всеми браузерами, однако со ссылками можно смело применять четыре псевдокласса:

  • link – не посещенная ссылка.
  • visited – посещенная ссылка.
  • active – ссылка, получившая фокус, активная ссылка.
  • hover – ссылка, на которую наведен курсор мыши.

a.snowman:link {
   color: blue;
}

a.snowman:visited {
   color: purple;
}

a.snowman:active {
   color: red;
}

a.snowman:hover {
   text-decoration: none;
   color: blue;
   background-color: yellow;
}

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

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

Кроме всего прочего псевдокласс hover может использоваться с любыми элементами, а не только со ссылками. К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.

Селекторы псевдоэлементов - Xiper.net

Автор: Александр Головко Дата публикации: 16.02.2011

Предыдущая статья Селекторы псевдоклассов.

Описание селектора:

  • Выполняемая задача — настройка стилей для псевдоэлементов. В некоторых случаях — генерация псевдоэлементов.
  • Обозначение — название псевдоэлемента (с предшествующим двоеточием).
  • Пример использования:

будем выводить первую букву абзаца увеличенным размером шрифта.


p:first-letter {
	font-size: 120%;
}

Подробнее про селекторы псевдоэлементов

Псевдоэлементы — это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно.

Селектор псевдоэлементов и селектор псевдоклассов, точки зрения синтаксиса — это фактически одно и то же. Разница только в выбираемых элементах.

Псевдоэлементы, как и псевдоклассы, детально рассмотрены в нашем CSS справочнике (CSS по стандартам, подраздел «Псевдоэлементы»).

Так же как и с псевдоклассами, в этой статье рассмотрим CSS2 псевдоэлементы. А новым особенностям, которые привнес CSS3 будет посвящена отдельная статья.

Псевдоэлементы CSS2

В CSS2 определено 4 псевдоэлемента.

Псевдоэлемент :first-letter

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

Стили


p:first-letter {
	font-size: 120%;
}

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


<p>
<span>Т</span>ут идет какой-то текст
<p>

.firstLetter {
	font-size: 120%;
}

Псевдоэлемент :first-line

Очень похож на предыдущий. Только стили применяются не к одной букве, а ко всей первой строке. Обрати внимание, что в случае резинового дизайна мы не можем знать заранее длину первой строки, и «взять» ее в span (как в случае с первой буквой) уже нереально.

Псевдоэлементы :after и :before

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

Пример. Реализуем FAQ в виде списка определений. При этом автоматически генерируем слова «вопрос» и «ответ»(в исходном HTML их не будет, а на страничке они отобразятся):


<dl>
<dt>Тут будет какой-то вопрос</dt>
<dd>А тут ответ</dd>
</dl>

dt::first-line{
	content: "Вопрос: ";
}
dd:before{
	content: "Ответ: ";
}

Замечание! Псевдоэлементы :after и :before не работают в IE6-7. Но тут нам поможет прием описанный в статье Эмуляция псевдоэлементов after и before для IE 6-7

Особенность использования

В CSS-селекторе псевдоэлемент должен обязательно идти последним. Например, такая запись не сработает, так как после псевдокласса идет еще и span:


p:first-line span{
	color: #80bd34;
}

Область применения

Селекторы псевдоэлементов :first-letter и :first-line достаточно экзотичны. Скорее всего, тебе не придется часто их использовать. Тем не менее, если будет необходимость, можно ознакомиться со статьей Используем псевдоэлемент :first-letter.

Что же касается генерации контента с помощью :after и :before, то это очень мощный прием, который применяется в различных, иногда, совсем не тривиальных ситуациях. Примеры можно посмотреть в статьях Резиновое меню, Вставка спецсимволов в генерируемый контент, Псевдоэлемент before для маркера списка.

Следующая статья — Составные селекторы. Комбинаторы.

Псевдоклассы и псевдоэлементы селекторов. Самоучитель CSS

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

1) Псевдокласс :first-child Этот псевдокласс есть исключением и всего лишь дополняет дочерние селекторы тегов.
<STYLE type="text/css">
DIV>P { color: red }
</STYLE>
В этом случае правила выполняются в всех тегах P, для котрых родителем является тег DIV, но для того чтобы правило выполнялось только с первым совпадением ииспользуется псевдокласс :first-child
<STYLE type="text/css">
DIV>P:first-child { color: red }
</STYLE>

2)Псевдоклассы гиперссылки.
В каскадных таблицах стилей существует два псевдокласса, которые управляют не посещенными(:link) и посещенными(:visited) гипер ссылками
<STYLE type="text/css">
A:link { color: #000000 }
A:visited { color: #0000ff }

</STYLE>

3) Динамические псевдоклассы.
A:hover{ color: #0000ff } Этот псевдокласс выполняется если пользователь навел указатель мышки над элементом.
A:active{ color: #0000ff } Этот псевдокласс выполняется если активировал элемент, например нажал мышкой.
A:focus{ color: #0000ff } Этот псевдокласс выполняется если элемент имеет фокус(принял событие от клавиатуры или другие формы ввода текста)
Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, а A:active только после A:hover, если этого не сделать правила могут быть нарушены.

4) Псевдокласс языка
Почти в каждом языке, есть символы которые отображаются в другом языке по другому, например кавычки, если в русском ‹‹ то в английском " и чтобы символы оттображались согласно языка и сущетвует псевдокласс :lang .
HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
Для того чтобы этот псевдокласс выполнялся, текст должен быть помещен в теги с атрибутом lang

5) Псевдоэлементы позволяют управлять первой буквой или первой строкой в теге.
Псевдоэлемент :first-letter управляет первой буквой в теге, например:
P:first-letter { color: red }
согласно этого правила все первые буквы в тексе помещенные в тег P будут красными, я так-же использую этот псевдоэлемент, номерация это и есть этот псевдокласс, правда у меня он немного сложнее.
Псевдоэлемент :first-line тоже самое но не с первой буквой а с первой строкой
P:first-line { color: red } все первые строки будут красными.

Есть еще псевдоэлементы :before и :after, они генерируют содежнание в начале и в конце содержимого.
P:before { content: "Начало абзаца: " }
P:after { content: " Конец абзаца. " }
Текст из before будет перед абзацем, а из after в конце.
Вот живой пример, который будет в самом низу страницы выводить текст: "Copiring webuchebnik.ru"
BODY:after {
content: "Copiring webuchebnik.ru";
text-align: center;
}

Возможностей у этих псевдоэлементов на много больше, об этом поговорим когда будем проходить генерируемое содержимое.

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

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