Руководство по CSS3 псевдоклассам для веб-дизайнеров

псевдоклассы используются для нацеливания на элементы без добавления дополнительных классов, атрибутов или идентификатора; вот почему это называется так, Псевдо-класс, В наших предыдущих постах мы рассмотрели несколько новых CSS3 псевдоклассывключая: not,: before и: after,: first-of-type, и мы также используем псевдоклассы в некоторых наших уроках.

И в этом посте мы собираемся пройти через другой новый CSS3 псевдоклассы которые еще не были охвачены. Давайте взглянем.: П-й ребенок; nth-child используется для нацеливания элементов в определенном порядке их родителя. Эта Псевдо-класс используется вместе со следующими параметрами: число (1, 2, 3 и т. д.), ключевое слово (нечетное / четное) или уравнение (an, an + b, an-b и т. д.). В следующем примере у нас есть три абзаца внутри

div>,

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

div>
Пункт 1:Тирамису гумми несет драже faworki. Faworki faworki десерт сладкий. Суфле из порошка бисквита с лимонными каплями долива выпас.
Параграф 2:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.
Параграф 3: Овсяное пирожное, шоколадный десерт, шоколадный десерт. Карамельный шоколадный торт марципан. Бисквитный конфетный пудинг десертный брауни драже халва пончик гумми медведи.

div>

Допустим, мы хотим добавить стили ко второму абзацу, мы можем написать правила стиля следующим образом.

p: nth-child (2) {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}

Мы также можем использовать уравнение для выбора, скажем, для абзаца № 2, 4, 6 и следующих чисел в этой последовательности. Мы можем написать правило стилей таким образом.

li: nth-child (2n) {
обивка: 5px;
цвет фона: # 333;
цвет: #fff; s
поле: 10px 0;
}

Обозначение n в приведенном выше уравнении представляет порядковый номер (0, 1, 2, 3 и т. Д.). В приведенном выше примере 2 будет умножено на n, что приводит к следующим результатам:

2 (0) = 0 (ничего не выбрать)
2 (1) = 2 (выберите 2-й дочерний элемент)
2 (2) = 4 (выберите 4-й дочерний элемент)
2 (3) = 6 (выберите 6-й дочерний элемент)
… так далее

Чтобы увидеть, как это работает в другом уравнении, вы можете использовать этот инструмент, называемый N-й тестер,

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

Элемент после первого абзаца:
Пункт 1:Тирамису гумми несет драже faworki. Faworki faworki десерт сладкий. Суфле из порошка бисквита с лимонными каплями долива выпас.
<blockquote>
 Blockquote Овсяное пирожное сахарная слива тирамису желе кекс драже порошок. Пирожное с карамелью, пирог с конфетами, шоколадный торт с медвежонком.
</blockquote>

Параграф 2:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.
Параграф 3: Овсяное пирожное, шоколадный десерт, шоколадный десерт. Карамельный шоколадный торт марципан. Бисквитный конфетный пудинг десертный брауни драже халва пончик гумми медведи.
Теперь, если мы выберем второй абзац со следующим правилом стилей.
p: nth-child (2) {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
Ничего не будет применено, так как второй дочерний элемент теперь заменен на
,
: П-й последний ребенок
The: nth-last-child Псевдо-класс работает так же, как: nth-child, только теперь последовательность начинается с последнего потомка.
Итак, когда мы применяем этот стиль ниже:
p: nth-last-child (1) {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
Применяемый элемент – самый последний элемент абзаца его родителя.
Посмотрите демо ниже.
: П-й последний из типа
: nth-last-of-type работает аналогично: first-of-type, который мы обсуждали в нашем предыдущем посте.
Он выбирает указанный дочерний элемент независимо от того, когда последовательность прерывается другими типами элементов. И аналогично: nth-last-child последовательность начнется с самого последнего элемента. В приведенном ниже примере у нас есть параграф, цитата и недостаточно упорядоченный список, заключенный в
,
Пункт 1:Тирамису гумми несет драже faworki. Faworki faworki десерт сладкий. Суфле из порошка бисквита с лимонными каплями долива выпас.
<blockquote>
 Blockquote Овсяное пирожное сахарная слива тирамису желе кекс драже порошок. Пирожное с карамелью, пирог с конфетами, шоколадный торт с медвежонком.
</blockquote>

Параграф 2:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.

Параграф 3: Овсяное пирожное, шоколадный десерт, шоколадный десерт. Карамельный шоколадный торт марципан. Бисквитный конфетный пудинг десертный брауни драже халва пончик гумми медведи.

<ul>
 <li>Список 1: Сахарная вата из яблочного пирога.</li>
 <li>Список 2: Печенье Gummi носит сладкое</li>
 <li>Список 3: Мармелад "Медвежий Коготь", шоколадный батончик.</li>
 <li>Список 4: Пирог с морковным тортом, печенье марципан, кондитерские изделия, ириска.</li>
 <li>Список 5: Вафельный тирамису марципановый пирог.</li>
 <li>Список 6: Халва шоколадная плитка.</li>
 <li>Список 7: Ириска, сахарная слива.</li>
 <li>Список 8: Пирожное с карамелью</li>
</ul>
Чтобы выбрать последний второй абзац из приведенной выше структуры HTML, мы можем написать правила следующим образом.
p: nth-last-of-type (2) {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
В отличие от: nth-child или: nth-last-child, который выбирает элемент строго по их последовательности, -of-type Псевдо-класс также найдет элемент по указанному типу. Посмотрите демонстрацию по ссылке ниже, чтобы увидеть наш пример выше в действии.
Рекомендуемое чтение: Понимание выражения псевдокласса n-го ребенка
:единственный ребенок
: Only-child используется для выбора указанного элемента, который является единственным дочерним элементом его родителя. Представьте себе родителя, у которого в семье только один ребенок. Аналогично, в следующем примере у нас есть только один абзац внутри
,
Тирамису гумми несет драже faworki. Faworki faworki десерт сладкий. Суфле из порошка бисквита с лимонными каплями долива выпас.
Чтобы нацелить и добавить стили к этому абзацу, мы можем написать:
p: only-child {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
Однако, когда у нас есть больше дочерних элементов любого типа, этот псевдокласс не будет работать, так как указанный элемент больше не является единственным дочерним элементом под своим родителем.
: Только-оф-типа
: Только-оф-типа Псевдо-класс работает аналогично: only-child. Но кроме последовательности, он также найдет элемент из их типа. Тип: only-of-type нацеливается и добавляет стили. Представьте себе родителя с 3 детьми, состоящего из двух девочек и одного мальчика. Мы можем нацелить мальчика с этим Псевдо-класс, так как он единственный мальчик в своей семье.
В следующем примере у нас есть два абзаца и одна цитата.
Пункт 1:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.
Blockquote: Овсяное пирожное, шоколадный десерт, шоколадный десерт.
Параграф 2:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.
Чтобы выбрать
Элемент среди этих параграфов мы можем записать так:
blockquote: единственный в своем роде {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
Нажмите на демо ниже, чтобы увидеть его в действии.
: пустой
: пустой указанный элемент цели, которые являются пустыми. Другими словами, этот элемент не имеет содержимого или дочернего элемента, у него нет ничего, даже пробела. В следующем примере у нас есть пустой абзац внутри
,
Чтобы нацелить элемент абзаца на это условие, мы можем написать:
p: empty {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
цель
Цель Псевдо-класс используется для добавления стилей к элементам с идентификатором фрагмента. Идентификатор фрагмента – это дополнительная строка в последней части URL, которая начинается с хеша (#). Похоже на следующее http://www.domain.com/#fragmentid.
Чтобы применить стили с помощью: target, нам сначала нужно назначить уникальный идентификатор или атрибут имени для элемента следующим образом.

Пункт 1:Сладкая глазурь. Яблочный пирог аппликационный бонбонский торт датское печенье мармелад. Посыпка круассаном пирог тирамису желе пудинг.
Чтобы выбрать и применить стили, когда на этот абзац намечен идентификатор фрагмента, возможно, с чем-то вроде http://www.domain.com/#target, мы можем написать правило стилей таким образом.
p: target {
отступы: 15 пикселей;
цвет фона: # 333;
цвет: #fff;
}
Пол Андервуд В этом посте показано, как использовать это: целевой псевдокласс в реальном случае. Как создать аккордеон на основе CSS.
:включено выключено
disabled используется для нацеливания на элементы, которые не принимают ввод данных, и, наоборот: enabled используется для нацеливания на элементы, которые принимают ввод данных. В следующем примере у нас есть два типа ввода текста, один из которых назначен с отключенным атрибутом.

Затем мы хотели бы превратить отключенный цвет границы ввода в красный и зеленый для другого ввода.
вход: включен {
цвет фона: #fff;
граница: 2px solid # 79be6a;
}
вход: отключен {
цвет фона: # f3f3f3;
граница: 2px solid # c33a36;
}
Посетите демонстрационную страницу ниже, чтобы увидеть этот пример в действии.
проверено
Последний псевдокласс, который мы обсудим: проверено. Thiс псевдоклассом будет целью элемент, когда он выбран или проверен. Таким образом, это Псевдо-класс применяется только к типу радиовхода и типу флажка.
Последняя мысль
Мы многое рассмотрели в этом посте. Мы надеемся, что это будет хорошим справочным материалом для работы с псевдоклассами. Наконец, вы можете скачать демо-источник по следующей ссылке.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)