Hello, dear readers! Continuing CSS theme I want to bring to your attention selectors description of child and context selectors, as well as their comparative analysis, because according to the logic of application they are very similar, although they have some differences.

In my publications I dwelled in some detail on various types CSS selectors: ; and . By the way, in the last article, where we discussed different types 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 Google tool Chrome(). Such editing tools have latest modifications everyone popular browsers, including Firebug plugin for Firefox().

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 Google Chrome or Mozilla Firefox(). Now I’ll present the contents of the p tag, using which we will study as an example child and contextual CSS selectors:

This paragraph includes em and strong formatting tags that highlight text bold And italics.

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:

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.

A child element is an element that is located directly inside its parent.. Before proceeding directly to the topic, I will provide a picture that reflects the hierarchy of tags in HTML document using the example of the paragraph whose text is given above and which we will analyze today:

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 child element in relation to . At the same time, the strong tag is not a child of the div, since it is located in the p container.

Child CSS selector

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

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> em (color: green;)

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 green color.

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.

Contextual CSS selector

It's time to figure it out what is contextual CSS selector . 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.

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:

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 em (color: green;)

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.

Let's look at another example of how contextual and child selectors interact with our paragraph. Let's write down the following CSS rules for child and context selector:

Div em (color: red;) p> em (color: green;)

After this, our paragraph takes on the following design:

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 .

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.

The thing is, in CSS there is a law of precedence for CSS properties, located below. That is, in this case, the child selector rule is located lower in the document than CSS styles, 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.

is an element intended for the type of future document (in particular HTML and XHTML). The abbreviation DTD means (document type definition) a description of the document type. This element is necessary so that browsers can understand how they should see and display the future document or web page.
On at this stage for web development there are several types of element. Below in table No. 1, several main types of this element and their brief description are provided.

Table No. 1

Let's look at the structure of a line with an element in order.

Top-level element][Publicity]"[Registration] //[Organization]//[Type][Name]//[Language]" "">

- type of the future document.

Top level element — indicates the top-level element in the document, for HTML this is a tag .

Publicity— the object is a public resource (PUBLIC value) or a system resource (SYSTEM value), for example, such as a local file. For HTML/XHTML the value is PUBLIC.

Registration — reports that the DTD developer is registered with the International Organization for Standardization (ISO). Takes one of two values: plus (+) - the developer is registered with ISO and - (minus) - the developer is not registered. For W3C the value is set to “-”.

Organization — the unique name of the organization that developed the DTD. Officially HTML/XHTML is published by the W3C, and this is the name written in.

Type— type of document being described. For HTML/XHTML the value is specified by the DTD.

Name— a unique document name to describe the DTD.

Language— the language in which the text is written to describe the object. Contains two letters, written in uppercase. For an HTML/XHTML document, indicate English language(EN).

URL— address of the document with DTD.

Here, perhaps, is the basic principle, devices and actions of this element ..
Closing tag for this elementnot required.
As an example givenHTML 4.01: