Css выбрать все дочерние элементы. Дочерние и контекстные CSS селекторы. Вставка контента в DOM
Дочерние селекторы CSS - это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).
И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.
<тег1>
<тег2>...
<тег3><тег4>...
Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2>
и <тег3>
являются дочками <тег1>
, а <тег4>
- это дочка <тег3>
.
Дочерние селекторы состоят из двух или более простых селекторов разделенных знаком ">
", где сначала указывается родитель, потом его дочерний элемент, затем дочка этого дочернего элемента и т.д. То есть, как и в селекторах потомков, задается путь прохождения по дереву документа. Стили будут применены только к тем элементам, селекторы которых находятся последними в списке. Общий синтаксис:
селектор1 > селектор2 {
Пробелы с обоих сторон знака ">
" можно ставить, а можно и нет, по желанию.
Пример использования дочерних селекторов CSS
Дочерние селекторы
Результат в браузере
Параграф1.
Параграф2.
В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента , но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.
Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера - помните об этом.
Дочерние селекторы в HTML-таблицах
Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем идет речь, давайте посмотрим на такую обычную таблицу.
| Ячейка 1.1 | Ячейка 1.2 |
| Ячейка 2.1 | Ячейка 2.2 |
А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:
table > tr > td { свойство:
значение; свойство:
значение; ... }
А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике
мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.
table > tbody > tr > td { свойство:
значение; свойство:
значение; ... }
Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.
Домашнее задание.
- Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
- Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
- Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
- Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.
Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 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>
<p>Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность.</p> <p>В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала.</p> <h2>Подсчет дочерних узлов</h2> <p>Для демонстрации я буду использовать следующую <a href="/audio-and-sound/osnovnye-pravila-yazyka-html-yazyk-razmetki-html-sintaksis-osnovnye-pravila/">разметку HTML</a>, в течение статьи мы ее несколько раз изменим:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>Var myList = document.getElementById("myList");
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6
</p><p>Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию <a href="/program/css-markirovannyi-spisok-otstup-kak-ubrat-otstupy-html-elementa-kak-ubrat/">элементов HTML</a>, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.</p> <p>Во втором примере я использую метод childElementCount , который мне кажется более аккуратным и потенциально более поддерживаемым способом (подробнее обсудим это позже, я не думаю, что у вас возникнут проблемы с пониманием того, что он делает).</p> <p>Я мог бы попытаться использовать childNodes.length (вместо children.length), но посмотрите на результат:</p><p>Var myList = document.getElementById("myList");
console.log(myList.childNodes.length); // 13
</p><p>Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы - учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.</p> <h2>Проверка существования дочерних узлов</h2> <p>Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает <a href="/google-chrome/bulevy-true-i-false-znacheniya-v-perl-logicheskie-vyrazheniya-i-logicheskie/">логическое значение</a>, сообщающие об их наличии или отсутствии:</p><p>Var myList = document.getElementById("myList");
console.log(myList.hasChildNodes()); // true
</p><p>Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:</p><p> <body>
</body>
</p><p>И вот результат нового запуска hasChildNodes() :</p><p>Console.log(myList.hasChildNodes()); // true
</p><p>Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. <a href="/program/sopostavit-dannye-iz-dvuh-tablic-excel-kak-sravnit-dva-stolbca/">Данный метод</a> учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:</p><p> <body>
</body>
</p><p>И теперь в консоль выводится ожидаемый результат:</p><p>Console.log(myList.hasChildNodes()); // false
</p><p>Конечно, если я знаю, что могу столкнуться с пробелом, то сначала я проверю существование дочерних узлов, затем с помощью свойства nodeType определяю, есть ли среди них узлы-элементы.</p> <h2>Добавление и удаление дочерних элементов</h2> <p>Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .</p><p>Var myEl = document.createElement("div");
document.body.appendChild(myEl);
</p><p>В данном случае я создаю <div> с помощью метода createElement() и затем добавляю его к body . Очень просто и вы наверняка использовали эту технику раньше.</p> <p>Но вместо вставки специально создаваемого элемента, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p>Example text</p>
</div>
</p><p>Я могу изменить место расположения списка с помощью следующего кода:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementById("c");
container.appendChild(myList);
</p><p>Итоговый DOM будет выглядеть следующим образом:</p><p> <div id="c">
<p>Example text</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.</p> <p>Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementById("c");
container.removeChild(myList);
</p><p>Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.</p><p>Var myOldChild = document.body.removeChild(myList);
document.body.appendChild(myOldChild);
</p><p>Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:</p><p>Var myList = document.getElementById("myList");
myList.remove();
</p><p>Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.</p> <h2>Замена дочерних элементов</h2> <p>Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот новый элемент или я создал его с нуля. Вот разметка:</p><p> <p id="par">Example Text</p>
</p><p>Var myPar = document.getElementById("par"),
myDiv = document.createElement("div");
myDiv.className = "example";
myDiv.appendChild(document.createTextNode("New element text"));
document.body.replaceChild(myDiv, myPar);
</p><p> <div class="example">New element text</div>
</p><p>Как видите, метод replaceChild() принимает два аргумента: новый элемент и заменяемый им старый элемент.</p> <p>Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:</p><p> <p id="par1">Example text 1</p>
<p id="par2">Example text 2</p>
<p id="par3">Example text 3</p>
</p><p>Я могу заменить третий параграф первым параграфом с помощью следующего кода:</p><p>Var myPar1 = document.getElementById("par1"),
myPar3 = document.getElementById("par3");
document.body.replaceChild(myPar1, myPar3);
</p><p>Теперь сгенерированный DOM выглядит так:</p><p> <p id="par2">Example text 2</p>
<p id="par1">Example text 1</p>
</p><h2>Выборка конкретных дочерних элементов</h2> <p>Существует несколько <a href="/toys/denezhnyi-perevod-bilain-s-telefona-na-telefon-bilain/">разных способов</a> выбора конкретного элемента. Как показано ранее, я могу начать с использования коллекции children или свойства childNodes . Но взглянем на другие варианты:</p> <p>Свойства firstElementChild и lastElementChild делают именно то, чего от них можно ожидать по их названию: выбирают первый и последний дочерние элементы. Вернемся к нашей разметке:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>Я могу выбрать первый и последний элементы с помощью этих свойств:</p><p>Var myList = document.getElementById("myList");
console.log(myList.firstElementChild.innerHTML); // "Example one"
console.log(myList.lastElementChild.innerHTML); // "Example six"
</p><p>Я также могу использовать свойства previousElementSibling и nextElementSibling , если я хочу выбрать дочерние элементы, отличные от первого или последнего. Это делается сочетанием свойств firstElementChild и lastElementChild:</p><p>Var myList = document.getElementById("myList");
console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two"
console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"
</p><p>Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.</p> <h2>Вставка контента в DOM</h2> <p>Я уже рассматривал способы вставки элементов в DOM. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента.</p> <p>Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p id="par">Example Paragraph</p>
</div>
</p><p>Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementBy("c"),
myPar = document.getElementById("par");
container.insertBefore(myPar, myList);
</p><p>В полученном HTML параграф будет перед списком и это еще один способ перенести элемент.</p><p> <div id="c">
<p id="par">Example Paragraph</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить.</p> <p>Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .</p>
<p>Я думаю, что многие знают о <b>контекстных селекторах в CSS
</b>. Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются <b>дочерные селекторы в CSS
</b>.</p>
<p>Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой <b>HTML-код
</b>:</p><p>
<div class="container"><br>
<div><br>
<p>Первый абзац</p><br>
</div><br>
<p>Второй абзац</p><br>
</div>
</p><p>И наша задача сделать красным только "<b>Второй абзац
</b>". Если мы напишем с использованием контекстного селектора:</p><p>Container p {<br>
color: red;<br>
}
</p><p>То у нас станут красным оба абзаца, что нам совсем не нужно. <a href="/google-chrome/polzuyas-dannymi-predstavlennymi-reshenie-zadach/">Данная задача</a> очень просто решается с помощью <b>дочерних селекторов в CSS
</b>:</p><p>Container > p {<br>
color: red;<br>
}
</p><p>Всё, теперь красным у нас стал только "<b>Второй абзац
</b>". Поскольку именно данный абзац является непосредственно дочерним для <b>.container
</b>. А "<b>Первый абзац
</b>" является дочерним для внутреннего <b>div
</b>, таким образом, под действие дочернего селектора он не попадает.</p>
<p>Вот так легко решаются такие задачи, однако, есть один огромный минус <b>дочерних селекторов в CSS
</b> - они не работают в браузерах <b>Internet Explorer
</b>. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает <a href="/security/tip-peremennoi-v-yazyke-javascript-slozhno-o-prostom-tipy-dannyh-js/">данный тип</a> селекторов и что он делает.</p>
<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 class="single-popular">
<div class="single-popular-tit col-lg-12">
Популярное в рубрике:
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/b3d307fd0ae4b0ba07199ae3c70829fa.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Установка и удаление Radmin"/ loading=lazy>
<div class="single-popular-item-tit">
Установка и удаление Radmin </div>
<a href="/program/v-kakuyu-papku-ustanavlivaetsya-radmin-po-umolchaniyu-ustanovka-i/" rel="bookmark" title="Установка и удаление Radmin">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/0efc7890be12dadc1b6d9d2104bef630.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Что делать, если на iPad вылетают приложения?"/ loading=lazy>
<div class="single-popular-item-tit">
Что делать, если на iPad вылетают приложения? </div>
<a href="/toys/ios-vyletayut-chto-delat-esli-na-ipad-vyletayut-prilozheniya-vyletayut-mnogie/" rel="bookmark" title="Что делать, если на iPad вылетают приложения?">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/6c604ba64604de42d010530f1452b70a.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Что такое подключаемые модули в Яндекс"/ loading=lazy>
<div class="single-popular-item-tit">
Что такое подключаемые модули в Яндекс </div>
<a href="/security/dlya-chego-nuzhny-plaginy-v-brauzere-chto-takoe-podklyuchaemye/" rel="bookmark" title="Что такое подключаемые модули в Яндекс">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/4de4f58faeac33ef644176dccea8968e.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Почему телефон не заряжается от зарядного устройства"/ loading=lazy>
<div class="single-popular-item-tit">
Почему телефон не заряжается от зарядного устройства </div>
<a href="/audio-and-sound/telefon-ne-zaryazhaetsya-hotya-pokazyvaet-pochemu-telefon-ne/" rel="bookmark" title="Почему телефон не заряжается от зарядного устройства">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="sidebar col-lg-3 col-md-4 col-sm-12">
<div class="sidebar-wrp">
<div class="sidebar-wrp-title">Последние Статьи</div>
<div class="sidebar-wrp-des">
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/48a6fe59317137dbb50bab3f3f4a797b.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Ручная установка драйверов windows 7</div>
<div class="clr"></div>
<a href="/program/ruchnaya-ustanovka-draiverov-windows-7/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/6fe5e2c5c9881e1114e60b4e897730c0.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Подключаем тв к компьютеру</div>
<div class="clr"></div>
<a href="/audio-and-sound/kabel-s-video-raspinovka-podklyuchaem-tv-k-kompyuteru-prosmotr-dvd-s/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/6528b1a42a3eec42adc479d2eb93eda6.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Как проверить баланс на Билайне?</div>
<div class="clr"></div>
<a href="/google-chrome/ne-poluchaetsya-uznat-balans-bilain-kak-proverit-balans-na-bilaine/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/09d8c83a00bfe1a4f29b782d6cf9b04f.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Операционный усилитель LM324</div>
<div class="clr"></div>
<a href="/program/mikroshema-324-datashit-operacionnyi-usilitel-lm324-opisanie-shema/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/3af4e4509d8870f9da220a87c488a4c9.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Как раскрутить группу в ВК самому бесплатно</div>
<div class="clr"></div>
<a href="/audio-and-sound/bystraya-raskrutka-vk-kak-raskrutit-gruppu-v-vk-samomu-besplatno-metody/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/7d1485019512fa89a82ad7e5af027b23.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Как изменить настройки и подключить...</div>
<div class="clr"></div>
<a href="/program/plagin-frigate-dlya-yandeks-brauzera-kak-izmenit-nastroiki-i-podklyuchit/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/b5ead01104a19b9ed9fbeb4dbe604f7d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">0 подключение передней панели</div>
<div class="clr"></div>
<a href="/audio-and-sound/ms-7352-ver-1-0-podklyuchenie-perednei-paneli-podklyuchaem-perednyuyu-panel-kompyutera/">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/2a287a0862c2f05657588e9bc68f95e8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Пентиум 2 дуо. Процессоры. Новые команды...</div>
<div class="clr"></div>
<a href="/toys/pentium-2-duo-processory-novye-komandy-intel-aes/">читать</a>
</div>
<div class="clr"></div>
</div>
</div>
<div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget">
</div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="/public/logo.png" loading=lazy>
<div class="footer-contacts-tit">olacom.ru<br>Интересные и полезные программы</div>
<div class="footer-soc">
<div class="footer-soc-wrp">
<div class="soc_w">
<a href="#" class="soc-link vk" target="_blank"></a>
<a href="#" class="soc-link fb" target="_blank"></a>
</div>
</div>
</div>
</div>
<div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;">
<ul>
<li><a href="">Редакция проекта</a></li>
<li><a href="">Реклама на сайте</a></li>
</ul>
<ul>
<li><a href="/feedback/">Контакты</a></li>
<li><a href="/sitemap.xml">Карта сайта</a></li>
</ul>
</div>
</div>
</div>
<div class="copyright">© 2024 Интересные и полезные программы</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://olacom.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://olacom.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script>
<a id="scroll-to-top" href="#" title="Scroll to Top">Top</a>
<script type='text/javascript' src='https://olacom.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://olacom.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script>
<script type='text/javascript' src='https://olacom.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://olacom.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/olacom.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/olacom.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} };
/* ]]> */
</script>
<script type='text/javascript' src='https://olacom.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script>
</body>
</html>
