CSS selector and its role in formatting html documents

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 most accurately determine all elements of the html-file, their design and place on the page. To do this, a CSS document is created in which one or another selector and parameters for their formatting are registered: color, size, position and others. Every web designer should know and be able to correctly enter the necessary selectors. They are divided by species, the main of which we will consider below.

CSS selector views

Depending on which html element formatting is applied to, the CSS selector can belong to one of the following groups:

  • tag selector
  • class selector;
  • id selector;
  • attribute selector.

css selector

Tag selector

It is also called a "type selector" or "by element", it is the most simple and common. As it is in the CSS-document are the names of those elements of the html-file that we describe. For example, if we need to set the style of paragraphs, then we specify the properties and their values ​​for the element 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

But what if it is necessary to set a different style for each paragraph? There is a class selector for this.

The CSS document in this case will contain a record of the following form: p.first {color: x; font-size: y}. Thus, we will set the color and size properties only for a paragraph of the first class.

In the html document, in this case, the class attribute with the style name first is introduced. There can be as many classes as the styles you want to apply to web page elements.

css attribute selectors

Id selector

Often there is a need to define the style even more accurately, for example, to any one element of the page or to their selection. In this situation, an id selector comes to the rescue. In the html file we assign the name to the desired element that identifies it among the rest. For example, the element that we want to set a different style from others is the title of the article.

Then in the html-document we assign the identifier to the header h1, for example articlename. And in the CSS file we set the style by adding a grid in front of the identifier name: #articlename {color: blue; text-align: center}. Now our title will be blue and centered.

Each of the types discussed above can be called a “simple CSS selector”. They determine the formatting for a specific parameter of an html document: a set 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).

css class selector

Attribute selector

In addition to the above, attribute selectors exist in CSS, a more complex way to apply styles. It allows you to format html elements according to the selected attribute or its value. There are several varieties of this selector:

  • by the presence of the attribute;
  • by its exact value;
  • partial attribute value;
  • by its specific meaning.

Let's take a closer look at each of these varieties:

  1. The first case. Formatting is used if a certain attribute is present in the html-code (it can be p, div, header and others). If it is absent, then a style universal for all elements is used. For example, for elements that have a title (tooltip).
  2. The second case. The style applies only to those html elements that have exact match attribute values. For example, to those input elements for which the value of the type attribute is equal to submit.
  3. The third case. Formatting includes only elements with a specific word in the list of values. For example, the sideBar in the class attribute of div elements.
  4. The fourth case. The style is set only for those elements of the html document for which a particular attribute has a specific value and begins with it. For example, applying the specified color to all elements whose attribute language is English (this can be en, en-rus, en-au, etc.).

Thus, using one or another CSS selector, you can best design both the entire web page and describe its individual elements.

Source: https://habr.com/ru/post/A11936/

All Articles