Great Theorem Fermat.

X. ^n. + Y. ^n.
\u003d Z. ^n.

where n is an integer\u003e 2

Which text is highlighted in red using the SUP + SUP style (Color: Red;)?

1. Second "n"
2. The second and third "N".

Hello, dear readers! Continue the topic CSS selectors and today I will try to explain what is neighboring CSS Selectors, as well as what role plays universal selector. Knowledge of the mechanism of using all types of CSS funds will achieve the optimal and compact content of the document, which describes the styles of the elements, which is one of the components of the successful promotion of its resource, so that in no case neglect the possibility of obtaining useful information about the concept of the selector and its all kinds of species.

If you remember and carefully follow the publications, many types of selectors have already been considered; ; . Once again I urge not to neglect the study of the foundations of CSS, as it will give you a lot of preferences in the future.

Universal selector

Now go directly to the essence of today's publication. As for the universal selector, it is quite simple, so I will not stop on it for a long time. Syntax of writing CSS rules, which uses the universal selector, the following:

Here is the operator "*" and means that we have a universal selector. It is used when it is necessary to set a single style for all items on the web page. Sometimes the universal selector specifies not necessarily. For example, recording. * Class i.CLASS in these cases is completely identical. Now necessarily an example. Typically, the most common is the definition of a single font, size and color, as well as the location of the usual text on the blog page or site.

* (Font-Family: Tahoma, Arial, Helvetica, Sans-Serif; / * Font for text * / Color: # 646464; / * Text color * / font-size: 75%; / * Text size * / text-align : left; / * Text location * /)

Thus, you can define the design of the text for all items that are located on the page. I note, for a given case, the result will be similar if instead of a universal selector use the name of the Body tag, which includes the tags of all elements.

Neighboring CSS selectors

Well, now a little more time will pay for neighboring selectors. Neighboring the elements of the web page when they are directly next to each other in the document code. At the same time, CSS styles syntax has this kind:

Now we will take the text paragraph defined by the P tag in which the B, I and BIG tags will be included as child elements, which define text formatting, respectively, the release of bold, italics and isolation by increasing the font:

This paragraph uses tag B., tag I., big tag.

And using the CSS and HTML editing tool, which is embedded in the latest versions of all popular browsers (,) and which is an analogue of the famous plugin for the Firefox () browser (), insert this paragraph to any place on an absolutely any web page (I did right on page of the previous article by the first paragraph). This means, for example, is called by simply pressing the F12 key. It can be used to practically fix the material headings "Basics of HTML" and "CSS textbook". So, I insert a piece of text in the form of the first paragraph:

This paragraph will be experimental and consider using its example. neighboring selectors. As I already said, tags B, I and BIG are subsidiaries for the tag of paragraph P, since they are all directly inside the P container. Here, the neighborings are tags B and I, as well as I and Big. Now apply CSS Rule for neighboring selectors:

B + I (Color: Red;) i + Big (Color: Green;)

After these styles are applied, the paragraph will look like this:

This is true for all webpage tags, which include elements B, I and BIG. Moreover, there must be B and I, I and BIG nearby, for other combinations, this CSS will not work. I think now it is clear to you how neighboring selectors apply when writing or editing a CSS document. Another very important note: if you have time to notice, then in the case of adjacent items, the specified style applies only to the second element.

An example with a paragraph, which was considered very visual and allows you to quickly understand the essence of neighboring selectors in CSS. However, in practice, other areas of applying selectors are commonly used. Say, very often in the body of the article it is necessary to include some piece of text, especially decorated, like that: footnotes, notes, etc.

For these purposes, a separate class usually create and apply it to the necessary paragraph. But a much more optimal way is the use of neighboring selectors. For example, on my blog there are styles created for registration of a conventional header H3.

H3 (font-size: 1.7em; / * font size * / text-align: center; / * text placement * / font-weight: normal; / * normal text design * / font-face: Tahoma, Arial, Helvetica, SANS-SERIF; / * Font style * / color: # 646464; / * Text color * /)

To highlight the title notes or footnotes, set a special class, say, PUT:

H3.PUT (Color: Red; / * Text color * / margin-left: 5px; / * retreat on the left * / margin-top: 0.5em; / * indent from above * / padding: 10px; / * fields around text * / Text-Align: Left; / * Location of text * /)

Now we use adjacent selectors to create a special style of a sentence paragraph, this paragraph will be placed directly under the title with the "H3.PUT" style:

H3.PUT + P (Background: # Ffefd5; / * Background color * / margin-left: 15px; / * retreat on the left * / margin-right: 120px; / * retreat on the right * / margin-top: 0.5em; / * Indent from above * / padding: 5px; / * fields around text * /)

Again, using the Google Chrome editing tool, with you all your ears (but it is worth it), enter the header for footnotes, not forgetting to put it for him by the PUT class:

Attention!

Then write the text of the footnote itself:

The materials presented in this publication are very important in terms of studying the foundations of CSS (cascading style tables)

After all these televitations, we get such a paragraph of footnotes on the web page (I remind you that this paragraph I inserted at the end of my article about my subsidiaries and contextual selectors):

Now on a blog or site when binding a "PUT" to any tag H3 will be charged such a footnote on the Web page. Moreover, it is decorated in a special way only the first paragraph after the H3 tag with "Class \u003d" Put "". But this is exactly what we achieved, right?

On this, let me finish today's manual, which contained an algorithm for the use of neighboring, as well as universal selectors. I hope that this article will fade you, dear readers subscribe to

Unlike adjacent, used less often. The main difference is that they should follow the other. To make it easier for you to learn this topic, I propose to disassemble this structure:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

As you probably guessed from the previous lesson, that tags 2, 3, 4, 5, 6 are contextual selectors for tag1. In turn, the neighboring selectors will be: tag2 and tag3, tag4 and tag5, But at the same time tag2. and tag4 are not adjacent. Style properties will be applied to the last element that you specify the next. You only need to follow the selection selection. The general syntax of writing is:

Selector1 + selector2 + ... + selectorN (Property1: value; property2: value; ... property: value)

Let's consider with you this example:

Title

Tag p. is a neighboring selector tagged h1.

The adjacent element selector selects the element located in the document code directly after another specified element. Let's take a piece of HTML code for example.

Paragraph and in it fatty element and here inclined element.

There are three tags:

, and . Tags and Nested in container

They are a subsidiary towards him. But in relation to each other they are neighboring.