Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет 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. Цель преобразований.
Вот решение этой задачи с использованием дочерних селекторов:
Дочерние элементы.
Для лучшего понимания этого примера читайте.
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 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 находится сейчас в <a href="/browsers/kakie-formaty-videofailov-luchshe-drugih-formaty-i-formy-elektronnyh/">лучшей форме</a>, чем 5-6 лет назад , когда jQuery набирал популярность.</p> <p>В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала.</p> <h2>Подсчет дочерних узлов</h2> <p>Для демонстрации я буду использовать следующую <a href="/internet/chto-takoe-yazyk-razmetki-html-referat-yazyk-gipertekstovoi/">разметку 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="/the-content/blochnye-elementy-html-osnovy-html-obshchie-pravila-blochnye-i/">элементов 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="/web-investment/kakie-sushchestvuyut-sposoby-vyzova-mastera-funkcii-ispolzovanie-mastera-funkcii-esli-argument-yavlyae/">логическое значение</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="/answers-it/simpleks-metod-primer-resheniya-tablica-simpleksnyi-metod-resheniya-zlp/">Данный метод</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>В <a href="/keyboard/kak-zashchitit-lichnye-dannye-v-android-zashchita-lichnyh-dannyh-na-telefone-na-sluchai/">данном случае</a> я создаю <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>Этот метод не возвращает <a href="/web-investment/na-rasstoyanie-do-30-videonablyudenie-na-udalennom-obekte-besprovodnoe/">удаленный объект</a> и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.</p> <h2>Замена дочерних элементов</h2> <p>Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот <a href="/configuring-os/apple-iphone-6-novyi-razemy-i-elementy-upravleniya-svyaz-i-mobilnyi-internet/">новый элемент</a> или я создал его с нуля. Вот разметка:</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() принимает два аргумента: новый элемент и заменяемый им <a href="/hosting-and-domains/starye-elementy-yandeksa-dlya-firefox-yandeks-elementy-dlya-mozilla-firefox-kak/">старый элемент</a>.</p> <p>Я также могу использовать это метод для перемещения существующего элемента. Взгляните на <a href="/program/perenos-na-sleduyushchuyu-stranicu-stroku-html-osnovnye-varianty-resheniya-problemy/">следующий HTML</a>:</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="/answers-it/sinhronizaciya-pk-s-android-raznymi-sposobami-kak-sinhronizirovat/">разных способов</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. Давайте перейдем к <a href="/web-services/pohozhii-stati-po-odnoi-teme-plaginy-dlya-otobrazheniya-pohozhih-zapisei-wordpress-dlya/">похожей теме</a> и взглянем на новые возможности по вставке контента.</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>Этот метод прост. Попробуем теперь более <a href="/security/chto-esli-pereiti-na-windows-10-sposoby-besplatnogo-poluchenie/">мощный способ</a> вставки: метод insertAdjacentHTML() .</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>
</article>
<ul class="breadcrumbs">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a class="home" href="/" itemprop="url"><span itemprop="title">Главная</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/category/web-investment/" itemprop="url"><span itemprop="title">Веб-инвестиции</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/web-investment/css-vybrat-pervyi-dochernii-element-specialnye-selektory-v-css-sosednie/" itemprop="url"><span itemprop="title">Css выбрать первый дочерний элемент. Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега. Селектор атрибута со значением</span></a></li>
</ul>
<div class='yarpp-related'>
<div class="title">Похожие публикации</div>
<ul class="related">
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/90bf91a6b3978692467c5e20f255e63e.jpg" width="150" height="95" alt="Мощные низковольтные СВЧ транзисторы для подвижных средств связи" / loading=lazy> </div>
<a href="/keyboard/moshchnye-svch-tranzistory-philips-semiconductors-moshchnye-nizkovoltnye-svch-tranzistory/">Мощные низковольтные СВЧ транзисторы для подвижных средств связи</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/36d21cd536b7404107db9d278f3c77fc.jpg" width="150" height="95" alt="Как удалить Хамачи (Hamachi) из ОС Windows Как удалить хамачи сетевых подключений" / loading=lazy> </div>
<a href="/keyboard/problema-s-tunnelem-hamachi-sposoby-resheniya-nepoladki-kak/">Как удалить Хамачи (Hamachi) из ОС Windows Как удалить хамачи сетевых подключений</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/2902d1ff7cf7985e1a49391afcea2220.jpg" width="150" height="95" alt="Как устроен моноколесо. Как работает моноколесо. Технические различия между моделями" / loading=lazy> </div>
<a href="/program/kak-ustroen-monokoleso-kak-rabotaet-monokoleso-tehnicheskie-razlichiya-mezhdu-modelyami/">Как устроен моноколесо. Как работает моноколесо. Технические различия между моделями</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/f85abf856fb08f5997bb3e403daed957.jpg" width="150" height="95" alt="Анонимный доступ по FTP Ftp анонимный доступ" / loading=lazy> </div>
<a href="/windows/chto-takoe-anonimnyi-ftp-dostup-anonimnyi-dostup-po-ftp-ftp/">Анонимный доступ по FTP Ftp анонимный доступ</a>
</li>
</ul>
</div>
</main>
<aside class="sidebar">
<div class="section section_widget widget_categories">
<div class="title">Рубрики</div>
<ul>
<li class="cat-item cat-item-23"><a href="/category/web-investment/" title="Веб-инвестиции">Веб-инвестиции</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/the-content/" title="Контент">Контент</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/creative/" title="Креатив">Креатив</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/keyboard/" title="Клавиатура">Клавиатура</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/program/" title="Программы">Программы</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/hosting-and-domains/" title="Хостинги и домены">Хостинги и домены</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/linux/" title="Linux">Linux</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/configuring-os/" title="Настройка ОС">Настройка ОС</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/browsers/" title="Браузеры">Браузеры</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/iron/" title="Железо">Железо</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/security/" title="Безопасность">Безопасность</a>
</li>
</ul>
</div>
<div class="section section_widget widget_recent_entries">
<div class="title">Популярные записи</div>
<ul>
<li>
<a href="/program/kak-obnaruzhit-nesankcionirovannyi-udalennyi-dostup-k-kompyuteru/">Как обнаружить несанкционированный удаленный доступ к компьютеру</a>
</li>
<li>
<a href="/linux/kak-v-skaipe-otpravit-tekstovoe-soobshchenie-kak-otpravlyat-sms-soobshcheniya-v/">Как отправлять SMS-сообщения в Скайпе для рабочего стола?</a>
</li>
<li>
<a href="/web-investment/obzor-oblachnogo-servisa-skydrive-ot-microsoft-onedrive-kak-polzovatsya/">OneDrive — как пользоваться хранилищем от Microsoft, удаленный доступ и другие возможности бывшего SkyDrive Вход в веб-сервис OneDrive</a>
</li>
<li>
<a href="/internet/bios-ne-vidit-fleshku-v-boot-menu-bios-ne-vidit-zagruzochnuyu-fleshku-kak-reshit/">Биос не видит загрузочную флешку, как решить проблему</a>
</li>
<li>
<a href="/android/v-chem-zaklyuchaetsya-princip-raboty-kompyutera-princip-raboty-kompyutera/">Принцип работы компьютера</a>
</li>
</ul>
</div>
<div class="section section_widget widget_recent_entries">
<div class="title">Свежие записи</div>
<ul>
<li>
<a href="/answers-it/sozdanie-zapolnyaemyh-pdf-form-sozdanie-i-izmenenie-polei-formy-zapolnyaemyi/">Создание и изменение полей формы Заполняемый бланк в pdf</a>
</li>
<li>
<a href="/answers-it/chto-takoe-letyshops-kak-rabotaet-lety-shops-otzyvy-o-letyshops-letyshops-otzyvy-o-samom/">Что такое Letyshops? Как работает Lety shops? Отзывы о Letyshops. Letyshops отзывы о самом мощном кэшбэке Оплачивать покупки можно наличными или с мобильного телефона</a>
</li>
<li>
<a href="/answers-it/kak-otklyuchit-uvedomleniya-megafon-megafonpro-chto-eto-takoe-i-kak/">MegaFonPRO: что это такое и как отключить мобильные подписки</a>
</li>
<li>
<a href="/keyboard/samye-bystrye-fleshki-usb-3-0-drugoi-vzglyad-na-vybor-novoi-fleshki/">Самые быстрые флешки usb 3</a>
</li>
<li>
<a href="/security/kak-nastroit-rabochii-stol-na-xiaomi-rabochii-stol-xiaomi-kak-upravlyat-i/">Рабочий стол Xiaomi: как управлять и пользоваться</a>
</li>
</ul>
</div>
<div class="section section_widget">
<div id="zysypu1" style="height:500px;width:290px;" align="center"></div>
</div>
</aside>
</div>
</div>
<footer class="footer">
<nav class="footer-nav"><ul><li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="/sitemap.xml">Карта сайта</a></li>
</ul></nav> <div class="footer-bottom">
<div class="copy">© 2024. tdelegia.ru Бесплатная помощь IT-специалиста. Полезные статьи. Все права защищены</div>
</div>
</footer>
</div>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.4'></script>
<script type='text/javascript' src='/assets/scripts1.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "smooth_scroll":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://tdelegia.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://tdelegia.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script>
</div>
</body>
</html>
