Adjacent css selectors. Special selectors in CSS. Adjacent, child, contextual and tag attribute selectors. The attribute value ends with specific text
Description
Elements of a web page are called neighbors when they immediately follow each other in the document code.
Syntax
E + F (Description of style rules)
The plus sign (+) is used to control the style of neighboring elements, which is placed between the two selectors E and F. Spaces around the plus are optional. This style applies to the F element, but only if it is adjacent to and immediately after the E element. Let's look at some examples.
Lorem ipsum dolor sit amet.
Tag is a child of the tag
Because it is inside this container. Respectively
Acts as a parent .
Lorem ipsum dolor sit amet.
Tags and do not overlap and represent adjacent elements. The fact that they are located inside the container Doesn't affect their attitude. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
The tags are adjacent here and , and and ... Wherein and adjacent elements are not related due to the fact that there is a container between them .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
The result of this example is shown in Fig. 1.
Figure: 1. Red text color for adjacent selectors
Browsers
Internet Explorer 7 does not style if there is a comment (B + / * plus * / I) between the selectors.
Vlad Merzhevich
Elements of a web page are called neighbors when they immediately follow each other in the document code. Let's look at some 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 tags and do not overlap and represent adjacent elements. The fact that they are located inside the container Doesn't affect their attitude in any way. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
The tags are adjacent here and , and and ... Wherein and adjacent elements are not related due to the fact that there is a container between them .
The plus sign (+) is used to control the style of adjacent elements, which is placed between two selectors. The general syntax is as follows.
Selector 1 + Selector 2 (Description of style rules)
Spaces around the plus are not required, the style is 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 elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
The example result is shown in Fig. 11.1.
Figure: 11.1. Highlighting text with color using adjacent selectors
This example changes the color of the text for the contents of the container. when positioned 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 next door no, so no styling is applied to this container.
Let's look at a more practical example. It is often necessary to include various footnotes and notes in the text of an article. Usually a new style class is created for this purpose and applied to a paragraph, so you can easily change the appearance of the text. But we will go the other way and use neighboring selectors. To highlight comments, create a new class, call it sic, and apply it to the tag
... The first paragraph after such a heading is highlighted with the background color and indentation (example 11.2). The rest of the 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. Then we divide the desert into a series 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 simultaneously on two of them, the cage for fishing should be made of an increased area, namely 2L x 2W. Thanks to this, we will avoid mistakes when only half of the lion or, worse, only its tail is caught in the cage.
Important note
To simplify the calculations, the tail as a measurement error can be discarded and disregarded.
The result of this example is shown in Fig. 11.2.
Figure: 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 useful for those tags that are automatically indent in order to independently adjust the amount of padding. For example, if there are tags in a row
and , then the distance between them is easy to adjust just with the help of adjacent selectors. The situation is similar for consecutive tags. and
and
And also in other similar cases. Example 11.3 changes the amount of indentation between the specified tags in this manner.
Example 11.3. Indents 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 indents 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. What tags in this code are adjacent?
Sulfuric acid formula:H 2SO 4
AND
- and
- and
- and
- and
2. There is the following HTML code:
Fermat's Last Theorem
X n + Y n
\u003d Z n
where n is an integer\u003e 2
What text will be highlighted in red using the SUP + SUP (color: red;) style?
- Second "n"
- Second and third "n".
Good evening, dear colleagues, today we will study with you two additional selectorwhich are called child and sibling css selectors... To a greater extent, you can do without them, however, for your development they need to be learned, and sometimes applied so that they remain in your memory. Therefore, we will discuss which selectors are adjacent, and which children, and we will analyze with an example.
Child css selectors - elements that are located inside the parent element. An example of this can be as follows. We have a block containing a paragraph, another block and a picture. These three elements are children. If the child block also contains other elements, then they are no longer children of the first block, but are children of the block in which they are directly located. 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 have a paragraph followed by a tag span... Everything is pretty clear, but we just have to make out all this with real examples.
Text in a paragraph
Text in span
No longer child text in a paragraph
Using styles to add the same result for the tag span
Div \u003e span (
font-size: 200%;
}
p + span (
color: red;
}
The result of the code execution in both cases will be applied to the tag spansince 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 sibling selectors in CSS, and you just have to strengthen your knowledge in practice, see you soon!
The Neighbor Selector selects an element immediately behind another specified element in the document code. Let's take a piece of html code as an example.
The paragraph and in it fatty element, and behold inclined element.
There are three tags:
, and ... Tags and nested in a container
They are children of it. But in relation to each other, they are adjacent.
The syntax for the adjacent selector is the selector of the previous element, followed by the selector of the selected element. Let's make the adjacent selector work:
The paragraph and in it fatty element, and behold inclined element.
Here fatty and underlined elements, more inclined.
In the example, you can see that the sibling selector was triggered in the first paragraph. Here tags and go one after another. And in the second paragraph, the tag is used between them , now there are two other adjacent tag pairs: + and + .
An error in this case is the tag adjacent to the tag
Here tag is a child of the tag
And he, in turn, is the parent .
The example below won't work:
The paragraph and in it fatty element, and behold inclined element.
Here fatty and underlined elements, more inclined.
A more real-world example
Let's look at how the adjacent selector works with a more realistic example. In large articles containing multiple tagged sections
, it is desirable to increase the top margin (property margin-top). An indent of 30px will make the text more readable. But in case the tag comes right after , and this may be at the beginning of the article, the indention above the tag will be superfluous. You can solve this problem using an adjacent element selector.
, and this may be at the beginning of the article, the indention above the tag will be superfluous. You can solve this problem using an adjacent element selector.
Here is the html code for an example of how the neighbor selector works.
Hello!
H2 heading
H2 heading
The text of the paragraph is about incredible adventures.
H2 heading
The text of the paragraph is about incredible adventures.
H2 heading
The text of the paragraph is about incredible adventures.
Also, using the adjacent selector tool, it is convenient to adjust the indentation between the heading and the first paragraph of the section, in our example these are tags