, each of which needs to be given a specific color. How to do it? Standard CSS selectors by tags will not work; they specify parameters for all blocks at once. The solution is simple. Assign a class to the elements. For example, the first div received class=’red’, the second - class=’blue’, the third - class=’green’. Now they can be selected using CSS tables.

The syntax is as follows: we indicate a period (“.”), after which we write the name of the class. To control the first block, we use the .red construct. The second is .blue and so on.

Important! It is recommended to use clear values ​​for the class attribute. It is considered bad form to use transliteration (for example, krasiviy-blok) or random combinations of letters/numbers (ojfh834871). You will definitely get confused in such code, not to mention the difficulties that those who will work on the project after you will have to face. The best option is to use some methodology, like BEM.

Advantages: quite high flexibility.

Disadvantages - several elements can have the same class, which means they will be edited at the same time. The problem is solved by using the methodology, as well as inheriting preprocessors. Be sure to master less, sass or some other preprocessor, they will greatly simplify your work.

Selector by ID

The opinions of layout designers and programmers regarding this option are ambiguous. Some textbooksCSSnot recommended to use at allID,since if used carelessly they can cause problems with inheritance. However, many experts actively place them throughout the markings. You decide. The syntax is: hash symbol ("# "), then the block name. For example,#red.

IDdiffers from the class in several ways. Firstly, there cannot be two identical ones on a page.ID.They are assigned unique names. Secondly, such a selector has a higher priority. This means that if you give a block a classredand indicate in the tablesCSSred and then assign it to himid blueand specify a blue color, the block will turn blue.

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

Disadvantages - easy to get confused in a large numberIDAndclass.

Important! If you use the BEM methodology (or its analogues),IDIn general, you don't need it. This layout technique involves the use of unique classes, which is much more convenient.

Universal selector

Syntax: asterisk (“*”) and curly braces, i.e. *{}.

Used to assign certain attributes to all page elements at once. When might this come in handy? For example, if you want to set the page propertybox-sizing: border-box.Can be used not only to control all document components, but also to control all child elements of a particular block, e.g.div *().

Advantages - you can manage a large number of elements simultaneously.

Disadvantages - not flexible enough. Additionally, using this selector can slow down the page in some cases.

By attributes

Allows you to manage an element with a specific attribute. For example, you have several input tags with different type attribute. One of them is text, the second is password, the third is number. Of course, you can assign classes or IDs to each, but this is not always convenient. CSS attribute selectors make it possible to specify values ​​for specific tags with maximum precision. For example, like this:

input()

This attribute selector will select all inputs with type text.

The tool is quite flexible; it can be used with any tags that may have attributes. But that's not all! The CSS specification makes it possible to manipulate elements even more conveniently!

Let's imagine that your page has an input with the attribute placeholder = “Enter a name” and input placeholder = “Enter a password.” They can also be selected using the selector! The following construction is used for this:

input() or input

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:

CSS will select all elements whose title contains the characters “Kaspiysk”, i.e. both “Kaspiyskiy” and “Kaspiyskaya”.

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

or end with them:

{}.

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

Disadvantages - it is used relatively rarely, only in specific cases. Many layout designers prefer methodologies, since specifying a class can be easier than arranging numerous and equal signs. Additionally, these selectors do not work on the Internet Explorer versions 7 and below. However, who needs old Internet Explorer now?

Pseudo-class selectors

A pseudo-class denotes the state of an element. For example, :hover is what happens to part of the page when the cursor is hovered, :visited is the visited link. This also includes elements like:first-child and:last-child.

This type of selector 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 sure 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 transition property in the main properties of this button, for example, in 0.5s - in this case, the button will not turn red instantly, but for half a second.

Advantages - they are actively used to “revive” pages. Easy to use.

Disadvantages - there are none. This is a really convenient tool. However, inexperienced layout designers may get confused by 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 present in HTML, but can still be manipulated. Don't understand anything? Everything is simpler than it seems. For example, you want to make the first letter in a line large and red, but leave the rest of the text small and black. Of course, you can enclose this letter in a span with a specific class, but this is long and boring. It's much easier to select the entire paragraph and use the pseudo-element::first-letter. It allows you to control the appearance of the first letter.

There are quite a large number of pseudo-elements. It is unlikely that it will be possible to list them in one article. You can find relevant information in your favorite search engine.

Advantages - they allow you to flexibly customize the appearance of the page.

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

Summarize

A selector is a powerful means of controlling the flow of a document. Thanks to it, you can select absolutely every component of the page (even those that exist only conditionally). Be sure to learn all your options or at least write them down. This is especially important if you create complex pages with modern designs and a lot of interactive elements.

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.

The asterisk (*) symbol is used to denote a universal selector, and in general the syntax is as follows.

* (Description of style rules)

IN In some cases it is not necessary to specify a universal selector. So, for example, records*.class and .class are identical in their output.

IN Example 1.50 shows one of the possible applications of a universal selector - selecting the font and text size for all document elements.

Example 1.50. Using a universal selector

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Note that a similar result can be obtained if in this example we change the * selector to BODY .

Questions to check

1. Which style will set the text color in a paragraph to red?

1. * HTML P ( color: red; )
2. HTML * P ( color: red; )
3. P * ( color: red; )
4. BODY * P ( color: red; )
5. BODY P * ( color: red; )

2. What does the following style entry mean?

* DIV * ( background: green; )

1. Set the background color for all web page elements.
2. Set the color for all text elements in the document.
3. Set the background color for all elements inside the container
   .
4. Set background color for tags only
   , nested in other containers.
5. Green background color for all tags
   in the code.

3. Which word is the div *em* selector style applied to in the following code snippet?

1. Lorem
2. consectetuer
3. nostrud

Answers

1. HTML * P ( color: red; )

2. Set a background color for all elements inside the container