Псевдоселекторы CSS

Псевдоселекторы CSS

Помимо обычных селекторов классов, есть также селекторы псевдоклассов..

Псевдоклассы — это не классы, описанные в структуре HTML нашей страницы. Это состояния элементов, которые зависят от чего-то еще. Селекторы, которые их используют, начинаются не с одной, а с двух точек (не двух последовательных точек, а просто двоеточия).

: hover

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

а {цвет: # 00F; } a: hover {цвет: # F00; текстовое оформление: нет; }

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

: focus

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

a: hover, a: focus {украшение текста: нет; }

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

: активный

Псевдокласс: active применяется к ссылкам, когда по ним щелкают в данный момент, но до того, как браузер загрузит новую страницу. Может быть более распространенное приложение для ссылок, ведущих на внутреннюю часть той же страницы (их атрибут href начинается с "#").

Ссылки также имеют другие псевдоклассы, такие как: link и: loaded, которые указывают состояния ссылки, которая еще не была посещена, соответственно, а также ссылки, по которой уже переходили. В результатах Google вы заметите, что когда вы уже просматривали страницу, она становится фиолетовой, а не синей..

: lang

Класс псевдоязыка элемента: lang (код), где вам нужно заменить «код» кодом реального языка, который присутствует в атрибуте language = «» элемента HTML. Он эквивалентен селектору атрибута [lang = "code"], но все же отличается :).

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

Помимо селекторов для псевдоклассов, есть также селекторы для псевдоэлементов, которые снова объявляются с двоеточием..

: первое письмо

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

Читать также:  Массивы в PHP (часть 3) ассоциативные массивы

: первая строка

Например: first-letter, также есть: first-line, который относится к первой строке.

: Первый ребенок

Как мы начали с «первых» псевдоселекторов — упомянуть: first-child. Этот псевдокласс (да, мы немного вернемся к псевдоклассам, пока только псевдоэлементы) применяется к элементу только в том случае, если это первый дочерний элемент для своего родителя. Используя следующий код, мы можем создать в списке разделительную линию только между элементами, составляющими его, а не только над каждым из них:

ul li {border-top: 1px solid # 000; } ул ли: первый ребенок {граница-верх: нет; }

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

Например: first-child, есть также: last-child.

: до и после

Вернемся к псевдоэлементам. Мы можем использовать селекторы: before и: after для добавления содержимого с помощью CSS до или после элемента..

Это немного спорно здесь, в какой степени это необходимо. В уроках HTML мы говорили, что там содержится структура и информация с сайта. Однако сейчас мы говорим о добавлении контента через CSS. И это даже не заметят поисковые системы. Во многих случаях возникает соблазн использовать:

.обязательно: после {content: ‘Это поле обязательно для заполнения’; }

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

.обязательно: после {content: ‘*’; }

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

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

.обязательно: после {content: ‘*’; цвет: # F00; font-weight: жирный; }

Красный цвет и полужирный шрифт будут применяться только к добавленному содержимому, а не к фактическому тексту, содержащемуся в требуемом элементе класса..

Существует множество приложений: before и: after, но многие из них относительно сложны и не попадают в столбец «первые шаги». Поэтому мы рассмотрим их в более продвинутом руководстве. Вы также можете сами поискать в Интернете — в конце я лишь привожу здесь некоторую основу.

Читать также:  Что такое параллакс

Некоторые псевдоселекторы CSS3

Во-первых, давайте проясним, что до сих пор я представлял вам CSS версии 2. Поскольку мы говорили о HTML4 и HTML5, существуют CSS2 и CSS3. Связь между аналогиями еще больше, поскольку CSS2 разрабатывался параллельно с HTML4 и появился одновременно. HTML5 и CSS3 разрабатываются прямо сейчас, и их поддержка в разных браузерах, похоже, идет параллельно. Хотя проводить такие сравнения сложно..

: first-of-type и: last-of-type

Псевдоклассы: first-of-type и: last-of-type охватывают первый и последний элемент данного типа. Подобно: first-child и: last-child, но вы заметите разницу в следующем html-коде:

div class = "article">
h2> Название / h2>
Первый параграф
Второй абзац
/ div>

В этом случае: first-child не поймает первый абзац, потому что перед ним стоит заголовок, который на самом деле является первым дочерним элементом. Но: first-of-type отлично подходит для нас, если мы хотим выделить этот первый абзац..

: nth-

: nth-of-type (xn + y) — мой любимый псевдокласс, обладающий невероятной мощностью. Здесь тоже есть определенное количество математики (успокойтесь — только линейные уравнения).

Сначала давайте объясним значение этого селектора. Он покрывает каждый n-й элемент данного типа.

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

Однако реальная сила приходит тогда, когда мы заменяем каждую треть на единицу. То есть первая, четвертая, седьмая и т. Д. Для большей ясности давайте рассмотрим несколько примеров и объясним особенности каждого из них:

Постоянный

: nth-of-type (2)

Это просто выбирает второй элемент. Только он и больше ничего. Если бы вместо 2 мы написали 3 — это было бы третье. Однако в следующем примере:

Коэффициент

: nth-of-type (2n)

Уже выбирает каждый второй элемент (второй, четвертый, шестой и т. Д.). Стиль применяется к элементам, номер в строке которых соответствует условию 2n для некоторого значения натурального n или 0 (0, 1, 2, 3 ().

Для тех, кого это смущает (пожалуйста, пожалуйста — только блондинки имеют право усложнять для них это!), Селектор поддерживает вместо 2n писать просто ровно. Точно так же мы можем использовать odd для odd:

tr: nth-of-type (четный) {background-color: # 333; } tr: n-й тип (нечетный) {цвет фона: # 000; }

Читать также:  Глубокие ссылки Часть 2

В этом стиле мы применяем темно-серый фон к четным строкам таблицы и черный фон к нечетным строкам..

Коэффициент + константа

То же произведение, что и нечетное, можно выразить следующим образом:

: nth-of-type (2n + 1) {цвет фона: # 000; }

Что ж, вот этот 2n + 1 может усложнить не только блондинкам, но все же несложно! В этом случае мы достигаем того, что мы выбираем каждый второй элемент (каждый четный) с 2n, а затем сдвигаем выделение на 1 (благодаря этому +1).

Таким образом из всех четных становилось все нечетным. Мы также можем написать 2n + 2, но это будет иметь другой эффект, который мы укажем позже..

Хотя 2n и 2n + 1 можно легко заменить четным и нечетным, чтобы элементы чередовали три цвета, мы должны использовать следующее:

tr: nth-of-type (3n) {цвет фона: #FFF; } tr: nth-of-type (3n + 1) {цвет фона: # 090; } tr: nth-of-type (3n + 2) {цвет фона: # F00; }

Вот так мы сделали наш триколор — чередуем белый, зеленый и красный (потом снова с начала).

Таким образом вы можете сделать столько цветов, сколько захотите..

Пропускать

По-настоящему интересное начинается, когда мы пишем что-то вроде:

: n-й тип (2n + 4) {цвет: # F00; }

для аналогичного, о котором мы упоминали ранее.

Я упоминал, что n натуральное число или 0 — верно? Натуральные числа — это целые положительные числа. Мы сказали, что добавляем ноль (для большего интереса).

Таким образом, получается, что наше условие распространяется на элементы, начинающиеся только с номера 4 (в случае n = 0) и продолжающиеся каждую секунду после этого.

Отрицательный коэффициент

: nth-of-type (-n + 3) {цвет: # F00; }

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

Когда мы ставим знак минус перед n, оказывается, что значения затем меняются в порядке 0, -1, -2 и т. Д. Когда мы добавляем 3 к этим числам в качестве окончательного результата условия, мы получаем элементы с порядковыми номерами 3, 2 или 1, потому что номера наших элементов также являются натуральными числами. В конце концов, у нас есть только целые элементы, а положительные, если они равны 0 — у нас просто нет элементов, а отрицательные элементы получить на практике не получится..

Дополнительные чтения:

Для получения дополнительной информации (и списков всех псевдоклассов и псевдоэлементов) вы также можете просмотреть следующие страницы:

  • CSS Псевдоклассы (английский)
  • Псевдоклассы (болгарский)
  • Псевдоэлементы (английский)
Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?