CSS-selector and its role in formatting html-documents

By creating your site and filling it with certain elements 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 by 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 "by element", it is the simplest and most common. As its name in the CSS-document are the names of those elements of the html-file that we describe. 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 the style even 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 identifier h1 to the header, 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 header will have the color blue and center alignment.

Each of the above types can be called a "simple CSS-selector". They define the formatting for a particular parameter of an 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 attribute selectors - 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 precise value;
• By partial attribute value;
• By its specific meaning.

Let us consider in detail each of these varieties:

1. The first case. Formatting is used if there is a specific attribute in the html-code (they can be p, div, header, etc.). If it is missing, then a universal style for all elements is used. For example, for items that have a title (a tooltip).
2. The second case. The style applies 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.
3. 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.
4. 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.