Child elements are elements that are located directly inside a parent element. Notice the words: directly inside.
Let's look at an example of simple html code:
Child elements.
The paragraph and in it fatty element, and here it is inclined element.
Here fatty And underlined and oblique elements.
This code has two paragraphs. There are inline elements inside paragraphs
, And . In the second paragraph the tag nested in a tag
.
Now let's add CSS styles to this html code using child selectors.
Syntax for child selectors:
Selector 1 > Selector 2 ( Property: value; )
Here's the updated code:
Child elements.
The paragraph and in it fatty element, and here it is inclined element.
Here fatty And underlined and oblique elements.
So, let's remember: a child element is an element nested directly into the parent. That is, a child element is a first-level descendant. Let's pay attention to the tag , in the first paragraph it is nested in a tag
And in the second it is nested in a tag , although it is also a child of the tag
Therefore, in the second paragraph, the CSS rule for the child selector p>i ( color : blue ; ) will not work - the italic text of the second paragraph will not be displayed in blue.
Figure 1. Example #1 at work.
Get to html element the second paragraph can be used using the CSS rule: p>u>i ( color : blue ; ).
Let's use this rule to set the italic text of the second paragraph to yellow.
Child elements.
The paragraph and in it fatty element, and here it is inclined element.
Here fatty And underlined and oblique elements.
This style will work and the italic text in the second paragraph will be displayed in yellow.
Figure 2. Example No. 2 in action.
More complex example
We have html code:
Child elements.
By default it is interpreted like this:
Task: when CSS help turn this list into a horizontal menu.
Figure 3. Goal of change.
Here is a solution to this problem using child selectors:
Child elements.
For better understanding read this example.
Today let's get started learning html and css. I will try to explain this topic as clearly as possible for any reader. And it doesn’t matter whether you are familiar with this topic or just have a desire to study the code, which is quite widely used in website building. And to touch as much as possible more examples application and use of code, I plan to write a very impressive list of articles dedicated to, without using any cms, or combining html pages with the dle and wordpress engines. We will analyze questions as they arise, and not in the traditional style, first theory, and then practice. I will immediately show everything in practice, supporting everything with theory.
But let's start, of course, from the beginning. That is, what is html? And another important question: “Why do you need a doctype and which one to choose?” Actually, this is the topic of today’s post.
What is html?
Html is an abbreviation for HyperText Markup Language, which defines the arrangement of elements on a web page and their design. This language does not limit the webmaster in any way in his imagination and allows him to create almost any structure and design of the page. In general, if you decide to devote yourself to creating websites, you must know html code. There is nothing complicated about it, and I hope that based on the results of the series of articles, you will be convinced of this.
Any website code begins with a document type definition (DTD - document type definition (document type description)) by browsers in order to correctly display the site on our monitors. And to help the browser decide, you need to indicate the type of document that is used on the site. There is a tag for this . Why do you need to specify the document type? This is necessary because html exists in several versions of the language. And in addition, there is an extended markup language (XHTML - Extensible Hypertext Markup Language), which differs from html in syntax. And if you don’t do this, the web browser may get confused and not display our page correctly. Therefore, we will look at what types of documents there are. Below, I will offer a table with the varieties of main types of documents - :
| DOCTYPE
|
Description
|
| HTML 4.01
|
|
|
Strict HTML syntax. |
|
|
Transitional HTML syntax. |
|
|
HTML document using frames. |
| HTML 5
|
|
|
For all documents. |
| XHTML 1.0
|
|
|
Strict XHTML syntax. |
|
|
Transitional XHTML syntax. |
|
|
XHTML document using frames. |
| XHTML 1.1
|
|
|
Same as strict XHTML syntax, but adding modules is allowed. |
Now, let's try to figure out piece by piece what DOCTYPE contains.
html - indicates an element top level, that is, the very basis of the code. For HTML, this is a tag .
PUBLIC - determines the public nature of the document. This type document is public.
“-” indicates whether the document type developer is registered or not with the International Organization for Standardization (ISO). It has two meanings: minus or plus. Minus: not registered. Plus - registered. But for W3C, “-” is indicated
W3C is the organization that developed DTD.
DTD - document type. For HTML and XHTML, a DTD is specified.
HTML 4.01 Transitional (as an example) - the name of the document, its version and the syntax it uses.
EN is the language in which the document is written. And of course, HTML and XHTML use English.
http://www.w3.org/TR/html4/loose.dtd - address of the document description document (DTD).
That's how much information the very first one carries. HTML string or XHTML code. But problems may still arise in determining whether our document matches the chosen syntax or not. For this, there is a markup validator that will help us determine how valid (correct) our code is. The validator is provided by the same organization. which is the official developer of DTD. It is located on the website http://validator.w3.org/.
So, we just have to make a choice. And choose for our document. Here everyone must choose for themselves based on the information that we have studied today. This is how the introductory, theoretical post turned out. And then we will create our own html document, and possibly an entire website in html, without using any CMS for administration.
That's all for me. I hope this post will be useful and help you understand the issue about DOCTYPE.
Vlad Merzhevich
A child element is an element that is directly located inside a parent element. To better understand the relationships between document elements, let's look at a little code (example 12.1).
Example 12.1. Nesting of elements in a document
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.
IN in this example Several containers are used, which are located one inside the other in the code. This can be seen more clearly in the tree of elements, which is the name given to the structure of relationships between document tags (Fig. 12.1).
Rice. 12.1. Example element tree
In Fig. Figure 12.1 presents the nesting of elements and their hierarchy in a convenient form. Here the child element of the tag
protrudes tag
However, the tag is not a child of the tag , since it is located in a container
Let's return now to selectors. A child selector is one that is located directly inside the parent element in the element tree. The syntax for using such selectors is as follows.
Selector 1 > Selector 2 (Description of style rules)
The style is applied to Selector 2, but only if it is a child of Selector 1.
Referring back to Example 12.1, the view style P > EM ( color: red ) would be set to the first paragraph of the document because the tag is inside the container And it won't give any result for the second paragraph. And all because the tag in the second paragraph is located in a container , therefore the nesting condition is violated.
In their logic, child selectors are similar to context selectors. The difference between them is as follows. A child selector is only styled if it is a direct child, that is, directly inside the parent element. For context selector Any level of nesting is acceptable. To make it clear what we're talking about, let's look at the following code (example 12.2).
Example 12.2. Contextual and child selectors
HTML5 CSS 2.1 IE Cr Op Sa Fx
Child selectors
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna Aliguam erat volutpat.
The result of this example is shown in Fig. 12.2.
Rice. 12.2. Text color set using a child selector
To tag In the example, two rules operate simultaneously: context selector (tag located inside ) and child selector (tag
is a subsidiary of ). In this case, the rules are equivalent, since all the conditions for them are met and do not contradict each other. In such cases, the style shown in the code below is applied, so the italic text appears in red. If you reverse the rules and put DIV I below, the text color will change from red to green.
Note that in most cases you can avoid adding child selectors by replacing them with context selectors. However, the use of child selectors expands the ability to control element styles, which ultimately allows you to get desired result, as well as simple and clear code.
It is most convenient to use these selectors for elements that have a hierarchical structure - this includes, for example, tables and various lists. Example 12.3 shows changing the appearance of a list using styles. By nesting one list into another we get a type of menu. In this case, the headings are located horizontally, and the set of links is located vertically under the headings (Fig. 12.3).
Rice. 12.3. List as a menu
To position text horizontally, add a style to the LI selector float property. In order to separate the style of a horizontal and vertical list, child selectors are used (example 12.3).
Example 12.3. Using Child Selectors
HTML5 CSS 2.1 IE Cr Op Sa Fx
Child selectors
In this example, child selectors are required to separate the styling of the top-level list items and the nested lists that perform different tasks, so the style for them should not overlap.
Questions to check
1. What color will the bold italic text be in the code?
Illumination standards are based on based on the classification of visual work according to certain quantitative characteristics.
When using the following style?
P ( color: green; )
B (color: blue; )
I (color: orange; )
B > I ( color: olive; )
P > I ( color: yellow; )
- Green.
- Blue.
- Orange.
- Olive.
- Yellow.
2. Which element is the parent element for the tag ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. For which tag is the element<!DOCTYPE>acts as a parent?</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Not for any tag.</li>
</ol><h2>Answers</h2>
<p>1. Olive.</p>
<p>3. Not for any tag.</p>
<p>Hello, dear readers! Continuing <a href="https://gtavrl.ru/en/stilevoi-fail-css-video-na-temu-podklyuchenie-cssk-html-ssylka-na-css-fail-vnutri-na/">CSS theme</a> I want to bring to your attention selectors <b>description of child and context selectors</b>, as well as their <a href="https://gtavrl.ru/en/sravnitelnyi-analiz-svetodiodnyh-i-lamp-nakalivaniya-sootnoshenie/">comparative analysis</a>, because according to the logic of application they are very similar, although they have some differences.</p>
<p>In my publications I dwelled in some detail on various <a href="https://gtavrl.ru/en/privesti-css-v-normalnyi-vid-onlain-kak-poimat-lva-v-pustyne/">types of CSS</a> selectors: ; and . By the way, in the last article, where we discussed <a href="https://gtavrl.ru/en/kak-pochistit-klaviaturu-kogda-zaedaet-metody-chistki/">different types</a> attribute selector, I described in some detail how my theoretical calculations can be immediately checked by making changes to the HTML and CSS code online using the built-in <a href="https://gtavrl.ru/en/erik-shmidt-kak-rabotaet-google-kratkoe-soderzhanie-kogda-poyavilsya-google-i-kto-ego/">Google tool</a> Chrome(). Such editing tools have <a href="https://gtavrl.ru/en/virusnaya-ataka-shifrovalshchik-virus-shifrovalshchik-atakoval/">latest modifications</a> everyone <a href="https://gtavrl.ru/en/skachat-samyi-populyarnyi-brauzer-bystryi-brauzer-dlya-starogo/">popular browsers</a>, including <a href="https://gtavrl.ru/en/firebug-plagin-dlya-firefox-i-chome-instrukciya-po-ispolzovaniyu-kak-ispolzovat/">Firebug plugin</a> for Firefox().</p>
<p>You can also study the theoretical material in this post by editing any page of any website! To do this, just press F12 if you are using <a href="https://gtavrl.ru/en/windows-7-ne-ustanavlivaetsya-google-chrome-ne-ustanavlivaetsya-google-chrome-reshenie/">Google Chrome</a> or <a href="https://gtavrl.ru/en/kak-perevodit-stranicy-v-firefox-mozilla-firefox-perevodchik-stranic-ustanavlivaem/">Mozilla Firefox</a>(). Now I’ll present the contents of the p tag, using which we will study as an example <i>child and contextual CSS selectors</i>:</p><p>
<p>This paragraph includes <strong><em>em and strong formatting tags</em></strong> that highlight text <strong>bold</strong> And <em>italics</em>.
</p><p>Using the editing tool described above, I inserted this paragraph directly into this article, entering the appropriate text on the left side of the editing window, as a result of which the text of this paragraph appeared at the very top of the page:</p>
<p><br><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-v-brauzere.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>This HTML construct, . This paragraph will be a test subject in today's publication; using its example, I will show how the design of its text changes, depending on which selectors - child or contextual - are used in the CSS rule.</p>
<p><i>A child element is an element that is located directly inside its parent.</i>. Before proceeding directly to the topic, I will provide a picture that reflects the hierarchy of tags in <a href="https://gtavrl.ru/en/kak-vstavit-izobrazhenie-v-html-dokument-vstavka-izobrazhenii-v-html-dokument/">HTML document</a> using the example of the paragraph whose text is given above and which we will analyze today:</p>
<p><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/derevo-elementov.png' align="center" height="174" width="302" loading=lazy loading=lazy></p>
<p>This design is also called an element tree. This figure clearly shows the nesting of containers, which suggests hierarchical relationships between tags. The paragraph tag p is a child of the . At the same time, the strong tag is not a child of the div, since it is located in the p container.</p>
<h2>Child CSS selector</h2>
<p>A child selector in a tree of elements is always located directly inside the parent element, in this case the syntax is <a href="https://gtavrl.ru/en/poshlyi-rules-html-pravila-postroeniya-html-dokumentov-pravila/">writing CSS</a> The selector will be as follows:</p>
<p>The style will be applied to Selector 2, but only if it is a child of Selector 1. Let's look at it in more detail using the above screenshot of the element tree. For example, following the syntax, you can set a rule like this:</p><p>P> em (color: green;)</p><p>This rule will affect the last word of the paragraph to be “italicized,” since that is what is enclosed between the opening and closing em tags. The em tag is a child of p because it is placed directly inside it, therefore the content text, namely the word “italics”, will be colored in <a href="https://gtavrl.ru/en/kak-poyavilsya-svetofor-i-pochemu-dlya-nego-vybrali-zheltyi-zelenyi-i/">green color</a>.</p>
<p><br><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-dochernii-selektor.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>However, the other em tag is not a direct descendant of the p tag, since it is part of the strong tag, as a result of which the “em and strong formatting tags” part of the paragraph will not be colored.</p>
<h2>Contextual CSS selector</h2>
<p>It's time to figure it out <b>what is a CSS contextual selector</b>. When laying out a particular page on a website, tags are often nested one inside the other. In order for styles for such elements to work correctly, selectors are used that act in some context, hence the name.</p>
<p>If in order for a CSS rule to be applied, the child selector must be located directly inside the parent element (the first nesting level), then for the context selector this is completely unimportant and any nesting level can be applied, the properties of the element will still be transferred from the parent. The syntax is this:</p>
<p>As you can see, a context selector consists of simple selectors separated by a space. For contextual selectors, it is allowed to use two or more nested tags. Let’s now create a CSS rule for the paragraph under test, which I cited above:</p><p>P em (color: green;)</p><p><br><img src='https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-kontekstnyi-selektor.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>As you can see, not only the text of part of the paragraph content, which is directly enclosed in the em formatting tag, that is, the word “italicized,” is colored green, but also a section of the text of another em tag, which is also part of the strong tag. This happened because there is a rule with a context selector, for which the level of nesting is not important, unlike the child selector. This is the fundamental difference between a child and a context selector.</p>
<p>Let's look at another example of how contextual and child selectors interact with our paragraph. Let's write down the following <a href="https://gtavrl.ru/en/edinicy-razmerov-pikseli-em-i-ex-i-nasledovanie-pravil-v-css/">CSS rules</a> for child and context selector:</p><p>Div em (color: red;) p> em (color: green;)</p><p>After this, our paragraph takes on the following design:</p>
<p><br><img src='https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/kontekstnyi-dochernii-selektor.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>As you can see, a piece of text enclosed in em and strong tags is colored red because the context selector rule is valid for it, that is, the em tag is enclosed in strong and div containers, and the nesting level, as already noted, does not matter .</p>
<p>The question arises: why is the word “italicized,” which is also the content of em, colored green? After all, the context selector rule is relevant for him too. But for this section of paragraph text, the child selector rule is also valid, because it does not contradict the condition that for a child selector, the element must be directly included in the p tag.</p>
<p>The thing is, in CSS there is a law of precedence for <a href="https://gtavrl.ru/en/vse-selektory-i-svoistva-css-vidy-css-selektorov-dlya-vseh-elementov/">CSS properties</a>, located below. That is, in <a href="https://gtavrl.ru/en/kak-uvelichit-ob-m-pamyati-diska-s-za-sch-t-d-kak-uvelichit-obem/">in this case</a> the child selector rule is lower in the document than <a href="https://gtavrl.ru/en/kak-ubrat-neispolzuemye-stili-css-udalenie-neispolzuemyh-css/">CSS styles</a>, written for the context selector of the div container. Therefore, the word “italics” turned green. If you swap them, then the “p> em (color: green;)” rule no longer applies and the “italic” section of the text will be red.</p>
<p><span class="2FpxLiWbD3g"></span></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 loading=lazy>");</script>
</div><div class="clear"></div>
<script type="text/javascript">
document.getElementById('hc_full_comments').innerHTML = '';
</script><br /><br /><noindex><p align="center"><center>
<div id="meta_news_block1111" style="text-align: center;"></div></center>
</p>
<br /><br />
<p align="center">
</p>
</noindex>
</div>
</div>
<div id="sidebar">
<div class="clear"></div><br />
<h2 class="front" style="margin:15px 0 5px 0">Popular articles</h2>
<div class="tabcont">
<ol>
<li><a href="https://gtavrl.ru/en/poryadok-provedeniya-klassifikacii-informacionnyh-sistem-personalnyh/">BukvaPrava - free legal consultations On approval of the procedure for classifying personal data information systems</a></li>
<li><a href="https://gtavrl.ru/en/shablon-bloga-kategorii-joomla-3-tip-menyu-shablon-bloga-kategorii-alternativnyi/">Menu Type: Category Blog Template</a></li>
<li><a href="https://gtavrl.ru/en/sbros-uchetnoi-zapisi-windows-10-kak-legko-sbrosit-zabytyi-parol-v/">How to easily reset a forgotten password on any version of Windows</a></li>
<li><a href="https://gtavrl.ru/en/socialnaya-set-dlya-rasprostraneniya-opyta-pedagogov-nsportal/">NSPortal - Social network of educators Network of educators registration</a></li>
<li><a href="https://gtavrl.ru/en/principy-programmnogo-upravleniya-fon-neimana-poyavlenie-evm-principy-fon/">The advent of computers, von Neumann's principles</a></li>
</ol>
</div>
<h2 class="front" style="margin:15px 0 5px 0">Latest articles</h2>
<div class="tabcont">
<ol>
<li><a href="https://gtavrl.ru/en/proekt-sozdanie-plastilinovogo-multfilma-fioletovyi/">Presentation "project" plasticine cartoon Competition design work plasticine cartoon</a></li>
<li><a href="https://gtavrl.ru/en/blok-pitaniya-atx-450pnr-shema-shemy-ris-4-blok-pitaniya-s-sbmodulem/">Power supply atx 450pnr circuit diagram</a></li>
<li><a href="https://gtavrl.ru/en/izuchaem-rabotu-stabilitrona-stabilitrony-stabilitron-parallelnoe/">Zener diodes Zener diode parallel connection</a></li>
<li><a href="https://gtavrl.ru/en/sposoby-ustanovki-shriftov-v-windows-sposoby-ustanovki-shriftov-v-windows-kak/">Methods for installing fonts in Windows How to remove or hide a font</a></li>
<li><a href="https://gtavrl.ru/en/ustanovka-proshivki-android-5-0-lollipop-obnovlenie-android-kak-obnovitsya-do/">Installing android 5 firmware</a></li>
<li><a href="https://gtavrl.ru/en/formula-svyazi-ciklicheskoi-chastoty-i-perioda-kolebanii-chastota-period/">Frequency, period, cyclic frequency, amplitude, phase of oscillations</a></li>
<li><a href="https://gtavrl.ru/en/panamskii-kanal---svyaz-dvuh-okeanov-i-podvig-chelovechestva-kak/">The Panama Canal is a connection between two oceans and a feat of humanity</a></li>
</ol>
</div>
<div class="widget" id="ajdg_grpwidgets-3">
<div class="g g-9">
<div class="g-single a-27">
<script>
jQuery(function() {
window.onscroll = function() {
height_scroll = jQuery(document).scrollTop();
height = jQuery(document).height();
height50 = height / 2;
if (height_scroll >= height50) {
jQuery("#site-code-block-22").fadeIn(1200);
document.getElementById('site-code-block-22').style.display = 'block';
jQuery("#site-code-block-23").fadeOut(1200);
document.getElementById('site-code-block-23').style.display = 'none';
} else {
jQuery("#site-code-block-22").fadeOut(1200);
document.getElementById('site-code-block-22').style.display = 'none';
document.getElementById('site-code-block-23').style.display = 'block';
jQuery("#site-code-block-23").fadeIn(1200);
}
};
});
</script>
<div class="site-code-block prma-count" data-rel="cb_23" id="site-code-block-23" style="">
</div>
<div class="site-code-block prma-count" data-rel="cb_22" id="site-code-block-22" style="">
</div>
</div>
</div>
</div>
<div class="clear"></div>
<br />
<center>
<div style="color: #333333; font-size: 11px;">
</div>
</center>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<br /><br />
<div id="footeri">
<div id="footer">
<div class="footer-sec">
<h6>Sections</h6>
<ul>
<li><a href="https://gtavrl.ru/en/category/youtube/">Youtube</a></li>
<li><a href="https://gtavrl.ru/en/category/facebook/">Facebook</a></li>
<li><a href="https://gtavrl.ru/en/category/twitter/">Twitter</a></li>
<li><a href="https://gtavrl.ru/en/category/tips/">Adviсe</a></li>
<li><a href="https://gtavrl.ru/en/category/useful-tips/">Useful tips</a></li>
<br />
</ul>
</div>
<div class="footer-sec">
<h6>Pages</h6>
<ul>
<li><a href="">about the project</a></li>
<noindex>
<li><a href="" >RSS news</a></li>
</noindex>
</ul><br /><br /><br />
<h6>Special projects</h6>
<ul>
<li><a href="https://gtavrl.ru/en/feedback/">Connect with us</a></li>
</ul>
</div>
<div id="footer-top">
<h6>Contacts</h6>
<ul>
<li><a href="">Advertising on the website</a></li>
<li><a href="https://gtavrl.ru/en/feedback/">Contacts</a></li>
</div>
<div class="clear"></div>
</div></div>
<div id="bottom"><div class="foot_col1">2024 <a href="https://gtavrl.ru/en/">gtavrl.ru</a>.
</div>
<script type="text/javascript">var addthis_config = { "data_track_addressbar":true,"pubid": "ra-58b68bb0f1371607"} ;addthis_config.data_track_addressbar = false;addthis_config.data_track_clickback = false;</script>
<script type='text/javascript'>
var flag_hide = 0;
function hide_direct() {
flag_hide = 1;
jQuery('#rek_mob_fixed').slideToggle( 'slow' );
var date = new Date();
var expires_hour = 21600000;
date.setTime(date.getTime()+expires_hour);
showSocial();
Cookies.set('advp_show_me', '1', { expires: date, path: '/'} );
} ;
jQuery(function(f){
var element = f('#rek_mob_fixed');
element.delay(8000);
f(window).scroll(function(){ if (flag_hide == 0){
var offset_element_for_hide = jQuery('#before_footer').val();
if (offset_element_for_hide != null) {
offset_element_for_hide = jQuery('#before_footer');
offset_element_for_hide = jQuery(offset_element_for_hide).offset().top - jQuery(window).height();
} else {
offset_element_for_hide = jQuery(document).height();
}
//Если рекламный блок более 1000px по ширине, устанавливай фикс. ширину 1000px
if (jQuery('#rek_mob_fixed_block').actual('width') >1000) {
jQuery('#rek_mob_fixed_block').css({ 'max-width':'1000px'} );
}
if(f(this).scrollTop() > 500){
element.fadeIn(0);
}
if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){
element.fadeOut(0)
}
if(f(this).scrollTop() + f(this).height() >= f(document).height() && flag_hide == 0 && jQuery('#rek_mob_fixed').is(':visible'))
{
jQuery('#rek_mob_fixed').slideToggle(100);
}
}
} );
} );
function showSocial(){
if(flag_hide == 1 )
jQuery('#footer-share').slideToggle('slow');
}
</script><div id="wondergridgallerylightbox_options" data-skinsfoldername="skins/default/" data-jsfolder="/wp-content/plugins/modesco-wonderplugin-gridgallery/engine/" style="display:none;"></div>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-monica/script.min.js?ver=4.9.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":"100%"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-table-of-contents-plus/front.js?ver=1404'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/page-links-to/js/new-tab.min.js?ver=2.9.8'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "ads-sidebar", "margin_top" : 10, "margin_bottom" : 50, "stop_id" : "before_footer", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ajdg_grpwidgets-3'] } ;
</script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type="text/javascript">
var _hcwp = _hcwp || [];
var _hcobj = { widget_id : 29264, widget : "Bloggerstream",selector: '.hc_counter_comments',platform:"wordpress", } ;
_hcwp.push(_hcobj);
(function() {
if("HC_LOAD_INIT" in window)return;
HC_LOAD_INIT = true;
var lang = "ru";
var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/29264/"+lang+"/widget.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hcc, s.nextSibling);
} )();
</script>
</body>
</div>
</body>
</html>
