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 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.
Neighboring 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!
CSS syntax is simple and you don't need a PhD in IT to understand it. However, it is one of the few popular languages that is not logical in the truest sense of the word. Unlike other web programming languages such as JavaScript and PHP, CSS does not solve problems using conventional logic. Algorithms like "if X, then do Y, otherwise do Z" or "select all Ys, then do X with them" cannot be implemented in a language like CSS. Simply put, it is a language made for design, a language for designers, not developers. Some of the experienced programmers I've worked with spent a lot of effort learning to master CSS for this very reason.
Learning CSS starts with classes and IDs, as well as usage. and # to directly designate elements. This is enough to build a fully functional website, but it is not a flexible enough solution in case of a complete design change. Let's take a look at an alternative approach to managing these hard-to-reach items.
Neighboring related combinator
Let's start with a selector that is convenient in complex situations - the adjacent related combinator. An adjacent related combinator is indicated by connecting two elements using the + sign:H1+p
This selects the next p-element located immediately after the h1-element in the DOM. Typographic theory suggests that we should use indents in paragraphs of text, but only if they follow another paragraph. In practice, this can be used to indent all paragraphs except the first:
p + p ( text-indent: 1em; )
This is much more convenient than highlighting the first paragraph using class="first". Three lines, no classes and full browser support. If you place img tags related to the content of the site inside p tags (as, in fact, you should do), you can simply move their left margins back using a negative value of -1em:
p + p img ( margin-left: -1em; )
Pretty simple, right? What if we want to select the first line of all paragraphs that come immediately after the headings, without changing all the other paragraphs? Again we can use the view class. A simple selector made from the adjacent compound combinator and a pseudo element will do the job:
h1 + p::first-line ( font-variant: small-caps; )
Note: The pseudo-element:first-line was adopted in CSS 2.1, but CSS 3 uses the notation:: to distinguish between pseudo-classes and pseudo-elements.
Hereditary combinator
A common markup protocol is to place sections in some named element in #page or #wrap: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 neighboring 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 And . Wherein 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. The general syntax is as follows.
Selector 1 + Selector 2 (Description of style rules)
The spaces around the plus are optional; the style in this notation 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 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
This example changes the text color for the contents of the container 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, let's create a new class, 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
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 2 SO 4
AND
- And
- And
- And
- And
2. The following HTML code is available:
Fermat's Last Theorem
X n+ Y n
= Z n
where n is an integer > 2
What text will be highlighted in red using the SUP + SUP ( color: red; ) style?
- Second "n"
- Second and third "n".
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 suggest you look at 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
