CSS-selector and its role in formatting html-documents
Creating your site and filling it with certainelements of a web page, everyone will certainly come across a concept such as a CSS selector. It serves to accurately determine all the elements of the html-file, their design and place on the page. To do this, create a CSS document, which prescribes those or other selectors and parameters for their formatting: color, size, position, and others. Every web designer should know and be able to correctly enter the desired selectors. They are divided into types, the main ones of which we will consider below.
Types of selectors in CSS
Depending on which html element the formatting is applied to, the CSS selector can refer to one of the following groups:
- the selector of tags;
- class selector;
- id-selector;
- attribute selector.
Selector Tag
It is also called a "type selector" or "byelement, "it is the simplest and most common, as the name of the elements of the html file that we describe in it, for example, if we need to specify a paragraph style, we specify the properties and their values for the p { background: x; color: y; size: z}. In this case, all paragraphs of the web page will have the same formatting (background color, text, size, etc.).
Class selector
And what if you need to set your own style different for others for each paragraph? For this, there is a class selector.
The CSS document in this case will contain the following entry: p.first {color: x; font-size: y}. Thus, we set the properties "color" and "size" only for the paragraph of class first.
In the html-document in this case, you enter the class attribute with the name of the style first. Classes can be as many as the styles you want to apply to elements of a web page.
Selector by id
Often there is a need to define a styleeven more accurately, for example, to a single element of the page or to their sample. In this situation, the id-selector comes to the rescue. In the html file, we assign the name to the desired element, identifying it among the others. For example, the element that we want to set different from the other style will be the title of the article.
Then in the html-document we assign the heading h1id, for example articlename. And in the CSS file, set the style by adding a lattice before the identifier name: #articlename {color: blue; text-align: center}. Now our title will have a blue color and an alignment in the center.
Each of the above types can be called"simple CSS-selector". They define formatting for a particular parameter of the html document: a collection of similar elements (for example, all paragraphs of an article), one class (for example, only the first paragraph) or a specific element (for example, the title of an article).
Attribute selector
In addition to the above, there are CSS selectorsattributes is a more complex way of applying styles. It allows you to format html elements by the selected attribute or its value. There are several varieties of this selector:
- by the presence of an attribute;
- by its exact value;
- by partial attribute value;
- by its specific meaning.
Let us consider in detail each of these varieties:
- The first case. Formatting is used if there is a specific attribute in the html-code (they can be p, div, header and others). If it is missing, then a universal style for all elements is used. For example, for items that have a title (a tooltip).
- The second case. The style is applied only to those html-elements that have exact matches of attribute values. For example, to those input elements whose value of the type attribute is equal to submit.
- The third case. Formatting is restricted to items with a specific word in the list of values. For example, sideBar in the "class" attribute of div elements.
- The fourth case. The style is specified only for those elements of the html-document, for which a particular attribute has a certain value and begins with it. For example, applying the specified color to all elements whose language of attributes is English (this can be en, en-rus, en-au, etc.).
Thus, using a particular CSS-selector, you can best design both the entire web page, and describe its individual elements.
