Hello, dear readers! Continuing the subject CSS selectors I want to offer you description of subsidiaries and contextual selectors, as well as their comparative analysis, because according to the logic of the application, they are very similar, although they have some difference.

In my publications, I stayed in detail in various types of CSS selectors :; as well as . By the way, in the last article, where different types of attribute selector disassembled, I described in a detail in detail how my theoretical calculations can be immediately checked by making changes to HTML and CSS code online using the built-in Google Chrome () tool. Such editing tools have the latest modifications of all popular browsers, including FireBug plugin for Firefox ().

Theoretical material of this post can also be studied by making editing any page of any site! To do this, simply press F12 if you use Google Chrome or Mozilla Firefox (). And now I will present the content of the P tag, on the example of which we will study subsity and contextual CSS selectors:

This paragraph includes em and Strong formatting tagsthat allocate text fat and italic.

Using the above-described editing tool, I inserted this paragraph directly to this article, scoring the corresponding text on the left side of the window to edit, as a result of which the text of this paragraph appeared at the very top of the page:

This html design ,. This paragraph will be experimental in today's publication, on his example I will show how the design of his text is changing, depending on which selectors - child or contextual - are used in CSS rule.

The daughter is called an element that is located directly inside the parent. Before proceeding directly to the topic, I will give a picture that reflects the tag hierarchy in the HTML document on the example of paragraph whose text is given above and which we will disassemble today:

This design is also called the tree of elements. In this figure, the nesting containers is clearly represented, which implies hierarchical relations between tags. Paragraph P tag is a subsidiary element in relation. At the same time, the strong tag is not a subsidiary for DIV, since it is raced in the P container.

Subsidiary CSS selector

The child selector in the tree of elements is always directly inside the parent element, in this case the syntax of writing CSS selector will be as follows:

The style will be applied to the selector 2, but only if it is a child for selector 1. We will analyze in more detail using the above screenshot with the tree of elements. For example, following the syntax, you can set this rule:

P\u003e EM (Color: Green;)

This rule will influence the last word paragraph "italics", since it is concluded between the opening and closing tags of EM. The EM tag is a subsidiary for P, because it is placed directly inside it, therefore the text of the content, namely the word "italic" will be painted in green.

However, the other EM tag does not serve as a direct descendant of the P tag, as it is part of the Strong tag, as a result of which part of the paragraph "Formatting Tags EM and Strong" will not be painted.

Contextual CSS selector

It is a queue to figure out what is the contextual CSS selector. When laying up one or another site page very often, the tags are invested in one to another. In order for the styles for such elements to work correctly, selectors are used, which act in some context, hence the name.

If in order for the CSS rule to be applied, the child selector must be located directly inside the parent element (the first level of nesting), then for the context selector it is completely unimportant and any level of nesting can be applied, all the equal properties of the element will be transferred from the parent. At the same time, the syntax is:

As you can see, the contextual selector consists of simple selectors separated by a space. For contextual selectors, it is allowed to use two and more tag invested in each other. We now make a CSS rule for the test paragraph, which I led above:

P EM (Color: Green;)

As you can see, green is colored not only the text of the paragraph content, which is directly concluded in the formatting tag of EM, that is, the word "italics", but also the text of the text of another EM tag, which also includes the strong tag. It happened because it applies the rule with the contextual selector, for which the nesting level is not important in contrast to the subsidiary. This is the principal difference between the subsidiary and contextual selector.

Consider another example of the interaction of context and child selectors with our paragraph. Propying the next CSS rules for the subsidiary and context selector:

DIV EM (Color: Red;) P\u003e EM (Color: Green;)

After that, our paragraph acquires such a design:

As you can see, a piece of text enclosed in the EM and Strong tags are painted in red, because it is fair to the contextual selector rule, that is, the EM tag is concluded in the Strong and Div containers, and the nesting level, as has already been noted, does not matter .

The question arises: why is the word "italic", which is also the content of EM, painted in green? After all, and for him the contextual selector rule is relevant. But for this section of the text of the paragraph, the daughter selector rule is also true, because it does not contradict the condition that for the child selector, the element should directly enter the tag P.

The fact is, the CSS has a priority law for CSS properties below. That is, in this case, the daughter selector's rule is in the document below than CSS styles prescribed for the context selector of the DIV container. Therefore, the word "italic" became green. If you change them in some places, the rule "p\u003e em (Color: Green;)" ceases to act and the text of the text "italics" will be red.

Description

Pseudo-class: NTH-Child is used to add style to elements based on the elements tree.

Syntax

element: NTH-CHILD (ODD | Even |<число> | <выражение>) {...}

Values

ODD All odd elements numbers. Even all even numbers of elements. The number of the sequence number of the child element relative to its parent. Numbering begins with 1, it will be the first element in the list. The expression is set in the form of an + b, where a and b integers, and n - the counter that automatically takes the value 0, 1, 2 ...

If a is zero, it is not written and the record is reduced to b. If B is zero, it is also not specified and the expression is written in the form of AN. A and B may be negative numbers, in this case the plus sign changes to minus, for example: 5N-1.

Due to the use of negative values \u200b\u200ba and b, some results can also be negative or equal to zero. However, only positive values \u200b\u200baffect the elements due to the fact that the numbering of elements begins with 1.

In tab. 1 shows some possible expressions and keywords, and also specified which numbers of the elements will be involved.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
Oil	16	34	62	74	57
Gold	4	69	72	56	47
Wood	7	73	79	34	86
Stones	23	34	88	53	103

In this example, the pseudo-class: NTH-Child is used to change the style of the first row of the table, as well as to highlight the color of all even rows (Fig. 1).

Last updated: 04/21/2016

A special group of pseudoclasss form pseudoclasss that allow you to choose certain child elements:

: first-child: represents an element that is the first child element

: Last-Child: Represents an item that is the last child element

: only-child: represents an element that is the only subsidiary in some container

: ONLY-OF-TYPE: Selects an item that is the only element of a certain type (tag) in some container

: NTH-child (n): represents a child element that has a specific N number, for example, the second child element

: NTH-Last-Child (N): Presents a child element that has a specific N number, starting from the end

: NTH-OF-TYPE (N): Selects a certain type of child element that has a specific number

: NTH-Last-OF-Type (N): Selects a child element of a certain type that has a specific number starting from the end

Pseudo class first-child

We use the first-child pseudoclass to select the first links in blocks:

Tablets

Smartphones

Selector style A: First-Child applies to the link if it is the first child element of any element.

And in the second block, the first element is a paragraph, so the style does not apply to any link.

Pseudolass Last-Child

We use the pseudolass Last-Child:

Smartphones

Tablets

Selector A: Last-Child Determines the style for references that are the last daughter elements.

In the first block, just the last subsidiary is a link. But in the second last child element, the paragraph is, so in the second block the style does not apply to any of the links.

ONLY-CHILD selector

Selector: Only-Child selects elements that are the only daughter elements in containers:

Title

Paragraphs with texts "Text1" and "Text4" are the only child elements in their external containers, so the style is applied to them - red font.

Pseudo-class Only-of-Type

The pseudo-class Only-of-Type selects an element that is the only element of a particular type in the container. For example, the only DIV element, with the elements of other types in the same container can be as much as you like.

Sole paragraph and spun element

Although the style is defined for DIV elements, it will not be applied, since the Body container contains two DIV elements, and not one. But in Body there is only one element P, so it will receive a stylization. And also in the container P there is only one SPAN element, so it will also be stylized.

NTH-Child's pseudo class

NTH-Child pseudo class allows you to stylize each second, the third element, only even or only odd items, etc.

For example, stylize even and odd table lines:

Smartphones

Samsung	Galaxy S7 EDGE	60000
Apple	iPhone SE	39000
Microsoft.	Lumia 650.	13500
Alcatel.	IDOL S4.	30000
Huawei.	P9	60000
HTC	HTC 10.	50000
Meizu.	Pro 6.	40000
Xiaomi.	MI5.	35000

To determine the style for odd items, the selector is transmitted to "ODD":

TR: NTH-CHILD (ODD) ()

To styling even elements in the selector, the value "Even" is transmitted:

TR: NTH-CHILD (Even) ()

Also in this selector we can transfer the number of the stylized element:

TR: NTH-CHILD (3) (Background-color: #bbb;)

In this case, the third line is stylized.

Another opportunity is the use of a substitute for a number, which is expressed by the letter N:

TR: NTH-CHILD (2N + 1) (Background-color: #bbb;)

Here the style is applied to each second odd string.

The number in front of n (in this case 2) represents the child element that will be allocated as follows. The number that comes after the plus sign is shown, from which element you need to start the selection, that is, +1 means that you need to start from the first child element.

Thus, in this case, the selection begins with the 1st element, and the following is released 2 * 1 + 1 \u003d 3rd element, hereinafter 2 * 2 + 1 \u003d 5th element and so on.

For example, if we want to allocate every third element, starting from the second, we could write:

TR: NTH-CHILD (3N + 2) (Background-color: #bbb;)

Pseudo-class: NTH-Last-child essentially provides the same functionality, only the countdown of elements is not from the beginning, but from the end:

TR: NTH-Last-Child (2) (background-color: #bbb; / * 2 line from the end, that is, the penultimate * /) tr: NTH-Last-Child (2n + 1) (background-color: #eee ; / * odd lines, starting from the end * /)

NTH-OF-Type pseudo class

Pseudo-class: NTH-OF-TYPE allows you to select a child element of a certain type at a specific number:

TR: NTH-OF-TYPE (2) (Background-Color: #bbb;)

Similarly, the NTH-Last-OF-Type pseudo class works, only now the countdown of the elements comes from the end:

TR: NTH-Last-of-Type (2N) (background-color: #bbb;)

I think many know about contextual selectors in CSS. They are used most often, however, experienced cameramen know perfectly well that sometimes contextual selectors make certain problems. This problem is related to the fact that in the structure of the element there can be many identical elements embedded in each other. And it is necessary to apply the style not for all nested elements, but only to the direct element directly. Here for this and used daughter selectors in CSS.

So that the problem becomes more understandable, let's give a small example. Let us have such HTML code:

And our task is to make red only " Second paragraph"If we write using the context selector:

Container P (
Color: Red;
}

That we will become red both paragraphs that we do not need at all. This task is very simply solved by daughter selectors in CSS:

Container\u003e P (
Color: Red;
}

Everything, now we have become red only " Second paragraph". Since this paragraph is directly subsidiary for .container. BUT " First paragraph"is a subsidiary for internal divThus, under the action of the child selector, it does not fall.

This task is so easily solved, however, there is one huge minus daughter selectors in CSS - They do not work in browsers Internet Explorer.. For this reason, their use is extremely undesirable. But if you suddenly meet somewhere, now you will know what this type of selectors means and what it does.

The main task of this selector follows from its name and consists in accessing the child element. Displays with the help of an elementary sign "\u003e", which binds a child element with a parent element. It is also worth noting that simple selectors are used in circulation. As an example, consider the following encoding:

Element\u003e UL (Padding- Top: 20px;)

This encoding means that an internal indent of 20 pixels from the top edge will be applied to the list that is invested in Element. The presence in this entry icon "\u003e" shows that the rule applies only to the lists of the first level of nesting.

Detailed analysis of the work selector of the child element

The selector of the element of the child has similar properties with the concept of the descendant selector. However, there is a characteristic feature that shows the principal difference between these operations. It lies in the fact that the effect of the descendant selector extends to absolutely all elements, while the child selector subordinates the styles of the position of the first level of classifications.

A more clearly appreciate the work of the subsidiary operator will help the following example:

Div\u003e R (Color: # FF0000; / * red * /)

< div> This string will have a default black text.< span> This line is repainted in red due to the fact that P is a daughter tag for the diva. < p> Again we see black letters.< span> Here we also see black characters, since for this span, the parent is tag.

This example confirms the work of the subsidiary operator according to the degree of nesting.

Restriction for the application of a subsidiary operator

It is worth noting that this operation is supported by all browsers other than the legendary Internet Explorer 6. I think there are few people using this browser, but if such unicumes are available, then for them there is a way out of the situation that will be described in a separate article.

Why apply

Programmers refer to selectors of child elements in cases where you need to assign your unique style with nested elements. Also, using this selector can reduce CSS volume, which will increase the readability of the document. As practice shows, this operation is most often referred to when creating drop-down menus.

A child element selector is also used to assign unique styles to elements whose parents are already known for previously. In other words:

Main\u003e Header ( / * Registration only applies to the main heter * / }

This example is fair in cases where the Header tag is used to highlight the titles of articles. In our case, we ask the design only the main heter, and do not hurt the secondary. This technique also avoids the use of extension identifiers, which in turn facilitates the weight of the CSS file and makes it more readable.

Summing up

Thus, the subsidiary operator can be applied not only for the design of the drop-down menus, but also for a small optimization of your Internet resource to work search robots.