Css adjacent elements. CSS Tutorial - CSS Adjacent Selectors
Hello, dear readers! We continue the topic of CSS selectors and today I will try to clearly explain what they are adjacent CSS selectors, and also what role does it play? universal selector. Knowledge of the mechanism of use of all types CSS tools will allow you to achieve optimal and compact content of the document, which describes the styles of elements, which is one of the components of successful promotion of your resource, so in no case neglect the opportunity to get useful information about the concept of a selector and its various types.
If you remember and carefully follow the publications, many types of selectors have already been considered; ; . Once again, I urge you not to neglect learning the basics of CSS, as this will give you a lot of advantages in the future.
Universal selector
Now let's move directly to the essence of today's publication. As for the universal selector, it’s quite simple, so I won’t dwell on it for a long time. The syntax for writing a CSS rule that uses a universal selector is as follows:
Here the “*” operator means that we have a universal selector. It is used when it is necessary to set a single style for all elements on a web page. Sometimes a universal selector is not necessary. For example, the entry .*class and .class are completely identical in these cases. Now for sure an example. Typically, the most common is to define a consistent font, size and color, and placement of regular text on a blog or website page.
* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* Text font */ color: #646464; /* Text color */ font-size: 75%; /* Text size */ text-align : left; /* Text location */ )
This way you can define the text design for all elements that are located on the page. Let me note that in this case the result will be similar if, instead of a universal selector, you use the name of the body tag, which includes the tags of all elements.
Adjacent CSS Selectors
Well, now let’s spend a little more time on the neighboring selectors. Elements on a web page are defined as adjacent when they appear directly next to each other in the document code. In this case the syntax CSS styles looks like this:
Now take a paragraph of text defined by the p tag, in which as child elements will include tags b, i and big, which determine the formatting of the text, respectively, bold, italic and highlighting by increasing the font:
This paragraph uses tag b, tag i, big tag.
And with the help of the CSS and HTML editing tool that is built into latest versions all popular browsers (,) and which is an analogue of the famous plugin for Firefox browser(), insert this paragraph anywhere on absolutely any web page (I did this right on the page of the previous article as the first paragraph). This tool, for example, in Chrome is called by simply pressing the F12 key. It can be used to practically consolidate the material in the headings " HTML Basics" and "CSS Tutorial". So, I insert a piece of text as the first paragraph:
This paragraph will be experimental and using its example we will consider the application adjacent selectors. As I said, the b, i, and big tags are children of the p paragraph tag because they are all directly inside the p container. Here the adjacent tags are b and i, as well as i and big. Now let's apply CSS rule for adjacent 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 web page tags that contain the b, i, and big elements. Moreover, b and i, i and big must be nearby; for other combinations this CSS rule will not work. I think it's now clear to you how adjacent selectors are used when writing or editing CSS document. Another very important note: if you have noticed, in the case of adjacent elements, the specified style is applied only to the second element.
The example with a paragraph that was discussed is very clear and allows you to quickly understand the essence of adjacent selectors in CSS. However, in practice other areas of application of adjacent selectors are usually used. For example, very often it is necessary to include some piece of text in the body of an article, especially formatted, such as footnotes, notes, etc.
For these purposes, they usually create a separate class and apply it to the desired paragraph. But a much more optimal way is to use adjacent selectors. For example, on my blog there are styles created to style a regular h3 header.
H3 ( font-size: 1.7em; /* Font size */ text-align: center; /* Text placement */ font-weight: normal; /* Normal text weight */ font-family: Tahoma, Arial, Helvetica, sans-serif; /* Font style */ color: #646464; /* Text color */ )
To highlight the title of a note or footnote, let's define a special class, say put:
H3.put ( color: red; /* Text color */ margin-left: 5px; /* Left padding */ margin-top: 0.5em; /* Top padding */ padding: 10px; /* Margins around text */ text-align: left; /* Text location */ )
Now let's use the adjacent selectors to create a special footnote paragraph style, this paragraph will be placed directly below the heading with the style "h3.put":
H3.put+p ( background: #ffefd5; /* Background color */ margin-left: 15px; /* Left padding */ margin-right: 120px; /* Right padding */ margin-top: 0.5em; /* Top padding */ padding: 5px; /* Margins around text */ )
Using the editing tool again Google Chrome, which I’ve been buzzing all your ears with (but it’s worth it), enter the title for the footnote, not forgetting to put the put class for it:
Attention!
Then we write the text of the footnote itself:
The materials presented in this publication are very important in terms of learning the basics of CSS (Cascading Style Sheets)
.After all these movements, we get the following footnote paragraph on the web page (I remind you that I inserted this paragraph at the end of my previous article about child and context selectors):
Now on a blog or website, when you bind the “put” class to any h3 tag, such a footnote will appear on the web page. Moreover, only the first paragraph after the h3 tag with “class=“put”” will be formatted in a special way. But that’s exactly what we wanted, right?
With this, let me finish today’s manual, in which an algorithm for using adjacent and also universal selectors was given. I hope that this article will encourage you, dear readers, to subscribe to
Description
Elements of a web page are called adjacent when they immediately follow each other in the document code.
Syntax
E + F (Description of style rules)
To control the style of adjacent elements, use the plus symbol (+), which is placed between the two selectors E and F. Spaces around the plus are optional. This style is applied to element F, but only if it is adjacent to element E and immediately follows it. Let's look at a few 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 in any way 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 elite.
Neighboring tags here are And , and And . Wherein And adjacent elements are not treated because there is a container between them .
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 this example is shown in Fig. 1.
Rice. 1. Red text color for adjacent selectors
Browsers
Browser Internet Explorer 7 does not apply style if there is a comment between the selectors (B + /* plus */ I ).
Adjacent CSS Selectors
Neighboring CSS 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<тег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.
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.
Internet Explorer 6.0 does not understand adjacent selectors (or child selectors). Remember this.
Homework.
- Create a regular one on the page two column layout with menu. Let the menu list items have image markers.
- Make it so that if after the title tag
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 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
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, 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. Available following code HTML:
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".
