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 for using all types of CSS tools will allow you to achieve optimal and compact content of the document where element styles are described, which is one of the components of successful promotion of your resource, so in no case neglect the opportunity to obtain 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 of 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 using the CSS and HTML editing tool, which is built into the latest versions of all popular browsers (,) and which is an analogue of the famous Firefox browser plugin (), we will insert this paragraph anywhere on absolutely any web page (I did it right on page of the previous article, first paragraph). This tool, for example, in Chrome is called by simply pressing the F12 key. It can be used for practical reinforcement of the material in the “HTML Basics” and “CSS Tutorial” sections. 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 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 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 a 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 */ )

Again using the Google Chrome editing tool, which I've been buzzing you with (but it's worth it), we 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

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 a certain element in the HTML code, 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 after it, then the one 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 of different types can be freely combined.

Internet Explorer 6.0 does not understand adjacent selectors (or child selectors). Remember this.

Homework.

1. Create a regular two-column layout with a menu on the page. Let the menu list items have image markers.
2. Make it so that if after the title tag

Greetings, dear readers. In previous articles, we studied mainly CSS style attributes. There are a lot of them. Some set the font parameters, others the background parameters, and still others the parameters for indents and frames.

In this article we will talk about style selectors. In one of the articles we already touched upon. Today we’ll look at several more types of selectors that do not explicitly bind a style rule to a web page element. These are so-called special selectors. There are several types of them.

Combinators in CSS (Adjacent, Child and Context Selectors)

Combinators are a type of CSS selectors that bind a style rule to a web page element based on its location relative to other elements.

First combinator symbol plus(+) or adjacent selector. Plus is set between two selectors:

<селектор 1> + <селектор 2> { <стиль> }

The style in this case is applied to selector 2, but only if it is adjacent to selector 1 and comes right after it. Let's look at an example:

strong + i (

}
...

This is normal text. This is bold text, plain text, red text

This is normal text. This is bold text, plain text, and this is normal text.

Result:

The style described in the example will be applied only to the first text enclosed in the tag , because it comes immediately after the tag .

Combinator tilde(~) also applies to adjacent selectors, but this time there may be other elements between them. In this case, both selectors must be nested in the same parent tag:

<селектор 1> ~ <селектор 2> { <стиль> }

The style will be applied to selector 2 which should follow selector 1. Consider an example:

strong~i(
color:red; /* Red text color */
}
...

This is normal text. This is bold text, plain text, red text the adjacent selector rule applied to it.

This is normal text. This is bold text, plain text, and this is red text.

Result:

As you can see, this time the style rule worked for both texts enclosed in the tag , despite the fact that in the second case between the tag And worth the tag .

Combinator > refers to child selectors. Allows you to bind CSS style to a web page element that is directly nested within another element:

<селектор 1> > <селектор 2> { <стиль> }

Style will be tied to selector 2, which is directly nested in selector 1.

div > strong (

}
...

This is normal text. This is bold italic text.

This is normal text. And this is regular bold text.

And the result:

As you can see in the figure, the style rule only affected the first tag , which is directly nested within the tag

. And the immediate parent of the second tag is the tag

, so the rule does not apply to him.

Next we'll look at context selector<пробел> . It allows you to bind a CSS style to an element nested within another element, and there can be any level of nesting:

<селектор 1> <селектор 2> { <стиль> }

The style will be applied to selector 2, if it is somehow nested in selector 1.

Let's look at the previous example, only when describing a CSS rule we use the context selector:

div strong(
font-style: italic /* Italic */
}
...

This is normal text. This is bold italic text.

This is normal text. And this is also italic bold text.

Plain text and just bold text

Result:

As you can see, this time the rule affected both tags , even one that is nested in a container

and into a paragraph

. To tag , which is simply nested within a paragraph

The css rule doesn't work at all.

Selectors by tag attributes

Attribute selectors are special selectors that bind a style to an element based on whether it contains a certain attribute or has a certain value. There are several options for using such selectors.

1. Simple attribute selector

Looks like:

<селектор>[<имя атрибута тега>] { <стиль> }

And binds the style to those elements within which the specified attribute is added. For example:

strong(
color:red;
}
...

Automobile this is a mechanical motor trackless road vehicle with at least 4 wheels.

Result:

In the picture you can see that the css rule (red text color) is applied to the element strong, to which the attribute is added title.

2. Attribute selector with value

The syntax for this selector is as follows:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Binds style to elements whose tags have an attribute with the specified name And meaning. Example:

a(
color:red;
font-size:150%;
}
...
.ru" target="_blank">Link in new window

Result:

As you can see, both elements of the hyperlink type have the attribute target, but the css rule that enlarges the link text by one and a half times and changes its color to red is applied to the tag whose attribute target has the meaning "_blank".

3. One of several attribute values

Some attribute values ​​may be separated by spaces, such as class names. To set a style rule when the required value is present in the list of attribute values, use the following selector:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

The style is applied if the attribute has the required value or is part of a space-separated list of values. For example:

{
color:red;
font-size:150%;
}
...

Our phone: 777-77-77

Our address: Moscow st. Sovetskaya 5

You will get the following result:

The rule applies to an element whose attribute values ​​include: class there is a meaning tel.

4. Hyphen in attribute value

A hyphen is allowed in identifier and class values. To bind a style to elements whose attribute values ​​may contain a hyphen, you can use the following construction:

[attribute|="value"] ( style )
Selector[attribute|="value"] ( style )

The style is applied to those elements whose attribute value begins with the specified value followed by a hyphen. For example:

{
color:red;
font-size:150%;
}
...

• Paragraph 1


• Point 2


• Point 3


• Point 4

Result:

In the example, the style rule applies only to those list elements whose class name begins with value "menu- „.

5. The attribute value starts with specific text

This selector sets the style for an element if the tag attribute value begins with certain value. There may be two options:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

In the first case style applies to all elements whose tags have an attribute with the specified name and a value starting with the specified substrings. In the second case, the same thing, only to certain elements specified in main selector. Example:

a(
color:green;
font-weight:bold;
}
...

Result:

The example shows how to display external links and internal links differently. External links always start with the line “http://”. Therefore, in the selector we indicate that the style will be applied only to links that have the attribute href starts with meaning http://.

6. The attribute value ends with certain text

Binds a style to elements whose attribute value ends with the specified text. Has the following syntax:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

In the first case style applies to all elements that have attribute with the specified name and has a meaning ending with the specified substring. In the second case, the same thing, only to the indicated selectors. In this way, for example, you can display various formats graphic images. For example:

IMG (
border: 5px solid red;
}
...

GIF image

Picture format png

Result:

In the example, all images with a gif extension will be displayed with a red border five pixels thick.

7. The attribute value contains the specified string

This selector binds a style to tags whose attribute value contains specific text. Syntax:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Style binds to elements that have attribute With specified name and its value contains the specified substring. For example:

IMG (
border: 5px solid red;
}
...

Picture from the gallery folder

Picture from another folder

Result:

In the example, the style is applied to pictures that are loaded from the folder "gallery".

That's all about attribute selectors. All of the above methods can be combined with each other:

Selector[attribute1="value1"][attribute2="value2"] ( style )

In addition, let me remind you about special CSS selectors:

• using the symbols “+” and “~” are formed;
• the ">" symbol binds css styles To subsidiaries tags;
• symbol<пробел>generates context selectors.

In future articles, we'll also look at pseudo-elements and pseudo-classes, which provide powerful style management tools.

That's all, see you again.

1 Jun 2015

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. Style properties will be applied to last element which you indicate to the neighbors. You just have to follow the order of the selectors. General syntax writing like this:

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

This text should be green