Good evening, dear colleagues, today we will study with you two additional selector which are called child and sibling 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, we will discuss which selectors are adjacent, and which are 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
Span text
No longer child text in a paragraph
Using styles to 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 since it is a child of the tag div and next after the tag p... Therefore, the font became twice as large and red in color. 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 syntax of CSS is simple, and you don't need to have a Ph.D. 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 are not solved using ordinary logic. Algorithms like "if X then do Y, otherwise do Z" or "select all Y, then do X with them" cannot be implemented in a language like CSS. To put it simply, it is a language made for design, a language for designers, not developers. Some of the seasoned programmers I have worked with have spent a lot of effort learning CSS for this very reason.
Learning CSS starts with classes and IDs, as well as usage. and # to denote elements directly. This is enough to build a fully functional website, but it is not flexible enough in the event of a complete redesign. Let's take a look at an alternative approach to managing such hard-to-reach items.
Adjacent sibling combinator
Let's start with a selector that comes in handy in tricky situations - the adjacent sibling combinator. An adjacent sibling combinator is denoted by joining two elements using the + sign:H1 + p
This selects the next p-element immediately after the h1-element in the DOM. Typographic theory suggests that we should use indentation 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 with class = "first". Three lines, no classes, and full browser support. If you put img tags related to site content inside p tags (as you should), you can simply push their left margins back with a negative value of -1em:
p + p img (margin-left: -1em;)
Pretty simple, right? But what if we want to select the first line of all paragraphs that appear immediately after the headings, without changing all 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: first-line pseudo-element is adopted in CSS 2.1, CSS 3 uses the :: notation to distinguish between pseudo-classes and pseudo-elements.
Hereditary combinator
The usual markup protocol is to place sections in any named element in #page or #wrap:In previous chapters, we studied the relationship between tags in an HTML document, including looking at selectors child elements... Now it's time to get familiar with sibling selectors and sibling selectors.
Adjacent selectors
Adjacent selectors (also called adjoining) select elements on a web page that have a common parent and are adjacent to each other. The style is applied to the last element specified in the selector.
Example: let's say you need each paragraph to
Which comes first after the title
, had an italic font. This can be accomplished with a CSS code like this:
H1 + p (font-style: italic;)
When writing this rule, first of all, you need to specify the name of the first neighbor, then add the + symbol and the name of the second neighbor (the one to which we want to apply the style). Longer combinations can also be created. The scheme for writing a selector is as follows: selector1 + selector2 +… + selectorN () (the style is applied to selectorN).
Examples of writing:
/ * Indent from paragraph to picture 30px * / p + img (padding-top: 30px;) / * Green for the paragraph that follows h3 in conjunction with h2 * / h2 + h3 + p (color: green;)
Related selectors
Sibling selectors (other names: sibling, sibling) allow you to select elements of an HTML page that are related to each other (that is, have a common parent and are at the same level). Sister selectors are similar to neighboring selectors, but they differ in that the style is applied to all elements of the selected type, not just the first one. The tilde symbol ~ is used instead of the + sign.
Example: let's modify the previous task a little and imagine that you need to make italic font for all paragraphs
That come after the headline
... The CSS code will look like this:
H1 ~ p (font-style: italic;)
... and some HTML for an example:
Heading 1
Heading 2
Take a look at the HTML: the style will apply to all tags
Which follow after tag
and are before parent's closing tag ... In our version, there are 3 elements To which the style will be applied. Note that the tag
it will not interfere in any way. Also notice that in this case the style will not applied to that tag
Which is located over
and also to the tag
Having a different parent
.
conclusions
By using adjacent (adjacent) selectors, you can style an element when it immediately follows another element (or group of elements). This works with elements that are at the same level and have a common parent.
With related selectors, you can style all elements of a selected type when they immediately follow another element (or group of elements). This works with elements that are at the same level and have a common parent.
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 adjacent 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 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 elit.
Neighboring here are tags and , as well as and ... Wherein and adjacent elements do not belong due to the fact that there is a container between them
.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Adjacent selectors
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. one.
Rice. 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.
Hello dear readers! We continue the topic of CSS selectors and today I will try to explain in an accessible way what is adjacent CSS selectors and also what role does universal selector... Knowing the mechanism of using all types of CSS tools will allow you to achieve optimal and compact content of the document, which describes the styles of the elements, which is one of the components of the successful promotion of your resource, so in no case should you neglect the opportunity to get useful information about the concept of a selector and its various types.
If you remember and closely 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 preferences in the future.
Universal selector
Now let's go directly to the essence of today's publication. As for the universal selector, it is quite simple, so I will not 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 you need to install uniform style for all elements on the webpage. Sometimes a universal selector is optional. For example, the notation. * Class and .class are exactly the same in these cases. Now an example is obligatory. Usually the most common is to define a uniform font, size and color, and the location 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 layout * /)
In this way, you can determine the appearance of the text for all elements that are located on the page. Note that for this case, the result will be the same if instead of the universal selector you use the name of the body tag, which includes the tags of all elements.
Adjacent CSS selectors
Well, now let's devote a little more time to neighboring selectors. Web page elements are adjacent when they are directly adjacent to each other in the document code. In this case, the syntax of CSS styles looks like this:
Now let's take a paragraph of text defined by the p tag, which will include b, i and big tags as children, which determine the formatting of the text, respectively, bold, italic, and highlight by increasing the font:
This paragraph uses tag b, tag i, big tag.
And with the CSS and HTML editing tool that is built into newest versions of all popular browsers(,) and which is analogous to the famous plugin for Firefox browser(), insert this paragraph anywhere on absolutely any web page (I did it right on the page of the previous article with the first paragraph). This tool, for example, in Chrome is invoked by simply pressing the F12 key. It can be used to practice the tutorial on 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, since 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 the 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 tags on a web page that include the b, i, and big elements. Moreover, b and i, i and big must be next to them, for other combinations this CSS rule will not work. I think it is now clear to you how adjacent selectors are applied when writing or editing a CSS document. Another very important note: if you already noticed, in the case of adjacent elements, the specified style is applied only to the second element.
The paragraph example, which was considered very descriptive 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 a piece of text in the body of an article, especially a piece of text such as footnotes, notes, etc.
For these purposes, it is common to 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 heading.
H3 (font-size: 1.7em; / * Font size * / text-align: center; / * Text placement * / font-weight: normal; / * Normal text style * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Font style * / color: # 646464; / * Text color * /)
To highlight the heading of a note or footnote, let's define a special class, say, put:
H3.put (color: red; / * Text color * / margin-left: 5px; / * Left margin * / margin-top: 0.5em; / * Top margin * / padding: 10px; / * Text margin * / text-align: left; / * Text position * /)
Now, let's use the adjacent selectors to create a custom footnote paragraph style, this paragraph will be placed directly below the heading with the “h3.put” style:
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, with which I buzzed all your ears (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 material presented in this publication is very important in terms of learning the basics of CSS (Cascading Style Sheets)
.
After all these gestures, we get such a paragraph of the footnote on the web page (I remind you that I inserted this paragraph at the end of my previous article on child and context selectors):
Now on a blog or website, when binding 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 decorated 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 neighboring, as well as universal selectors, was given. I hope that this article will encourage you, dear readers, to subscribe to
To which the style will be applied. Note that the tag
it will not interfere in any way. Also notice that in this case the style will not applied to that tag
Which is located over
and also to the tag
Having a different parent
conclusions
By using adjacent (adjacent) selectors, you can style an element when it immediately follows another element (or group of elements). This works with elements that are at the same level and have a common parent.
With related selectors, you can style all elements of a selected type when they immediately follow another element (or group of elements). This works with elements that are at the same level and have a common parent.
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 adjacent 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 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 elit.
Neighboring here are tags and , as well as and ... Wherein and adjacent elements do not belong 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. one.
Rice. 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.
Hello dear readers! We continue the topic of CSS selectors and today I will try to explain in an accessible way what is adjacent CSS selectors and also what role does universal selector... Knowing the mechanism of using all types of CSS tools will allow you to achieve optimal and compact content of the document, which describes the styles of the elements, which is one of the components of the successful promotion of your resource, so in no case should you neglect the opportunity to get useful information about the concept of a selector and its various types.
If you remember and closely 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 preferences in the future.
Universal selector
Now let's go directly to the essence of today's publication. As for the universal selector, it is quite simple, so I will not 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 you need to install uniform style for all elements on the webpage. Sometimes a universal selector is optional. For example, the notation. * Class and .class are exactly the same in these cases. Now an example is obligatory. Usually the most common is to define a uniform font, size and color, and the location 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 layout * /)
In this way, you can determine the appearance of the text for all elements that are located on the page. Note that for this case, the result will be the same if instead of the universal selector you use the name of the body tag, which includes the tags of all elements.
Adjacent CSS selectors
Well, now let's devote a little more time to neighboring selectors. Web page elements are adjacent when they are directly adjacent to each other in the document code. In this case, the syntax of CSS styles looks like this:
Now let's take a paragraph of text defined by the p tag, which will include b, i and big tags as children, which determine the formatting of the text, respectively, bold, italic, and highlight by increasing the font:
This paragraph uses tag b, tag i, big tag.
And with the CSS and HTML editing tool that is built into newest versions of all popular browsers(,) and which is analogous to the famous plugin for Firefox browser(), insert this paragraph anywhere on absolutely any web page (I did it right on the page of the previous article with the first paragraph). This tool, for example, in Chrome is invoked by simply pressing the F12 key. It can be used to practice the tutorial on 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, since 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 the 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 tags on a web page that include the b, i, and big elements. Moreover, b and i, i and big must be next to them, for other combinations this CSS rule will not work. I think it is now clear to you how adjacent selectors are applied when writing or editing a CSS document. Another very important note: if you already noticed, in the case of adjacent elements, the specified style is applied only to the second element.
The paragraph example, which was considered very descriptive 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 a piece of text in the body of an article, especially a piece of text such as footnotes, notes, etc.
For these purposes, it is common to 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 heading.
H3 (font-size: 1.7em; / * Font size * / text-align: center; / * Text placement * / font-weight: normal; / * Normal text style * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Font style * / color: # 646464; / * Text color * /)
To highlight the heading of a note or footnote, let's define a special class, say, put:
H3.put (color: red; / * Text color * / margin-left: 5px; / * Left margin * / margin-top: 0.5em; / * Top margin * / padding: 10px; / * Text margin * / text-align: left; / * Text position * /)
Now, let's use the adjacent selectors to create a custom footnote paragraph style, this paragraph will be placed directly below the heading with the “h3.put” style:
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, with which I buzzed all your ears (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 material presented in this publication is very important in terms of learning the basics of CSS (Cascading Style Sheets)
.After all these gestures, we get such a paragraph of the footnote on the web page (I remind you that I inserted this paragraph at the end of my previous article on child and context selectors):
Now on a blog or website, when binding 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 decorated 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 neighboring, as well as universal selectors, was given. I hope that this article will encourage you, dear readers, to subscribe to
