CSS Selectors. Types of selectors

blocks in your code, each of which must have a specific color. How to do it? The standard CSS selectors for tags do not work, they specify the parameters for all the blocks at once. The output is simple. Assign a class to the elements. For example, the first div got class = 'red', the second div - class = 'blue', the third - class = 'green'. Now they can be selected using CSS tables.

The syntax is: specify the point ("."), After which we write the name of the class. To control the first block, use the .red design. The second is .blue and so on.

Important! It is recommended that you use clear values for the class attribute. A bad form is the use of translit (eg krasiviy-blok) or random combinations of letters / numbers (ojfh834871). In such code, you will surely get confused, not to mention the difficulties that those who will deal with the project after you will have to face. The best option is to use some kind of methodology, like BEM.

Advantages are rather high flexibility.

Disadvantages - several elements can have the same class, and therefore they will be edited simultaneously. The problem is solved using the methodology, as well as the inheritance of preprocessors. Be sure to master less, sass or some other preprocessor, they will greatly simplify the work.

Selector by ID

With regard to this option, the opinions of the coder and the programmers are ambiguous. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Some CSS textbooks generally do not recommend using IDs, because they can cause inheritance problems when used inadvertently. However, many specialists actively distribute them throughout the markup. You decide. # »), затем имя блока. The syntax is: a lattice character (" # "), then a block name. #red. For example, #red.

отличается от класса по нескольким параметрам. The ID differs from the class in several ways. ID. Firstly, there can not be two identical IDs on the page . They are assigned unique names. Secondly, such a selector has a higher priority. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. This means that if you give the block a red class and specify a red background color in the CSS tables , then assign it the same id blue and specify a blue color, the block will turn blue.

Advantages - you can control a specific element, not paying attention to styles for tags and classes.

ID и class. Disadvantages - it's easy to get confused in a lot of ID and class.

Important! ID вам, в общем-то, не нужны. If you use the BEM methodology (or its analogs), you generally do not need ID . This technique of layout involves the use of unique classes, which is much more convenient.

Universal selector

{}. Syntax: star sign ("*") and curly braces, i.e. * {}.

Used to assign certain attributes to all elements of a page at once. When can it come in handy? box-sizing: border-box. For example, if you want to set the page property box-sizing: border-box. div *{}. It can be used not only to manage all components of the document, but also to control all the children of a particular block, for example, div * {}.

Advantages - you can manage a large number of items at the same time.

Disadvantages are not a flexible option. In addition, using this selector in some cases slows down the page.

By Attributes

It is possible to manage an element with a specific attribute. For example, you have several input tags with a different type attribute. One of them is text, the second is password, the third is number. Of course, you can assign each class or ID, but it's not always convenient. CSS selectors by attributes make it possible to specify values for certain tags with maximum accuracy. For example, like this:

Input [type = 'text'] {}

This attribute selector will select all input with the text type.

The tool is quite flexible, it can be used with any tags that may have attributes. But that's not all! In the CSS specification, it is possible to manage the elements even with great convenience!

Imagine that your page has an input with the attribute placeholder = "Enter name" and input placeholder = "Enter password". You can also select them using the selector! The following construction is used for this:

Input [placeholder = "Enter name"] {} or input [placeholder = "Enter Password"]

More flexible work with attributes is possible. Let's say you have several tags with similar title attributes (say, "Caspian" and "Caspian"). To select both, use the following selectors:

[Title * = "Caspian"]

CSS will select all elements in the title of which there are symbols "Caspian", i.e. both "Caspian" and "Caspian".

You can also select tags whose attributes begin with certain characters:

[Title ^ = "the character you need"] {}

Or end with them:

[Title $ = "desired character"] {}.

Advantages - maximum flexibility. You can select any existing page elements without fussing with classes.

Disadvantages - used relatively rarely, only in specific cases. Many layout designers prefer methodology, since it is easier to specify a class than to place multiple square brackets and "equals". In addition, these selectors do not work in Internet Explorer version 7 or lower. However, who now needs the old Internet Explorer?

Pseudo-class selectors

A pseudo class indicates the state of an element. For example: hover - what happens to a portion of the page when hovering over,: visited - visited link. This includes elements like: first-child and: last-child.

This type of selectors is actively used in modern layout, because thanks to it you can make the page "live" without using JavaScript. For example, you want to make it so that when you hover over a button with the btn class, its color changes. To do this, we use the following construction:

.btn: hover {

Background-color: red;

}

For beauty, you can specify the property of the button in the main properties of this button, for example, in 0.5s - in this case, the button will blush not instantly, but within half a second.

Advantages - actively used to "revive" the pages. Easy to use.

Disadvantages - they are not. This is really a convenient tool. However, inexperienced editors can get confused in the abundance of pseudo-classes. The problem is solved by study and practice.

Pseudo-element selectors

"Pseudo-elements" are those parts of the page that are not in HTML, but they can still be managed. Did not you understand anything? Everything is simpler than it seems. For example, you want to make the first letter in the line big and red, leaving the other text small and black. Of course, you can enclose this letter in span with a certain class, but it's long and boring. It's much easier to select the entire paragraph and use the :: first-letter pseudo-element. It allows you to control the appearance of the first letter.

There is a rather large number of pseudo-elements. To list them within the framework of one article is unlikely to work. You can find relevant information in your favorite search engine.

Advantages - give the opportunity to flexibly adjust the appearance of the page.

Disadvantages - beginners in them are often confused. Many selectors of this type work only in certain browsers.

Summarize

The selector is a powerful tool for controlling document flow. Thanks to him, you can select absolutely every component of the page (even the existing one is only conditional). Be sure to learn all the options available or at least write them down. This is especially important if you are creating complex pages with a modern design and a lot of interactive elements.