The example below will not work:

The paragraph and in it fatty element, and here it is inclined element.

Here fatty And emphasized elements, more inclined.

More real example

Let's look at how the adjacent selector works using a more realistic example. In large articles containing several sections marked with tags

, it is advisable to increase the top margin (margin-top property). An indentation of 30px will make the text readable. But if the tag

comes right after

, and this could be at the beginning of the article, the top indent above the tag

will be redundant. This problem can be solved using an adjacent element selector.

Here is the html code with an example of how the adjacent element selector works.

Hello!

Heading h2

Heading h2

The text of the paragraph is about incredible adventures.

Heading h2

The text of the paragraph is about incredible adventures.

Heading h2

The text of the paragraph is about incredible adventures.

Also, using the adjacent selector tool, it is convenient to adjust the indent between the heading and the first paragraph of the section, in our example these are tags

And

It is also worth noting that to reduce indentation it is convenient to use negative values.

Hello!

Heading h2

The text of the paragraph is about incredible adventures.

Heading h2

The text of the paragraph is about incredible adventures.

Heading h2

The text of the paragraph is about incredible adventures.

Heading h2

The text of the paragraph is about incredible adventures.

Now an example of how to use an adjacent selector to select all elements of the list except the first one.

• List item #1.
• List item #2.
• List item #3.
• List item #4.

This is what will happen as a result of this example:

Figure 1. Example No. 5 at work.

Vlad Merzhevich

Elements of a web page are called adjacent when they immediately follow each other in the document code. Let's look at a few examples of element relationships.

Lorem ipsum dolor sit amet.

In this example the tag is a child of the tag

Because it is inside this container. Respectively

Acts as a parent .

Lorem ipsum dolor sit amet.

Here are the tags And do not overlap in any way and represent adjacent elements. The fact that they are located inside the container

Doesn't affect their attitude at all.

Lorem ipsum dolor sit amet, consectetuer adipiscing elite.

Neighboring tags here are And , and also And . At the same time And adjacent elements are not treated because there is a container between them .

To control the style of adjacent elements, use the plus symbol (+) between two selectors. General syntax next.

Selector 1 + Selector 2 (Description of style rules)

The spaces around the plus are optional; the style applied to Selector 2, but only if it is adjacent to Selector 1 and immediately follows it.

Example 11.1 shows the structure of how tags interact with each other.

Example 11.1. Using adjacent selectors

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elite.

Lorem ipsum dolor sit amet, consectetuer adipiscing elite.

The result of the example is shown in Fig. 11.1.

Rice. 11.1. Highlighting text with color using adjacent selectors

IN in this example the text color for the contents of the container changes when it is located immediately after the container . In the first paragraph, this situation is implemented, so the word “consectetuer” is displayed in red in the browser. In the second paragraph, although there is a tag , but no tag in the neighborhood no, so no style is applied to this container.

Let's look at a more practical example. It often becomes necessary to include various footnotes and notes in the text of an article. Typically, a new style class is created for this purpose and applied to the paragraph, in this way you can easily change the appearance of the text. But we'll go the other way and use adjacent selectors. To highlight comments, we will create new class, let's call it sic and apply it to the tag

. The first paragraph after such a heading is highlighted with a background color and indentation (example 11.2). The appearance of the remaining paragraphs will remain unchanged.

Example 11.2. Change paragraph style

HTML5 CSS 2.1 IE Cr Op Sa Fx

Methods for catching a lion in the desert

Sequential search method

Let the lion have overall dimensions L x W x H, where L is the length of the lion from the tip of the nose to the brush of the tail, W is the width of the lion, and H is its height. After which we divide the desert into a number of elementary rectangles, the size of which coincides with the width and length of the lion. Considering that the lion may not be strictly in a given area, but at the same time in two of them, the cage for catching should be made of a larger area, namely 2L x 2W. Thanks to this, we will avoid the mistake of only half the lion being caught in the cage, or, worse, only its tail.

Important Note

To simplify calculations, the tail can be discarded and not taken into account as a measurement error.

The result of this example is shown in Fig. 11.2.

Rice. 11.2. Changing the appearance of a paragraph by using adjacent selectors

In this example, the text is formatted using paragraphs (tag

), but writing H2.sic + P sets the style only for the first paragraph following the tag

, which has a class named sic added.

Adjacent selectors are convenient to use for those tags to which indents are automatically added in order to independently adjust the amount of indentation. For example, if there are tags in a row

And

, then the distance between them can be easily adjusted using adjacent selectors. The situation is similar for consecutive tags.

And

And also in other similar cases. Example 11.3 changes the amount of space between specified tags in this manner.

Example 11.3. Spaces between headings and text

HTML5 CSS 2.1 IE Cr Op Sa Fx

Heading 1

Heading 2

Paragraph!

Since when using adjacent selectors the style is applied only to the second element, the size of the margins is reduced by including a negative value for the margin-top property. In this case, the text rises up, closer to the previous element.

Questions to check

1. Which tags in this code are adjacent?

Sulfuric acid formula:H ₂ SO ₄

1. AND

2. And
3. And
4. _And
5. And

2. The following HTML code is available:

Fermat's Last Theorem

X ⁿ+Y ⁿ
= Z ⁿ

where n is an integer > 2

What text will be highlighted in red using the SUP + SUP ( color: red; ) style?

1. Second "n"
2. Second and third "n".

Adjacent CSS Selectors

CSS adjacent selectors, or sibling selectors as they are also called, allow you to apply styles to an element in cases where it appears before certain element, that is, the elements in this case must be at the same nesting level. Neighboring selectors are also composite and are made up of simple selectors (classes, identifiers, etc.).

So that you clearly understand what adjacent elements are, let's look at a familiar example again, just slightly modified.

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

In this example there are only two pairs of adjacent elements - these are<тег2>And<тег3>, and also<тег3>And<тег5>, All. That is<тег2>And<тег5>are no longer neighbors in relation to each other, since between them there is<тег3> .

Adjacent selectors are formed from two or more regular selectors separated by a “+” (plus) sign, where the very first element in the code is indicated first, then the one that comes after it, then the one that comes immediately after the second, and so on. As usual, styles are applied to the element whose selector is last in the list. General syntax.

selector1 + selector2 ( property: value; property: value; ...)

Spaces on both sides of the "+" sign can be placed or not, as desired.

An example of using adjacent selectors in CSS

Heading

Text. Strong. Text. Em.

Text. Em. Text. Strong.

Text. Em. Text. Strong.

Result in browser

Heading

Text. Strong. Text. Em.

Text. Em. Text. Strong.

Text. Em. Text. Strong.

In this example, only the first paragraph with red text and only the second paragraph are underlined because no other elements match the style rules. In particular, the content of the element in this case will not be green, since it is separated from the title by not one, but two paragraphs. By the way, as you can see, in the second style the adjacent and child selectors were specified at once. So I decided to remind you once again that selectors different types can be freely combined.

Browser Internet Explorer 6.0 does not understand adjacent selectors (as well as child ones). Remember this.

Homework.

1. Create a regular two-column layout with a menu on the page. Let the menu list items have image markers.
2. Make it so that if after the title tag

1 Jun 2015

In contrast, neighboring ones are used less often. The main difference is that they must follow the other. To make it easier for you to understand this topic, I propose to parse this structure:

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

As you probably guessed from the previous lesson, tags 2, 3, 4, 5, 6 are context selectors for tag1. In turn, neighboring selectors will be: tag2 and tag3, tag4 and tag5, but at the same time tag2 And tag4 are not adjacent. The style properties will be applied to the last element that you specify as adjacent. You just have to follow the order of the selectors. The general writing syntax is:

Selector1 + selector2+ ...+selectorN ( property1: value; property2: value; ... propertyN: value)

Let's look at this example:

Heading

Tag p is an adjacent selector to the tag h1

This text should be green

Good evening dear colleagues, today we will study two additional selector which are called child and adjacent css selectors. To a greater extent, you can do without them, however, for your development you need to learn them and sometimes apply them so that they remain in your memory. Therefore, let's discuss what selectors are neighboring, and which ones are children and we will analyze them using an example.
Child css selectors- elements that are located inside the parent element. An example of this could be as follows. We have a block containing a paragraph, another block and a picture. These three elements are the children. If there are also other elements in a child block, then they are no longer children of the first block, but are children of the block in which they are located directly. I hope you get the point.
Adjacent CSS Selectors- elements located one after another in the document code. An example of this is this. We has a paragraph and a following tag span. Everything is quite clear, and we just have to look at it all using real examples.

Text in paragraph

Text in span

No longer child text in paragraph

Using styles, we will add the same result for the tag span

Div >span (
font-size: 200%;
}

p +span(
color : red;
}

The result of executing the code in both cases will be applied to the tag span, because it is a child of the tag div and next after the tag p. Therefore, the font became twice as large and red. Now we have completely dealt with child and neighbor selectors in CSS, and all you have to do is strengthen your knowledge in practice, see you soon!