The CSS universal 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 just one character - an asterisk (*), the general syntax is as follows:
* { property: value; property: value; ...)
CSS Universal Selector Example
Paragraph 1
Paragraph 2
Paragraph 3
Result in browser
Paragraph 1
Paragraph 2
Paragraph 3
In this example, margins, paddings, and page element frames were cleared. Why might this be needed? As you already know from the lesson , some HTML elements initially have certain values some properties, for example, for paragraphs these are non-zero top and bottom margins of empty space, for image links these are frames, etc. But not everything is so simple, the fact is that in different browsers the size of these fields may vary slightly, and some have not set default frames for image links for a long time. And these are not all the possible differences.
So, many layout designers (and you are now learning layout) create the so-called “Reset CSS styles", that is, at the very beginning of the style sheet, they reset all possible non-zero CSS values, and then, during the work process, they add styles to the elements, but, of course, with their own values. This way you can be sure that the HTML page will look the same in all browsers.
Very often, a universal selector is used to reset styles, although some people prefer to simply list some tag selectors separated by commas, while others do not use reset at all, relying on their attentiveness. What you will do is up to you to decide, but in any case it’s too early to think about it. And be sure that over time you will develop your own style of writing styles (sorry for the tautology) so don’t bother with it.
Homework.
I don’t see the point in doing my homework on the universal selector, since everything here is too obvious, so let’s do something a little different.
Hello, dear readers of the blog site. Today we will continue to fill ours with materials and begin to talk 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 much, isn't it? Well, never mind, let’s slowly analyze them all and use detailed examples.
In previous publications, we have already looked at , and also got acquainted with size units, such as and learned about the principles of inheritance in CSS. Well, today we, as I said, are opening a very serious chapter in the study of style markup language.
Before studying style rules, you will need to learn how and according to what principles to set those tags by which the browser will understand which elements of Html code they need to be applied to. Selectors are different. The simplest ones, from the point of view of understanding, use tag names, to which the rules of the CSS language written after them will have to be applied.
IN in this example all paragraph P tags will use red font color and grey colour to fill the background. Any CSS rule can have several selectors specified at once. How should they be read? Always from right to left, i.e. start with the one closest to the opening brace.
In the example above, the first line shows a tag (element) selector that forces the font color to be red for all Div containers.
Contents of a regular Div container
In the second line we see an example of a complex selector in which we have a new element like class. It is registered as . We can use an arbitrary name as the value for class using the symbols ,,,[_],[-].
But in addition to class, the style markup language also uses Id. What is the difference between a class and an Id? The value of the latter must be unique, because Id is a unique identifier for an Html tag and its name (value) can only be used once in the code.
And the value for class is not unique and can be used for any large quantity elements in the code. Those. different tags (Div, P, H1, etc.) can have the same meaning class attribute:
How is it used in CSS selectors? It turns out that his name is spelled with a dot in front.
Therefore, when we see something starting with a dot in CSS code, we immediately understand that we're talking about about class. If we look at the example given in the screenshot, now in all elements of the Html code where “class” with the value “Blue” is written, the text will be colored blue.
But this will not happen at all because we chose the class name “Blue”. We could call it anything (even “xyz”), and the color in our example is set exactly as assigned for the selector with this class. I 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 class XYZ and a rule written for it:
Xyz (color:blue)
Colored the paragraph text blue. This example once again 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)
Let’s also imagine that in the Html code we have the following elements:
In accordance with the prescribed rules for the specified selectors, the contents of the given Html code elements should look like this:
Now let's see why the browser interpreted it this way styling data elements of HTML code. For the first Div container, in which no class is specified, the CSS rule applicable to all containers will apply: div (color: red). Consequently, its contents will be colored red. That's what needed to be shown.
In the tag of the second Div we have the class “a123”. 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 probably noticed that you can also apply the first CSS rule “div (color:red)” to the second Div, since it is intended for all containers without exception. This results in a contradiction that can be resolved in CSS by introducing the concept .
We’ll talk about this in detail a little later, but for now I’ll just say that the priority of “div.a123” (for the second Div in the example under consideration) will be higher.
By the way, a similar situation arises with the third Div from our example. There are two options for it: the “div” tag selector and the “.xyz” class selector. Again, for reasons that have not yet been explained by me (read about this at the link 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 example above, we have a paragraph tag P, which contains class="a123". It turns out that this element does not fall under any of the three selectors we specified (all three missed it).
It only has an intersection with the second option, but this selector will only be used for "Div" tags with class "a123", and not for the paragraph tag P. As a result, the text color in this paragraph will remain the default, i.e. black.
Next 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 of this paragraph will be colored blue. Here, I think, everything is clear.
Now let's move on to the Ids that I have already mentioned. When we see something in CSS code a hash in front, 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 given just above), although the second spelling is also acceptable, but is rarely used. This is due to the fact that the value of the Id attribute in the code will be unique, which means there cannot be two elements with the same Id values. Those. there is no point in clarifying, although this is not forbidden.
Therefore, they usually simply write a hash (hash), followed immediately by the value (name) of the Id attribute. Let's assume that we have the following rule for Id:
#back (color:red)
and the code contains the following fragment:
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 indicated by an asterisk, which shows that this rule will apply generally 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.
All the options described above (tag, class, Id and universal) 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 targeted influence on, but which, unfortunately, are not fully supported by all browsers.
As you probably remember, in 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, but also attribute names as selectors in the CSS language.
Actually, we already did this when we looked at class and Id, because they were essentially attributes of some tags. It’s just that ID and Class are very important in layout and they were put into separate groups, each with its own syntax.
How to use other selectors that exist in the language? HTML attributes(not Id and not class)? Quite simple - enclose them in square brackets:
(color:green)
Now any tag in the Html code that has “title” written in it will have a green text color.
Very convenient, in my opinion. But the whole problem with using attribute selectors is that they do not work in IE 6 and below generally or they work, but only partially. Until the share of users accessing the Internet using IE 6 is zero, this convenient way, most likely, will 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 does not matter whether the attribute specified in the selector has any value or is empty. But that’s not all that you can do with it, because it’s just a song.
You can indicate in them not only the name of the attribute, but also its meaning:
(color:green)
As a result, the CSS rules specified for such a selector will be applied only to the tag that has a “title” with the value “First Paragraph” (in our example this will be the second line):
The described example was a strict equality, but you can write this selector like this:
(color:green)
That. this CSS rule will apply only to those Html code elements whose “title” contains the word “paragraph” (in our example this will be the second and third lines):
The attribute selector syntax interprets «~=» as “the whole word is contained.” For example, for an element with title="Second paragraph" CSS правило «color:green» уже применяться не будет.!}
But you can put it instead «*=» and then not only will be taken into account individual 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="Second paragraph" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (everything that starts with the value specified in parentheses), which helps create an attribute selector like this:
(color:red)
You probably remember that the attribute for specifying . So, quite often internal links on the site they are made relative, but external ones cannot be made any other way than to make them absolute.
Therefore, everything external links will begin with “http”, and internal ones can be specified in relative form without using “http”. That. The selector specified 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 the color that was adopted for them by default. I think it's great!!!
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 the very poor and offended company Melkosoft, and in particular their brainchild IE 6. But little by little they are starting to be used in CSS and soon, of course they will make their way into life.
Yes, there is another operator «$=» - everything that ends with the value specified in quotes:
(color:green)
As a result, the second and third lines from our first example will be colored green, because the meaning of “title” ends in “raf”. This is how attribute selectors would work wonderfully in modern CSS if there were not still a certain percentage of users using the IE 6 browser.
Actually, of all the types, we only have two left to consider: . But I want to move this 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 might be interested
Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), relationships between HTML tags code 
Priorities in Css and their increase due to Important, combination and grouping of selectors, user 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) - everything for setting the background color or background image HTML elements
CSS - what is it, how do cascading style sheets connect to HTML code using Style and Link 
Dimension units (pixels, Em and Ex) and inheritance rules in CSS 
What is CSS for, how to connect cascading style sheets to an Html document and the basic syntax of this language 
Padding, Margin and Border - set in CSS internal and external margins, as well as frames for all sides (top, bottom, left, right) How to set up rotation background color 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 display type of Html elements on the web page
Sometimes when creating a website, it becomes necessary to apply a specific style to all elements that appear on the page without exception. To implement this task, a universal selector is used.
It is indicated by the symbol “*”. With its help, you can select all the tags on the page at once without making adjustments to their purpose and nesting. For example:
* (font-size: 18px; )
Using this entry, we set all elements with text to have a font height of 18 pixels.
Let's take a closer look at it. Before version 2 of CSS, there was no universal selector. It matches all elements, so the styles it specifies will be applied to them simultaneously. You should be extremely careful when using this selector. Caution is called possible occurrence difficulties in inheriting styles, or rather their unpredictable behavior.
It's also worth noting that using a class, identifier, attribute allows you to skip the universal selector without any harm. For example:
*. left ( border: 1px solid #000; ) . left ( border: 1px solid #000; )
These records carry the same semantic load, and the style will be applied the same way both with and without the use of a universal selector.
Basically, the universal selector is found in practice when resetting default browser styles. For example, indents, font sizes, and so on.
However, although this method is simple and will also significantly reduce the length of the code, it has a number of disadvantages.
Disadvantages of the universal selector when resetting standard styles:
For the reasons described above, it is recommended to reset styles specifically for each element using a type selector. An example of similar code for resetting styles is given at the end
Sometimes you need to set one style for all elements of a web page at the same time, for example, set a font or text style. In this case, a universal selector that matches any element of the web page will help.
In CSS3, the universal selector is also used in combination with a namespace.
* (Description of style rules)
The asterisk symbol (*) is used to denote a universal selector. In some cases, it is not necessary to specify a universal selector. So, for example, the *.class and .class entries are identical in their results.
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Browser Internet Explorer up to the sixth version inclusive, understands the * html construction, which is illogical, since the tag is a top-level tag and there cannot be any elements above it. This error is sometimes used to create style for IE6, such as the * html body( ... ) will add style to the body selector in IE6 and below and does not work in other browsers.
IN Internet browser In Explorer 7, when you add a universal selector before the selector name without spaces, it is treated as a context selector. Thus, the *body entry only works in IE7 and is ignored by other browsers.
Each specification goes through several stages of approval.
