Сколько селекторов в css

Css-селекторы

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

Селекторы делятся на несколько видов:

  • по типу ( H1 , TD , HR . );
  • универсальный селектор — * — обозначает элемент любого типа;
  • селекторы атрибутов ( [data-name] , [data-name$="hidden"] );
  • селекторы по классу ( .main , .header__nav );
  • селекторы по ID ( #form , #submit );
  • псевдо-классы:
  • динамические ( :hover и т.д.);
  • селектор цели ( :target );
  • селектор по языку ( :lang(en) );
  • состояния элементов интерфейса ( :enabled , :checked . );
  • структурные псевдоклассы ( :root , :nth-child );
  • псевдокласс отрицания ( :not(P) ).

Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

Селекторы из CSS1

Самые простые и хорошо всем знакомые:

  • обращение к элементу по тегу ( BODY , A , TABLE и т.д.);
  • по ID ( #main );
  • по классу ( .header-image );
  • обращение к потомку через родителя ( UL A , .sidebar .widget );
  • состояния ссылок A:link , A:visited , A:hover ;
  • псевдоэлемент для первой строки текста — P::first-line ;
  • псевдоэлемент для первого символа в тексте — P::first-letter .

Селекторы из CSS2

В этой спецификации добавилось много интересного:

* — универсальный селектор. Например, * уберет отступы у всех элементов на странице.

E[foo] — элементы с заданым атрибутом.

выберет только абзацы, у которых есть атрибут data-content:

E[foo="bar"] — элементы, у которых атрибут имеет заданное значение.

="bar"] — элемент, который имеет атрибут со списком значений, разделенных пробелом, одно из которых равно заданному.

E[foo|="bar"] — элемент, который имеет атрибут со списком значений, разделенных дефисом, который начинается с заданного.

E:first-child — псевдокласс, обращающийся к первому элементу из нескольких внутри родителя.

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

Для выбора первого элемента из списка дочерних элементов определенного типа существует другой селектор — :first-of-type , добавленный в CSS3.

E:lang(fr) — выбирает элементы на заданном языке. Язык элемента может быть получен из HTTP-заголовков, отдаваемых сервером, из meta -тега, заданного в head , либо если у элемента задан атрибут lang

Например, этот код добавит малиновый фон всем элементам, для которых язык определен как русский:

E::before — генерируемый контент перед заданным элементом.

E::after — генерируемый контент после элемента.

E > F — выбирает элемент, только если он является прямым потомком родителя (ни во что больше не вложен).

E + F — выбирает второй заданный элемент, который следует непосредственно после первого.

Количественные CSS селекторы

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.

Динамичный контент

Респонсив дизайн обычно ассоцируется с одной переменной — пространством. Когда мы тестируем респонсив сетки, мы берем какой-то объем контента и смотрим, сколько места он займет, как это выглядит и куда он влазит, а куда нет. То есть, контент считается константой, а пространство — переменной.

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

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

В этой статье я опишу технику создания CSS, лишенного проблем с количеством (подсчётом) элементов. Достигается это за счёт специально оформленных селекторов. Я буду применять их в контесте решения классической проблемы: как разделить вёрстку элементов в горизонтальном меню сайта, когда в нём мало и много элементов. Например, как добиться того, что при 6 и более пунктах меню элементы имели стиль display: inline-block, а при меньшем количестве — display: table-cell.

Я не буду использовать шаблонизацию или js, мне даже не понадобятся прописывать классы у элементов меню. Техника использования только CSS селекторов соответствует принципу разделения интересов, согласно которому, контент (HTML) и отображение (CSS) имеют ясно обозначенные роли. Разметка — это работа CSS и, по возможности, одного только CSS.

Демо доступно на CodePen и еще будет упоминаться по ходу статьи.

Чтобы упростить понимание, я буду использовать картинки с кальмарами вместо HTML тегов. Зеленые кальмары будут за элементы, которые попадают под конкретный селектор, красные — за те, которые не попадают, а серые будут значить, что элемента не существует.

CSS не даёт явного «подсчитывающего API», но мы можем решить эту проблему в обход, комбинируя селекторы нужным образом.

Считаем до одного

Селектор :only-child срабатывает на элементах, которых всегда одна штука. По сути, это позволяет нам «применить стили ко всем дочерним элементам конкретного элемента, если суммарно их ровно 1». Это единственный простой селектор, который можно описать как «подсчитывающий» (кроме, конечно, похожего на него :only-of-type).

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

Важно понимать, что очередность строк здесь имеет ключевое значение. Кроме этого, полезно видеть этот код с точки зрения селекта «меньше-чем-два»:

Аналогично, мы теперь можем сделать селект «больше-чем-один», используя отрицание.

N элементов

Применять стили, основываясь на «больше-чем-один» и «меньше-чем-два» это ловкий трюк, но нам нужен более гибкий инструмент, позволяющий оперировать с любым числом. Мы хотим использовать селекты “больше или равно N” для любого N. Кроме этого, хочется иметь селект «ровно 745» или «суммарно ровно 6».

Для этого у нас есть селектор :nth-last-child(n), в который мы параметром передаем любое число. Он позволяет отсчитать столько-то элементов назад от конца списка. Например, :nth-last-child(6) выберет элемент, который является шестым с конца среди своих соседних элементов.

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

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

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

Если вы не знакомы с этим комбинатором, то объясняю,

li в селекте li:nth-last-child(6):first-child

li значит «любой li, который идёт после li:nth-last-child(6):first-child». В нашем случае, элементы будут иметь зеленый цвет шрифта, если их ровно 6 штук.

Больше или равно 6

Селектать фиксированное количество, будь то 6, 19 или 653 — не очень-то полезно, так как подобная необходимость очень редка. Это как в media queries — не очень удобно использовать фиксрованную ширину вместо min-width или max-width:

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

Вопрос в том, как сделать такой селектор? и это вопрос смещений.

Параметр n+6

Селектор :nth-child() может принимать параметром не только число, но и формулу “n + [число]”. Например, :nth-child(n+6) будет применён ко всем элементам, начиная с шестого.


Хоть этот селектор и является мощным инструментом сам по себе, он не позволяет оперировать с количеством. Он применится не тогда, когда у нас больше шести элементов, а просто к элементам, у которых номер больше пяти.

Чтобы обойти эту проблему, нам нужно создать такой селект, который выделит все элементы, кроме последних пяти. Используя обратный к :nth-child(n+6) селект :nth-last-child(n+6) мы сможем выделить все элементы «от с шестого с конца и до самого первого с начала».

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

Если же в списке шесть или больше элементов, нам остаётся прибавить к селекту оставшиеся пять элементов. Это легко — если элементов больше шести, то срабатывает условие nth-last-child(n+6), и комбинируя его с "

" мы сможем поселектать все нужные нам элементы.

Такая вот короткая запись и является решением нашей проблемы:

Разумеется, тут может быть любое положительное целое число, даже 653,279.

Меньше или N

Как и в предыдущем примере с :only-of-type, селектор можно использовать в обе стороны, и как «больше или равно N» и как «меньше или равно N». Какой вариант вы будете использовать? Зависит от того, какую сетку вы будете считать основной.
В случае «Меньше или N» мы берем n с минусом и добавляем условие :first-child.

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

nth-child против nth-of-type

Заметьте, что в предыдущих примерах я использовал :nth-child() и :nth-last-child(), а не :nth-of-type() с :nth-last-of-type(). Так как я селектал теги <li> и правильными потомками <ul> могут быть только они, :last-child() и :last-of-type() оказываются одинаково результативны.

Обе группы селектов :nth-child() и :nth-of-type() имеют свои преимущества, исходя из того, чего вы хотите добиться. Так как :nth-child() не привязан к конкретному тегу, описанную выше технику можно применять к смешанным дочерним элементам:

(Обратите внимание, чтобы не привязываться к тегам, я использую универсальный селектор. :last-child(n+3)

*. В этом случае, он обозначает «любой элемент любого тега, следующий за :last-child(n+3).»

С другой стороны, преимущество :nth-last-of-type() в том, что вы можете селектать элементы с одним тегом среди множества других соседних. Например, можно посчитать количество тегов <p>, несмотря на то, что они в одной куче с <div> и <blockquote>.

Поддержка браузерами

Все используемые в статье селекторы CSS2.1 и CSS3 поддерживаются в Internet Explorer 9 и выше, а так же все современные мобильные и десктопные браузеры.

Internet Explorer 8 неплохо поддерживает большинство селектов, но задуматься о полифилле на js не помешает. В качестве альтернативы, можно расставить специальные классы для старых версий IE и приписать их к своим селекторам. В случае с навигационным меню, код будет выглядеть примерно так:

В реальном мире

Предположим, наше навигационное меню принадлежит сайту с CMS. В зависимости от того, кто его наполняет и использует, в меню будет разное количество элементов. Кто-то старается не усложнять и ему хватает «Home» и «About», а кто-то хочет запихать в меню всё, что есть у него на сайте.

Создавая стили, учитывающие разные сетки для разного количества элементов в меню, мы делаем вёрстку более стройной и подходящей для самых разных форматов — какой бы ни был контент, у нас всё учтено.

Поздравляю, теперь в вашем CSS арсенале есть умение оперировать количеством элементов.

Контент-независимый дизайн

Респонсив дизайн решает одну важную проблему: он позволяет комфортно расположить один и тот же контент на множестве разных устройств. Было бы неприемлемо видеть разный контент только потому, что у тебя экран неправильного размера. Так же и неприемлемо диктовать дизайнеру, под сколько пунктов меню должен быть заточен сайт. «Не рисуй так, у нас вся сетка поедет, если будет столько элементов».

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

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

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

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

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

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

Создание CSS правил в 2 словах

Каскадная таблица стилей представляет собой набор CSS правил, каждое из которых призвано форматировать определенный элемент веб-страницы. Само правило состоит из 2 частей:

  1. Селектор
  2. Блок объявлений

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

  1. Свойство
  2. Значение

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

Селектор тегов

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

Если мы захотим принять шрифт Verdana для заголовков первого уровня, будет справедлива следующая запись:

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

Групповой вид селекторов

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

Групповой вид селекторов очень удобен и способен значительно сократить объем css файла. Как уже было сказано до этого, достаточно перечислить форматируемые теги через запятую.

Универсальный селектор

А что делать если нужно придать одни и те же значения для всех элементов веб-страницы? Перечислить все теги через запятую? Вовсе не обязательно, вместо перечислений всех тегов стоит просто указать ‘*’. Да, именно звездочку, при помощи которой выделяются все элементы веб-страницы.

Селектор классов

Как видно из названия, при помощи этого вида селекторов мы выбираем элементы по определенным классам. При необходимости в форматировании блочных элементов с классом ‘container’ используется следующая запись:

Достаточно прописать точку и название класса. Хочется отметить что все элементы, вложенные в блочный элемент с классом ‘container’ также будут отформатированы.

Селектор идентификаторов

Здесь та же история как и с классами. Разница лишь в том что вместо точки мы прописываем — ‘#’. Для форматирования абзаца с id ‘unique’ необходима следующая запись:

Древовидная форма HTML

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

Для решения этой проблемы будет нелишним освежить память и вспомнить отношения тегов между собой в HTML.

древовидная форма HTML картинка

древовидная форма HTML

Как видно из иллюстрации выше, тег body является предком для всех остальных тегов. Вложенный в него тег div является его дочерним элементом, сам будучи родителем тегов h2, p и предком тега a. А маркированный список первого уровня имеет 3 дочерних (li, ul) и 2 потомственных элемента (li).

Все вышеперечисленные теги вписываются в три вида отношений:

  1. предок — потомок
  2. родитель — дочерний элемент
  3. сестринские элементы (теги одного уровня с общим родителем)

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

Селектор потомков

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

Вначале мы указываем предка, затем через пробел — потомственный элемент. Запись выше означает: ‘Отобразите синим цветом все абзацы находящиеся внутри тега div’. Для форматирования всех ссылок внутри абзаца мы пишем следующее:

Запись выше означает: ‘Отобразите красным цветом все ссылки, находящиеся внутри абзацев’. Как видите — все очень просто.

Дочерние селекторы

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

Все бы хорошо, но это порождает определенные проблемы. ‘Какие именно?’ — спросите вы. Ну, хотя бы то что в случае придания определенных свойств ‘предку’ они унаследуются потомственными элементами. Чтобы мы могли точечно выбирать элементы для форматирования, были придуманы некоторые виды селекторов, в том числе и дочерний.

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

Запись выше означает: ‘Отобразить шрифтом Arial все абзацы, являющиеся дочерними блоку с классом info’. Если же нам нужно выделить дочерние пункты маркированного списка, аналогично пишем следующее:

Запись выше означает: ‘Перекрасить все дочерние пункты маркированного списка в синий цвет’. Такое правило CSS вполне может пригодиться, ведь внутри одного списка вполне может располагаться другой.

В некоторых случаях может возникнуть необходимость выделения не всех дочерних элементов, а только некоторых. Для управления первым дочерним элементов необходимо воспользоваться псевдоэлемнтом :first-child

Правило выше означает: ‘Отобразить первый дочерний элемент класса ‘wrapper’ шрифтом Tahoma’.

Псевдоэлемент :last-child помогает управлять последним дочерним элементом:

У нас также есть возможность выбирать любой по счету дочерний элемент при помощи псевдоэлемента :nth-child

Запись выше означает: ‘Выделить все чётные дочерние элементы класса ‘wrapper’ розовым цветом’. Для выделения нечетных элементов even нужно заменить на odd.

Для выделения каждого 5 элемента необходимо добавить 5n. Если же стоит выделить каждый 4-й элемент начиная с шестого необходимо в скобках указать — 4n+6. Значения в скобках можно менять по-своему усмотрению:

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

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

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

a:link Отвечает за внешний вид ссылки в спокойном состоянии a:hover Отвечает за внешний вид ссылки в момент наведения на неё курсором мыши a:active Отвечает за внешний вид ссылки в момент нажатия на неё a:visited Отвечает за внешний вид уже посещенной ссылки

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

Запись выше означает: ‘Выделить синим цветом ссылки в обычном состоянии. Отображать их оранжевым цветом в момент наведения по ним. Отображать ссылки красного цвета в момент нажатия. Выделить серым цветом уже посещенные ссылки.’

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

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

Запись выше означает: ‘Выделить все изображения рамкой серого цвета в момент наведения по ним.’ Таким же образом можно настраивать любые другие элементы в момент проведения по ним курсором.

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

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

Запись выше означает: ‘Добавить слово ‘Внимание!’ перед абзацами с классом attention’. Для добавления в конце элемента мы пишем:

Псевдоэлемент :focus помогает управлять внешним видом полей для ввода:

Запись выше означает — ‘Окрасить фон полей для ввода в синий цвет и использовать курсивное начертание шрифта в момент набора текста’.

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

Правило выше означает: ‘Отображать фон черным, а цвет шрифта белым в момент выделения текста’. Этот селектор незнаком для браузера Firefox, и для решения этой задачи необходимо перед правилом добавить следующее:

Дочерние элементы по типу

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

Например, мы можем выделить первый дочерний нумерованный список блока с классом container:

Плюс ко всему мы имеем в распоряжении псевдоэлементы :last-of-type и :nth-of-type, которые имитируют :last-child и :nth-child соответственно.

В примере выше мы выделили последний дочерний заголовок второго уровня относящийся к блоку с идентификатором main.

Селектор смежных элементов

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

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

(тильда). При помощи неё будут отформатированы все маркированные списки после заголовка h1:

Селектор атрибутов

Используя этот вид селектора можно форматировать элементы выбрав их по атрибуту. Для управления всеми внешними ссылками нужно указать следующее:

Запись href^="http://" означает что необходимо выделить все ссылки, начинающиеся на http://. Такие css правила имеют место быть, потому что абсолютные адреса в основном используются для внешних ссылок.

У нас есть возможность выделять ссылки на изображения, видео, книги и прочее. Например, для управления ссылками ведущими на pdf книги можно создать следующее правило:

Знак доллара помогает выбрать только те ссылки, которые оканчиваются на ‘.pdf’. В "http://.pdf" вместо ссылки на книгу можно использовать .jpeg, .png, .mov, .mp4 и так далее.

У вас может возникнуть ситуация, когда нужно выделить те изображения, которые содержат в своем названии определенное слово. Возьмем к примеру интернет-магазин, где нужно сделать рамку для изображений футбольных бутс. С большой долей вероятности их названия содержат в себе слово boots. В таком случае создаем ccs правило:

Знак звездочки помогает выбрать те изображения, которые в своем названии содержат слово boots.

Для выделения всех изображений, находящихся в блоке с классом relative мы создаем следующее css правило:

Псевдокласс отрицания

Если вам когда-нибудь приходилось иметь дело с движком WordPress, вы должны знать что в ней все ссылки имеют абсолютный вид. Как мы рассматривали выше, при необходимости выделить внешние ссылки можно использовать селектор по атрибуту, те которые начинаются на http://. Как вы понимаете, такой вариант решения вопроса с движком WordPress не прокатит. Но у нас в арсенале есть гениальный псевдокласс отрицания, который мы можем задействовать:

Правило выше означает: ‘Выделить коричневым цветом все ссылки, начинающиеся на http:// кроме тех, которые начинаются на http://mysite.com’. Псевдокласс отрицания можно использовать не только с селекторами атрибутов, но и с другими простыми селекторами.

Стоит знать что для каждого селектора можно использовать только один псевдокласс отрицания. Следующая запись будет неверной — .container:not(#info):not(h3)

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

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

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

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