Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

• Ut wisis enim ad
• Quis nostrud exerci
• Tution ullamcorper suscipit

Hello dear readers of the blog site. Today we will continue to fill our materials and start talking about such a fundamental thing as selectors in the CSS language.

There are seven types of them - tag, class, Id, universal, attributes, as well as pseudo-classes and pseudo-elements. A bit too much, isn't it? Well, nothing, we will slowly analyze them all, and with that, with detailed examples.

In previous publications, we have already managed to consider, as well as got acquainted with the units of sizes, such as we learned about the principles of inheritance in CSS. Well, today, as I said, we are opening a very serious chapter in the study of the style markup language.

CSS tag and class selectors

Before studying the style rules, you will need to learn how and by what principles to set those labels by which the browser will understand which elements of the Html code should be applied to. There are different types of selectors. The simplest ones, from the point of view of understanding, use the names of tags to which the CSS rules written after them will have to be applied.

This example will use red for the font color and gray for the background fill for all paragraph P tags. Any CSS rule can have several selectors at once. How will they need to be read in this case? Is always from right to left, i.e. start at the closest to the opening curly brace.

In the above example, the first line shows a tag (element) selector that instructs the font color to be red for all Divs.

Content of a regular container Div

In the second line, we see an example of a complex selector in which we have a new element like class... It is prescribed in quality. As a value for the class, we can use an arbitrary name using the symbols ,,, [_], [-].

But besides class, Id is also used in the style markup language. What is the difference between class and Id? The value of the latter must be unique, since Id is a unique identifier for Html tag and its name (value) can be used only once in the code.

And the value for class is not unique and can be used for any number of elements in the code. Those. different tags (Div, P, H1, etc.) can have the same value for their class attribute:

How is it used in CSS selectors? It turns out that his name is spelled dotted ahead.

Therefore, when we see something starting with a dot in the CSS code, we immediately understand that we are talking about a class. If we consider the example shown in the screenshot, now in all elements of the Html code, where “class” with the value “Blue” will be written, the text will be colored blue.

But this will not happen at all due to the fact that we chose the name of the class "Blue". You could name it whatever you like (at least "xyz"), and the color in our example is set exactly as assigned to the selector with this class. Hope this is clear? Let's change the name (value) of the class in the example:

Paragraph with text

Paragraph with text

Those. now we have the XYZ class and the rule written for it:

Xyz (color: blue)

colored the paragraph text blue. This example further emphasizes that name for the class attribute you can use any. However, let's continue.

Let's take another look at an example of how tag and class selectors are used in CSS. Let's imagine that we have the following style rules:

Div (color: red) div.a123 (color: green) .xyz (color: blue)

And also imagine that in the Html code we have the following elements:

In accordance with the prescribed rules for the specified selectors, the content of the given elements of the Html code should look like this:

Now let's see why this is how the browser interpreted the styling of these elements of the Html code. For the first container Div, in which no class is written, the CSS rule applicable to all containers will apply: div (color: red). Therefore, its contents will be colored red. What was required to be shown.

In the tag of the second Div, we have the class "a123" registered. In this case, the CSS rules corresponding to "div.a123" will be applied (because we just have a Div tag with the class = "a123" attribute written in it). Therefore, the contents of the second container will be colored green.

But you may have noticed that the first CSS rule "div (color: red)" can be applied to the second Div as well, since it is intended for all containers without exception. It turns out a contradiction, which is resolved in CSS by introducing a concept.

We'll talk about this in detail a little later, but for now I'll just say that the priority "div.a123" (for the second Div in this example) will be higher.

By the way, a similar situation occurs with the third Div from our example. Two options are suitable for it at once: the "div" tag selector and the ".xyz" class selector. Again, due to the reasons I have not yet explained (read about this at the link given just above), the priority of the latter will be higher, so the contents of the third container will be colored blue.

Let's move on. In the above example, we have the next paragraph tag P, which is written class = "a123". It turns out that this element does not fall under any of the three selectors we have written (all three missed it).

It only has an overlap with the second option, but this selector will only be used for Div tags with class "a123", but not for paragraph tag P. As a result, the text color in this paragraph will remain the default, i.e. black.

Further in the example, we have a paragraph element with class = "xyz". The last CSS rule ".xyz (color: blue)" will be applied to it. Therefore, the text in this paragraph will be colored blue. Here, I think, everything is clear.

Universal selector and unique ID

Now let's move on to the Id's, which I already mentioned. When we see something in the CSS code the front grid (hash), then this means that we are dealing with Id:

Usually this selector is written without mentioning the tag, to which it refers (the first option in the example just above), although the second spelling option is also acceptable, but it is rarely used. This is due to the fact that the value of the Id attribute in the code will be unique, which means that there cannot be two elements with the same Id values. Those. there is no point in specifying, although it is not forbidden.

Therefore, they usually just write a hash (lattice), and immediately after it the value (name) of the Id attribute. Suppose we have the following rule for Id:

#back (color: red)

and the code contains the following snippet:

which, as a result of applying the rule after "#back" to it, will be interpreted by the browser as follows:

Div container with unique ID

CSS also provides universal selector denoted by an asterisk, which shows that this rule will apply in general to any element in the code:

* (color: black)

In this case, the text enclosed in any tag will be black (the default color). It is clear that all other selectors (tags, classes and Id) will have a higher priority than the universal one.

Attribute Selectors and Their Future in Modern CSS

All the options described above (tag, class, Id and generic) will work in absolutely all browsers. But there are other options that do not work everywhere.

This type includes attribute selectors, which are very convenient and allow you to significantly expand and at the same time simplify the possibilities of point action on, but which, unfortunately, not 100% supported by all browsers.

As you probably remember, in the Html language, inside tags, we can use various attributes that allow us to give certain properties to the content of these elements themselves. Therefore, it would be logical to use not only tag names as selectors in CSS, but also attribute names.

Actually, we already did this when we considered class and Id, because they were essentially attributes of some tags. Just Aidi and Klass have a very great importance in layout and they were taken out into separate groups, each with its own syntax.

And how to use the rest existing in the language in selectors Html attributes(not Id and not class)? Quite simple - enclose them in square brackets :

(color: green)

Now any tag in the Html code, which will have "title", will have the text color green.

Very convenient in my opinion. But the whole problem with using attribute selectors is that in IE 6 and below they do not work in general, or they work, but only partially. Until the proportion of Internet users using IE 6 is zero, this convenient method will most likely not be widely used in layout. But nevertheless, you need to know about their existence and be able to use them.

As you can see from the example, it doesn't matter if the attribute specified in the selector has any value or is empty. But this is not all that can be done with him, for this is just a song.

You can indicate in them not only the name of the attribute, but also its value:

(color: green)

As a result, the CSS rules written for such a selector will be applied only for the tag that has "title" with the value "First paragraph" (in our example, this will be the second line):

The described example was strict equality, but you can write this selector like this:

(color: green)

That. this CSS rule will apply only to those elements of the Html code that have the word "paragraph" in the "title" (in our example, these will be the second and third lines):

Attribute selector syntax interprets «~=» as "contains the whole word." For example, for an element with title = "(! LANG: The second paragraph" CSS правило «color:green» уже применяться не будет.!}

But you can instead put «*=» and then not only will be taken into account single words specified in the selector, but also parts of words (any piece of text contained anywhere in the attribute):

(color: green)

In this case and for the element with title = "(! LANG: The second paragraph" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (anything that starts with a parenthesized value), which helps create an attribute selector like this:

(color: red)

You probably remember that the attribute is to indicate. So, quite often internal links on the site are made relative, and external links, otherwise, how to make them absolute, will not work.

Therefore, all external links will start with "http", and internal links can be specified in relative form without using "http". That. the selector written in our example will allow color all external links on the site(all absolute) in red. Well, relative ones that do not contain "http" will remain in the default color. In my opinion, super !!!

As you can see, attribute selectors give us a lot of possibilities and the fact that they are not yet widely used is the merit of a very poor and offended company Melkosoft, and in particular their brainchild IE 6. But slowly they begin to be used in CSS and soon, of course will make their way into life.

Yes, there is one more operator «$=» - anything that ends with the quoted value:

(color: green)

As a result, the second and third lines from our first example will be colored green. the values ​​"title" they end in "raf". This is how attribute selectors would work wonderfully in modern language CSS, if it weren't for a certain percentage of IE 6 users.

Actually, of all the types, it remains for us to consider only two:. But I want to carry it over to the next article, where we will also talk about their various combinations.

Good luck to you! See you soon on the pages of the blog site

You may be interested

Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), the relationship between html tags code
Css Priorities and Boosting with Important, Selector Combination and Grouping, Custom and Author Styles
List style (type, image, position) - Css rules for customization appearance lists in html code
Background in CSS (color, position, image, repeat, attachment) - all to set the background color or background picture Html elements
CSS - what is it, how cascading style sheets are linked to Html code using Style and Link
Size Units (Pixels, Em and Ex) and CSS Rules Inheritance
What is CSS for, how to connect cascading style sheets to Html document and the basics of the syntax of this language
Padding, Margin and Border - set in CSS internal and margins, as well as borders for all sides (top, bottom, left, right) How to set the alternation of the background color of the rows of tables, lists and other Html elements on the site using the nth-child pseudo-class
How to find and remove unused style lines (extra selectors) in your site's CSS file
Display (block, none, inline) in CSS - set the type of display of Html elements on the web page

The generic CSS selector is perhaps the easiest to understand, as it specifies that styles will be applied to absolutely all elements without exception. A universal selector consists of only one character - an asterisk (*), the general syntax is as follows:

* { property: value; property: value; ...)

An example of using the CSS generic selector

Paragraph 1

Paragraph 2

Paragraph 3

Result in the browser

Paragraph 1

Paragraph 2

Paragraph 3

In this example, margins, padding and borders of page elements have been removed. What is it for? As you already know from the lesson , some HTML elements initially have certain values ​​of some properties, for example, paragraphs have non-zero top and bottom margins of white space, image links have frames, etc. But not everything is so simple, the fact is that in different browsers the size of these fields may differ slightly, and some have not set the default frames for image links for a long time. And these are not all possible differences.

So, many layout designers (and you are now learning exactly layout) create the so-called "Reset CSS styles", that is, at the very beginning of the stylesheet, they reset all possible non-zero CSS values, and then, in the process, add styles to the elements, but already , of course, with its own meanings. This way you can be sure that the HTML page will look the same in all browsers.

Very often, the universal selector is used to reset styles, although some prefer to simply list some tag selectors separated by commas instead, and others do not use reset at all, relying on their care. How you will act is up to you, but in any case, it is too early to think about it. And rest assured that over time you will develop your own style of writing styles (sorry for the tautology) so don't bother with that.

Homework.

I don't see the point in doing my homework on the universal selector, since everything is too obvious here, so let's do a little different.

1. Change the styles of the tag so that it looks like a paragraph. What property you need for this, think for yourself.
2. Change the paragraph tag so that it looks like the highlight tag for long quotes.
3. Convert a tag from an inline element to a block element. Use for this property