Pseudo-classes and pseudo-elements

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

В данной, третьей по счету, статье по селекторам мы обсудим псевдоселекторы — те, что выбирают только часть элемента или только элементы в определенном контексте. Они бывают двух типов  — псевдоклассы и псевдоэлементы.

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

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

Мы не будем пока копать слишком глубоко —  в данном курсе не ставится цель рассказать вам все в мельчайших деталях, вы наверняка встретитесь с ними позднее,  в подходящий момент.

Пример псевдокласса

Рассмотрим пример того, как их можно использовать. Сначала кусочек HTML:

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

Теперь CSS-правила:

/* These styles will style our link
   in all states */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

а теперь поиграем со ссылкой, которую мы только что оформили!

Упражнение: полосатый список

Опять ваша очередь — здесь мы хотим раскрасить "под зебру" некий список ссылок, а также добавить подходящие псевдоклассы, чтобы оформление ссылки изменялось, когда на нее наводят указатель мыши. Вам нужно отредактировать только последние три правила этого упражнения. Несколько подсказок:

  1. Вы уже видели, как выглядит второй псевдокласс для оформления элементов, на которые наведен указатель.
  2. Для полосок можно использовать псевдокласс вроде :nth-of-type(), задав слегка отличающиеся версии этого псевдокласса для оформления четных и нечетных пунктов списка. Посмотрим, как это у вас получится!

Сделав ошибку, вы можете вернуться к исходной версии, нажав кнопку Reset. Если застрянете, жмите кнопку Show solution, чтобы увидеть ответ.

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

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

У них есть очень интересные особенности, но подробно мы их изучать пока не будем.

Пример псевдоэлемента

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

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

Добавляем правило CSS:

/* All elements with an attribute "href", which values
   start with "http", will be added an arrow after its
   content (to indicate it's an external link) */
[href^=http]::after {
  content: '⤴';
}

получаем:

Упражнение: Причудливый параграф

В качестве следующего упражнения оформляет причудливый параграф! Все что вам нужно - это применить два имеющихся блока объявлений к первой и строке и к первой букве параграфа с помощью псевдоэлементов ::first-line и ::first-letter. В разультате первая строка параграфа будет выделена жирным шрифтом а первая буква увеличится и будет выделена фоном, как в старинных книгах.

Сделав ошибку, вы можете вернуться к исходной версии, нажав кнопку Reset. Если застрянете, жмите кнопку Show solution, чтобы увидеть ответ.

Далее

И, в завершение нашего тура по селекторам, Комбинации и группы селекторов.

Метки документа и участники

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,