Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .
Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу
Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.
(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.
Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.
/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым
встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .
Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу
. Но если не брать во внимание элементы других типов, то получается, что тег
С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.
Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.
Последнее правило – h3:only-of-type – применяется к содержимому тега
, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег является единственным
дочерним элементом своего типа. Если в HTML-код добавить еще один тег , стиль не будет применён.
Выводы
Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.
С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.
Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.
Дочерние элементы - это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.
Давайте рассмотрим пример простого html-кода:
Дочерние элементы.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
В этом коде два абзаца. Внутри абзацев расположены строчные элементы
,
и
. Во втором абзаце тег
вложен в тег
.
Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.
Синтаксис дочерних селекторов:
Селектор 1 > Селектор 2 { Свойство: значение; }
Вот обновлённый код:
Дочерние элементы.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Итак, вспомним: дочерний элемент - это элемент вложенный непосредственно в родительский. То есть, дочерний элемент - это потомок первого уровня. Давайте обратим внимание на тег
, в первом абзаце он вложен в тег
А во втором он вложен в тег
, хотя также является потомком тега
Поэтому во втором абзаце CSS правило для дочернего селектора p>i
{ color
: blue
; } не сработает - наклонный текст второго абзаца не будет отображён синим цветом.
Рисунок 1. Работа примера №1.
Добраться к html-элементу
второго абзаца можно используя CSS-правило: p>u>i
{ color
: blue
; }.
Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.
Дочерние элементы.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.
Рисунок 2. Работа примера №2.
Более сложный пример
У нас есть html-код:
Дочерние элементы.
По умолчанию он интерпритируется так:
Задача: при помощи CSS превратить этот список в горизонтальное меню.
Рисунок 3. Цель преобразований.
Вот решение этой задачи с использованием дочерних селекторов:
Дочерние элементы.
Для лучшего понимания этого примера читайте.
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)
Комбинаторы
— это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс
(+) или соседний селектор
. Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2
, но только в том случае если он является соседним для селектора 1
и идет сразу после него. Рассмотрим пример:
strong + i {
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег
, т.к. он следует сразу же после тега
.
Комбинатор тильда
(~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2
, который должен следовать за селектором 1
. Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег
, несмотря на то, что во втором случае между тегом
и
стоит тег
.
Комбинатор >
относится к дочерним селекторам
. Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль
будет привязан к селектору 2
, который непосредственно вложен в селектор 1
.
div > strong {
}
...
Это обычный текст.
Это жирный курсивный текст .
Это обычный текст. А это обычный жирный текст.
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег
, который непосредственно вложен в тег
. А непосредственным родителем второго тега
является тег
, поэтому правило на него не действует.
Следующим рассмотрим контекстный селектор <пробел>
. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:
<селектор 1> <селектор 2> { <стиль> }
Стиль будет применен к селектору 2
, если он так или иначе вложен в селектор 1
.
Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:
div strong {
font-style: italic /* Курсив */
}
...
Это обычный текст.
Это жирный курсивный текст .
Это обычный текст. А это тоже курсивный жирный текст.
Обычный текст и просто жирный текст
Результат:
Как видим, на этот раз правило подействовало на оба тега
, даже на тот, который вложен и в контейнер
и в абзац
. На тег
, который просто вложен в абзац
правило css никак не действует.
Селекторы по атрибутам тега
Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов.
1. Простой селектор атрибута
Имеет вид:
<селектор>[<имя атрибута тега>] { <стиль> }
И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:
strong{
color:red;
}
...
Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Результат:
На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong
, к которому добавлен атрибут title
.
2. Селектор атрибута со значением
Синтаксис этого селектора следующий:
<селектор>[<имя атрибута тега>=<значение>] { <стиль> }
Привязывает стиль
к элементам, теги которых имеют атрибут с указанным именем
и значением
. Пример:
a{
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне
Результат:
Как видим, оба элемента типа гиперссылка имеют атрибут target
, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу
у которого атрибут target
имеет значение «_blank»
.
3. Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:
[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:
{
color:red;
font-size:150%;
}
...
Наш телефон: 777-77-77
Наш адрес: Москва ул. Советская 5
Получиться следующий результат:
Правило применяется к элементу, у которого среди значений атрибута class
имеется значение tel
.
4. Дефис в значении атрибута
В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:
[атрибут|="значение"] { стиль }
Селектор[атрибут|="значение"] { стиль }
Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:
{
color:red;
font-size:150%;
}
...
Результат:
В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „
.
5. Значение атрибута начинается с определенного текста
Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта:
[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
В первом случае стиль
применяется ко всем элементам, теги которых имеют атрибут с указанным именем
и значением, начинающимся с указанной подстроки
. Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе
. Пример:
a{
color:green;
font-weight:bold;
}
...
Результат:
В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href
начинается со значения http://
.
6. Значение атрибута заканчивается определенным текстом
Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:
[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
В первом случае стиль
применяется ко всем элементам, у которых имеется атрибут
с указанным именем
и имеет значение оканчивающееся указанной подстрокой
. Во втором случае тоже самое, только к указанным селекторам
. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:
IMG {
border: 5px solid red;
}
...
Картинка формата gif
Картинка формата png
Результат:
В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.
7. Значение атрибута содержит указанную строку
Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:
[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
Стиль
привязывается к элементам, у которых имеется атрибут
с указанным именем и его значение содержит указанную подстроку
. Например:
IMG {
border: 5px solid red;
}
...
Картинка из папки gallery
Картинка из другой папки
Результат:
В примере стиль применяется к картинкам, которые загружены из папки «gallery»
.
На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:
Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль }
Кроме того напомню о специальных селекторах CSS:
- с помощью символов «+» и «~» формируются ;
- символ «>» привязывает css стили к дочерним
тегам;
- символ <пробел> формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.
Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
В данном примере применяется несколько контейнеров, которые в коде располагаются
один в другом. Нагляднее это видно на дереве элементов, так называется структура
отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия.
Здесь дочерним элементом по отношению к тегу
выступает тег
Вместе с тем тег
не является дочерним для тега
, поскольку
он расположен в контейнере
Вернёмся теперь к селекторам. Дочерним селектором считается такой, который
в дереве элементов находится прямо внутри родительского элемента. Синтаксис
применения таких селекторов следующий.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является
дочерним для Селектора 1.
Если снова обратиться к примеру 12.1, то стиль вида P
> EM { color: red }
будет установлен для первого абзаца документа,
поскольку тег
находится внутри контейнера И не даст никакого результата для второго
абзаца. А все из-за того, что тег
во втором
абзаце расположен в контейнере
, поэтому
нарушается условие вложенности.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница
между ними следующая. Стиль к дочернему селектору применяется только в том случае,
когда он является прямым потомком, иными словами, непосредственно располагается
внутри родительского элемента. Для контекстного селектора же допустим любой уровень
вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).
Пример 12.2. Контекстные и дочерние селекторы
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Дочерние селекторы
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег
в примере действуют одновременно два правила: контекстный селектор (тег
расположен внутри
) и дочерний селектор (тег
является дочерним по отношению к
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I
ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3).
Рис. 12.3. Список в виде меню
Для размещения текста по горизонтали к селектору LI
добавляется стилевое свойство float
. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3).
Пример 12.3. Использование дочерних селекторов
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Дочерние селекторы
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
При использовании следующего стиля?
P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Для какого тега элемент <!DOCTYPE> выступает родителем?
</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Ни для одного тега.</li>
</ol><h2>Ответы</h2>
<p>1. Оливковый.</p>
<p>3. Ни для одного тега.</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</article>
</div>
</div>
<div id="secondary">
<aside id="search-2" class="widget widget_search clearfix">
<form action="/" class="search-form searchform clearfix" method="get">
<div class="search-wrap">
<input type="text" placeholder="Поиск" class="s field" name="s">
<button class="search-icon" type="submit"></button>
</div>
</form>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries clearfix">
<h3 class="widget-title"><span>Свежие записи</span></h3>
<ul>
<li>
<a href="/services/kak-na-androide-pereklyuchit-pamyat-na-kartu-kak-sdelat-tak-chtoby-vse.html">Как сделать так, чтобы все сохранялось на карту памяти</a>
</li>
<li>
<a href="/rates/kak-s-pomoshchyu-kompasa-nastroit-sputnikovuyu-antennu.html">Подключение спутникового ресивера к телевизору</a>
</li>
<li>
<a href="/rostelecom/ne-zagruzhaet-gugl-plei-na-telefone-ne-rabotaet-play-market-podklyuchenie.html">Не работает Play Market, подключение отсутствует</a>
</li>
<li>
<a href="/tele2/ustanovka-melodii-na-otdelnyi-kontakt-na-android-kak-postavit-melodiyu-na.html">Как поставить мелодию на контакт на "Андроид": советы, рекомендации, инструкции Как установить мелодию на группу контактов андроид</a>
</li>
<li>
<a href="/internet/plei-market-versiya-2-3-6-servisy-google-play-vozmozhnosti-i-osobennosti.html">Плей маркет версия 2.3 6. Сервисы Google Play. Возможности и особенности приложения Сервисы гугл плей</a>
</li>
<li>
<a href="/megaphone/upravlenie-linux-cherez-web-administrirovanie-linux-vvedenie-v-webmin-nastroika.html">Управление linux через web</a>
</li>
<li>
<a href="/services/chto-delat-esli-v-nedforspid-chernyi-ekran-pochemu-nfs-rivals-ne.html">Почему NFS Rivals не запускается?</a>
</li>
<li>
<a href="/beeline/ne-pokazyvaet-cifrovoe-kabelnoe-televidenie-kak-opredelit-pochemu-ne-rabotaet.html">Как определить, почему не работает цифровое телевидение</a>
</li>
</ul>
</aside>
<aside id="text-5" class="widget widget_text clearfix">
<div class="textwidget">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script>
<div id="vk_groups"></div>
</div>
</aside>
<aside id="text-4" class="widget widget_text clearfix">
<div class="textwidget">
<div id="pugoza1" style="height:500px;width:300px;" align="center"></div>
</div>
</aside>
<aside id="text-3" class="widget widget_text clearfix">
<div class="textwidget">
<div id="pugoza2" style="height:500px;width:300px;" align="center"></div>
</div>
</aside>
</div>
</div>
</div>
<footer id="colophon" class="clearfix">
<div class="footer-socket-wrapper clearfix">
<div class="inner-wrap">
<div class="footer-socket-area">
<div class="footer-socket-right-section">
</div>
<div class="footer-socket-left-sectoin">
<div class="copyright">© 2024 <a href="/" title="thetarif.ru"><span>thetarif.ru</span></a>. Мобильные операторы и тарифы.<br></div>
</div>
</div>
</div>
</div>
</footer>
<a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a>
</div>
<script type="text/javascript">
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = {
"sidebar": "colormag_right_sidebar",
"margin_top": 10,
"margin_bottom": 0,
"stop_id": "",
"screen_max_width": 0,
"screen_max_height": 0,
"width_inherit": false,
"refresh_interval": 1500,
"window_load_hook": false,
"disable_mo_api": false,
"widgets": ['text-3']
};
</script>
<script type="text/javascript">
(function(w, doc) {
if (!w.__utlWdgt) {
w.__utlWdgt = true;
var d = doc,
s = d.createElement('script'),
g = 'getElementsByTagName';
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h = d[g]('body')[0];
h.appendChild(s);
}
})(window, document);
</script>
<div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common"
data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln."
data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true"
class="uptolike-buttons"></div>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var pwebcontact_l10n = pwebcontact_l10n || {};
pwebcontact_l10n.form = {
"INIT": "Initializing form...",
"SENDING": "Sending...",
"SEND_ERR": "Wait a few seconds before sending next message",
"REQUEST_ERR": "Request error: ",
"COOKIES_ERR": "Enable cookies and refresh page to use this form"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {
"visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
"width": "Auto"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script>
<script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script>
<div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr">
<div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free">
<span class="pweb-text">Есть вопросы?</span>
<span class="pweb-icon"></span>
</div>
<div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr">
<div class="pwebcontact-container-outset">
<div id="pwebcontact1_container" class="pwebcontact-container">
<div class="pwebcontact-container-inset">
<form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8">
<div class="pweb-fields">
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-name pweb-field-name">
<div class="pweb-label">
<label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">
Имя </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-email pweb-field-email">
<div class="pweb-label">
<label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">
Email <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-textarea pweb-field-message">
<div class="pweb-label">
<label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">
Сообщение <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-buttons">
<div class="pweb-field">
<button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Отправить</button>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-msg pweb-msg-after">
<div id="pwebcontact1_msg" class="pweb-progress">
<script type="text/javascript">
document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..."
</script>
</div>
</div>
<input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token">
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block");
new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), {
'background_color': '#000000',
'color': '#ffffff',
'max_width': 250,
'opacity': 0.95,
'position': 'center'
});
});
</script>
<script type="text/javascript">
jQuery(document).on('ready post-load', function() {
jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox');
});
jQuery(document).on('ready post-load', easy_fancybox_handler);
jQuery(document).on('ready', easy_fancybox_auto);
</script>
<div id="mistape_dialog" data-mode="comment" data-dry-run="0">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<div id="mistape_confirm_dialog" class="mistape_dialog_screen">
<div class="dialog-wrap">
<div class="dialog-wrap-top">
<h2>Сообщить об опечатке</h2>
<div class="mistape_dialog_block">
<h3>Текст, который будет отправлен нашим редакторам:</h3>
<div id="mistape_reported_text"></div>
</div>
</div>
<div class="dialog-wrap-bottom">
<div class="mistape_dialog_block comment">
<h3><label for="mistape_comment">Ваш комментарий (необязательно):</label></h3>
<textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea>
</div>
<div class="pos-relative">
</div>
</div>
</div>
<div class="mistape_dialog_block">
<a class="mistape_action" data-action="send" data-id="389" role="button">Отправить</a>
<a class="mistape_action" data-dialog-close role="button" style="display:none">Отмена</a>
</div>
<div class="mistape-letter-front letter-part">
<div class="front-left"></div>
<div class="front-right"></div>
<div class="front-bottom"></div>
</div>
<div class="mistape-letter-back letter-part">
<div class="mistape-letter-back-top"></div>
</div>
<div class="mistape-letter-top letter-part"></div>
</div>
</div>
</div>
</body>
</html>
