Home-Programs-Adjacent CSS selectors, universal selector and their uses. DOM Techniques: Parent, Child, and Neighbor Elements

Adjacent CSS selectors, universal selector and their uses. DOM Techniques: Parent, Child, and Neighbor Elements

An adjacent element selector selects an element that is located directly behind another element in the document code given element. Let's take a piece of html code as an example.

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

There are three tags:

, And . Tags And nested in a container

They are children of him. But in relation to each other they are neighboring.

The syntax of an adjacent selector is: the selector of the previous element, followed by a "+" sign, followed by the selector of the element being selected. Let's work the adjacent selector:

Adjacent selector in CSS.

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

Here fatty And emphasized elements, more inclined.



In the example you can see that the adjacent element selector was triggered in the first paragraph. Here are the tags And go one after another. And in the second paragraph, the tag is used between them , now there are two other adjacent pairs of tags: + And + .

An error in this case would be the tag adjacent to the tag

Tag here is a child of the tag

And he, in turn, is a parent .

The example below will not work:

Adjacent selector in CSS.

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 take a closer look at how the neighboring selector works. real 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.

Adjacent selector in CSS

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.

Adjacent selector in CSS

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.

Adjacent selector in CSS

  • 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 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 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. 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

Adjacent selectors

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. Usually, for this purpose, you create a new style class and apply it 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

Change paragraph style

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 tassel 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

Adjacent selectors

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

  1. AND

  2. And
  3. And
  4. And
  5. 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?

  1. Second "n"
  2. Second and third "n".
July 12, 2011 at 01:14 pm

Semantics for CSS selectors and combinators

  • CSS
  • Translation

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 problems can't be solved with help ordinary 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 the selector, which is convenient in difficult situations, - from a neighboring 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 support browsers. 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 an 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:

Hello, dear readers! Let's continue CSS theme selectors and today I will try to clearly explain what 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 studying CSS Basics, as this will give you a lot of benefits 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 install uniform 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 definition is single font, size and color, as well as the 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. I note for this case the result will be similar if you use the name instead of the universal selector 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, which will include the b, i and big tags as child elements, defining the formatting of the text, respectively, bold, italic and enlarged 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 everyone 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 CSS editing 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 right 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 style for the footnote paragraph, 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 tables styles)

.

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



Related publications:


2024, leally.ru - Your guide in the world of computers and the Internet