Последний элемент css

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

/* Selects every fourth element  among any group of siblings,  counting backwards from the last one */ :nth-last-child(4n) {  color: lime; }

Syntax

The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

Keyword values

odd
Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.
even
Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

Functional notation

<An+B>
Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element, counting from the end, is 1. The values A and B must both be <integer>s.

Formal syntax

:nth-last-child( <nth> [ of <complex-selector-list> ]? )

where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Examples

Example selectors

tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.
tr:nth-last-child(even) or tr:nth-last-child(2n)
Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.
:nth-last-child(7)
Represents the seventh element, counting from the end.
:nth-last-child(5n)
Represents elements 5, 10, 15, etc., counting from the end.
:nth-last-child(3n+4)
Represents elements 4, 7, 10, 13, etc., counting from the end.
:nth-last-child(-n+3)
Represents the last three elements among a group of siblings.
p:nth-last-child(n) or p:nth-last-child(n+1)
Represents every <p> element among a group of siblings. This is the same as a simple p selector. (Since n starts at zero, while the last element begins at one, n and n+1 will both select the same elements.)
p:nth-last-child(1) or p:nth-last-child(0n+1)
Represents every <p> that is the first element among a group of siblings, counting from the end. This is the same as the :last-child selector.

Table example

HTML

<table>  <tbody>  <tr>  <td>First line</td>  </tr>  <tr>  <td>Second line</td>  </tr>  <tr>  <td>Third line</td>  </tr>  <tr>  <td>Fourth line</td>  </tr>  <tr>  <td>Fifth line</td>  </tr>  </tbody> </table> 

CSS

table {  border: 1px solid blue; }  /* Selects the last three elements */ tr:nth-last-child(-n+3) {  background-color: pink; }  /* Selects every element starting from the second to last item */ tr:nth-last-child(n+2) {   color: blue; }  /* Select only the last second element */ tr:nth-last-child(2) {   font-weight: 600; } 

Result

Quantity query

A quantity query styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the nth-last-child pseudo-class and the general sibling combinator.

HTML

<h4>A list of four items (styled):</h4> <ol>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li> </ol>  <h4>A list of two items (unstyled):</h4> <ol>  <li>One</li>  <li>Two</li> </ol>

CSS

/* If there are at least three list items,  style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li {  color: red; }

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ‘:nth-last-child’ in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ‘:nth-last-child’ in that specification.
Recommendation Initial definition.

developer.mozilla.org

CSS псевдоклассы: стилизация элементов по индексам

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

:first-child и :last-child

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

Рассмотрим HTML и CSS ниже:

На скриншоте ниже показан результат.

CSS псевдоклассы: стилизация элементов по индексам

Заголовок h2 и первый li окрасились в розовый, так как :first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что :last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.

Если добавить к :first-child и :last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените :first-child на li:first-child и :last-child на li:last-child. На скриншоте ниже показан результат.

CSS псевдоклассы: стилизация элементов по индексам

:nth-child() и :nth-last-child()

Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы :nth-child() и :nth-last-child().

Как и :not, :nth-child() и :nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:

Последний аргумент немного сложнее остальных. Разберем его чуть позже.

Чем отличаются :nth-child() и :nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а :nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.

С помощью псевдоклассов :nth-child() и :nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:

CSS псевдоклассы: стилизация элементов по индексам

Если переключиться с :nth-child на :nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.

CSS псевдоклассы: стилизация элементов по индексам

С помощью :nth-child() и :nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:

Результат.

CSS псевдоклассы: стилизация элементов по индексам

А если нужно выбрать каждый третий элемент? Тут нам поможет синтаксис Аn+В:

Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.

CSS псевдоклассы: стилизация элементов по индексам

Здесь уже все немного интереснее. С помощью :nth-child() и :nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:

Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Замечание: отрицательное смещение

Отрицательные значения и диапазоны также валидны. Запись типа :nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.

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

Результат.

CSS псевдоклассы: стилизация элементов по индексам

only-child

Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:

Селектор li:only-child{color: #9c27b0;} выберет <li>Apple</li>, так как это единственный дочерний элемент первого списка. Элементы второго списка в выборку не попадают, так как там три смежных элемента. Результат показан ниже.

CSS псевдоклассы: стилизация элементов по индексам

:empty

С помощью псевдокласса :empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс :empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку :empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть <p></p> попадает в выборку, а <p> </p> нет.

Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью :empty и :not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).

Выбор элементов определенного типа по их индексу

Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.

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

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

Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.

Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Использование first-of-type, last-of-type и only-type

С помощью :first-of-type можно выбрать первый элемент, подпадающий под селектор. Давайте изменим цвет первого p на зеленый:

Такая запись выберет все теги p, являющиеся первым дочерним элементом в родительском блоке. Смотрите скриншот ниже.

CSS псевдоклассы: стилизация элементов по индексам

Псевдокласс :last-of-type работает схожим образом. Выбирается последний элемент в родительском блоке. Посмотреть результат можно ниже. А only-of-type выберет элемент только, если он является единственным дочерним элементом такого типа внутри родительского блока. Показано ниже.

CSS псевдоклассы: стилизация элементов по индексам

CSS псевдоклассы: стилизация элементов по индексам

Разберем еще один пример использования :first-of-type, на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter, о котором мы рассказывали ранее в этой главе? Как вы помните, с его помощью создавалась первая заглавная буква для всех элементов, к которым он применялся. А что если мы ограничим его действие только на первый параграф:

На скриншоте ниже показано, что теперь только у первого параграфа заглавная буква, несмотря на наличие заголовка перед параграфом.

CSS псевдоклассы: стилизация элементов по индексам

webformyself.com

Еще в версии CSS 2.1 был селектор, соответствующий первому элементу списка: li:first-child.

Однако в CSS3 появился селектор, который соответствует последнему элементу списка Li:last-child.

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

Откорректируем навигацию сайта And the winner isn’t., задействовав эти селекторы в сочетании со свойством display: table. На рисунке 5.7 показано, как все выглядит на текущий момент.

Теперь взглянем на графический макет (рисунок 5.8).

Ссылки на навигационной панели растянуты на всю ширину дизайна, и нам необходимо это воспроизвести. Наша разметка для навигационной области выглядит так:

<nav role="navigation">

<ul>

<li><a href="#">Why?</a></li>

<li><a href="#">Synopsis</a></li>

<li><a href="#">Stills/Photos</a></li>

<li><a href="#">Videos/clips</a></li>

<li><a href="#">Quotes</a></li>

<li><a href="#">Quiz</a></li>

</ul>

</nav>

Последний элемент css

Страница сайта And the winner isn’t. с обычной навигацией.

Сначала мы сделаем так, чтобы элемент nav отображался как таблица:

Nav { display: table;

/* еще код… */

}

Затем мы обеспечим отображение <ul> в виде строки таблицы:

Nav ul { display: table-row;

/* еще код… */

}

И наконец, сделаем так, чтобы элементы списка отображались как ячейки таблицы:

Nav ul li { display: table-cell;

/* еще код… */

}

Последний элемент css

Рисунок 5.8. Макет страницы, к которому мы стремимся

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

Nav ul li:last-child { text-align: right;

}

Nav ul li:first-child { text-align: left;

}

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

НЕ БЕСПОКОИТЕСЬ, ВСЕ ЭТИ ТАБЛИЦЫ ИСПОЛЬЗУЮТСЯ ТОЛЬКО ДЛЯ ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ!

Вы, возможно, задаетесь вопросом: «О чем же я, в конце концов, думаю?», решив, что мы используем таблицы для навигационного макета. Однако не стоит забывать, что все эти.

Таблицы предназначены только для визуального представления. Это означает, что они существуют лишь в CSS и не имеют отношения к разметке. Мы просто сообщаем браузеру, что желаем, чтобы соответствующие элементы отображались и вели себя так, как если бы они были таблицами, а не чтобы они на самом деле были ими. Отображение элементов разметки в такой манере также не помешает нам задействовать иной тип макета для областей просмотра с другой шириной, например display: inline-block для областей просмотра шириной менее 768 пикселов.

Последний элемент css

Теперь строка навигации растянута на ширину страницы.

html5ru.com

Использование псевдокласса CSS :nth-child для выбора единственного элемента 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

 

Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти 

Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов 

Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента 

Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

Использование псевдокласса CSS :nth-child для выбора только нечетных элементов 

Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Использование псевдокласса CSS :nth-child для выбора только четных элементов 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

Использование псевдокласса CSS :first-child для выбора первого элемента 

Другой псевдокласс :first-child выберет первый элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Использование псевдокласса CSS :last-child для выбора последнего элемента 

Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента 

Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Ознакомьтесь с возможностями псевдокласса :nth-child  с помощью «Конструктора nth-child».

www.dejurka.ru

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>nth-last-child</title>  <style>  table {   width: 100%; /* Ширина таблицы */  border-collapse: collapse; /* Убираем двойные границы */  border-spacing: 0; /* Расстояние между ячейками */  }  td {  border: 1px solid #333; /* Параметры рамки */  padding: 3px; /* Поля в ячейках */  border-left: 3px double #333; /* Граница слева */   }  td:nth-last-child(2n+1) {  background: #f0f0f0; /* Цвет фона */  }  td:nth-child(1) {  border: 1px solid #333; /* Параметры рамки */  background: #cfc; /* Цвет фона */  }  </style>  </head>  <body>  <table>  <tr>   <td>&nbsp;</td><td>2134</td><td>2135</td>  <td>2136</td><td>2137</td><td>2138</td>  </tr>  <tr>   <td>Нефть</td><td>16</td><td>34</td>  <td>62</td><td>74</td><td>57</td>  </tr>  <tr>  <td>Золото</td><td>4</td><td>69</td>  <td>72</td><td>56</td><td>47</td>  </tr>  <tr>  <td>Дерево</td><td>7</td><td>73</td>  <td>79</td><td>34</td><td>86</td>  </tr>  <tr>  <td>Камни</td><td>23</td><td>34</td>  <td>88</td><td>53</td><td>103</td>  </tr>  </table>   </body> </html>

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Применение псевдокласса :nth-last-child к колонкам таблицы

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

webref.ru

В действии

Найдем последнего парня на деревне (последний элемент с классом man, находящийся внутри элемента village):

Пример 2

Найдем и выделим последний p-элемент и пометим его синей звездочкой. Кроме того, найдем все элементы p, которые лежат последними внутри своих родителей и выделим их красной рамкой:

jquery.page2page.ru

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

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

li:last-child{  padding-bottom: 0;  }  

Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 для обращения к псевдоэлементам ::backdrop, ::before, ::after. Они отличаются тем, что добавляют стили объектам, которых нет в дереве DOM. Например, заглавная буква или первая строка.

p::before{  content: '';  display: block;  width: 100%;  color: #222;  }  

Все тридцать селекторов мы разбирать не будем, возьмем только те, что означают в CSS последний элемент (:last-child), первый (:first-child). А также рассмотрим специальный псевдокласс (:nth-child), который позволяет обращаться к дочерним элементам по порядковому номеру. Учиться будем на примере создания панели навигации по сайту:

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);    		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  		}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

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

nav a:first-child{  			color: green;  		}  nav a:last-child{  			color: red;  		}

Универсальный селектор :nth-child

Этот селектор относится к числу структурных псевдоклассов. С его помощью можно управлять объектами по их нумерации. Порядковое число указывается в скобках и начинается с единицы. Если нужен последний элемент в CSS, для этого используется запись:

/*добавит последнему элементу справа границу красного цвета*/  nav a:nth-child(-1){  border-right: 1px solid red;  }

Помимо целочисельных значений :nth-child принимает в качестве значений ключевые слова:

  • odd — нечетные элементы;
  • even — четные.

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

nav a:nth-child(even){  	border-bottom: 1px solid yellow;  }

Комбинированное использование псевдоклассов

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

nav a:not(:last-child){  padding-right: 10px;  }

Дословно запись выше указывает браузеру добавить ко всем ссылкам <a> внутри навигации <nav> отступ справа, за исключением последнего элемента. CSS селектор :not означает «все кроме». В скобках указываются имена классов, идентификаторов, псевдо-элементов и названия тегов.

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

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);  			overflow: hidden;  		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  			transition: all .5s ease-in-out;  		}  		nav a:not(:last-child){  			padding-right: 2em;  		}    	nav a:hover{  		border-bottom: 1px solid#D349CE;  		transform: scale(1.03);  		opacity: .8;  	}  	nav a:nth-child(2):hover{  		border-color: #46C5CD;  	}  	nav a:nth-child(3):hover{  		border-color: #3EDC79;  	}  	nav a:nth-child(-1):hover{  		border-color: #f69;  	}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

С помощью селектора nav a:hover, мы сделали так, чтобы внешний вид ссылок каждый раз менялся при наведении курсора. Так пользователю будет намного проще и интересней взаимодействовать с сайтом. Обратите внимание на запись nav a:nth-child(n). Благодаря ей у каждого пункта меню свой цвет подчеркивания в состоянии :hover.

Можно пойти дальше и добавить :focus и :active для элементов <a>, которые будут менять поведение ссылок во время нажатия. Или окрасить их в другой цвет и увеличить размер шрифта в активном состоянии. С помощью CSS-селекторов оживают даже статичные HTML-страницы и без намека на JavaScript.

fb.ru

You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.