At times, it seems that in order to survive in the modern world, you need to know how to create sites. Even schools teach the basics of HTML. But to create a quality resource this is not enough. You also need to know the basics of cascading style sheets, in particular CSS pseudo-classes and pseudo-elements.
What it is?
By unwritten law, all the styles that a webmaster writes in CSS markup are used for those structural elements that can be seen in the source code. However, there are groups of elements that are not written in the HTML-document, however, they also need to set styles.
For example, in the HTML file there is not a single tag that would be responsible for the design of the capital letter of a new paragraph or area that is in front of a particular element. Yes, and with tags it is impossible to show link activity or change the image when the mouse cursor is over it. To style these and many other values, CSS selectors exist: pseudo-classes and pseudo-elements.
Pseudo-classes are called selectors that affect existing elements of a document. Pseudo-elements usually specify and change an area that was initially absent in the source file. Simply put, pseudo-elements define new areas of the page that were not in the HTML markup, and pseudo-classes determine the state of objects under certain conditions.
After: after
The first thing you should pay attention to is the CSS pseudo-elements before and after, since every self-respecting resource uses them to improve the appearance, readability and attractiveness of the site. These elements provide the ability to add new areas, labels, and styles before or after the original document.
Everyone, probably, at least once saw on any website the announcements of publications, after which there were the words: “New”, “New” or “Shock”, “Favorites”, “Best”, “Super”, etc. These objects were defined using the CSS after pseudo-element .
To create such a position, you need to add the following code to the cascading style sheet:
Here, the word new sets the name of the new class, so you need to enter: class = "new" before the necessary paragraph in the HTML markup. The class name must be between the brackets of the opening tag. If everything is done correctly, then after the end of the paragraph the message “Something new” will appear on the browser page.
Naturally, the example specified a script for a simple inscription, but no one said that you can not change the size, color and positioning. All the necessary parameters can be entered in the new class after the content characteristic. Separate them with a semicolon and close the brace at the end.
Before: before
The CSS before pseudo-element has almost identical characteristics . With one small difference: it is designed to add the necessary elements in front of the object. It is written in the same way as after, only with the word before.
Before the next paragraph of the text, you can add words that attract attention, or you can simply put a picture or an Unicode element in front of the text. For example, opening quotation marks or indents. To bring this to life, you need to add a new class to the CSS markup and set the necessary characteristics. The simplest solution would be as follows:
To indent the end of the document, you need to create an after pseudo-class and instead of content: open write content: close , and change the positioning accordingly. If in the pseudo-class before the indentation was from the left margin, then in the after class it should be from the right margin. You can also add an image to the markup (for example, the same quotation marks), and the text will no longer look like a dull sheet.
Epic Saga: first
The CSS first pseudo-element is also very popular in creating new projects. In particular, this applies to projects with entertaining and fairy-tale themes, as well as historical and scientific web resources.
This CSS pseudo-element has two characteristics - line and letter:
- Letter - changes the first letter of the text fragment to which it is added. Thus, it forms an initial letter - an element in which the base line is several lines lower relative to the main text. To set this parameter in the cascading style sheet, you need to set the characteristics for the paragraph. For example, P: first-letter {***} - and already indicate between brackets all the necessary parameters, such as color, font, size. If the letter is necessary to be created only for the first paragraph, then a new class is created (as in the example with new: after ).
- Line - this position completely changes the first line of the paragraph. It is very convenient to use in scientific publications, if you need to highlight important information. It is recorded in the same way as other examples. But here it is important to remember that the pseudo-element does not select the sentence, but the line itself. Depending on which browser the user uses, his first line may be longer or shorter, so it is important to ensure that this selection does not look ridiculous. For such cases, a line wrapping pseudo-element was created in CSS.
New line
In fact, this element is rarely used, because it is successfully replaced by the <br> tag. However, there are situations when it is necessary to specify a line break with pseudo-elements. For these purposes, you can use the same after. To do this, the following code is written: after {content: '\ A'; white-space: pre;} . The class name must be entered between the brackets of the opening tag, as soon as it closes, a line break will follow it.
This option takes more time to design readable content, and if there is no need to work with anomalously unknown browsers, then it is better to limit yourself to the <br> tag.
Pseudo-Class Syntax
As already mentioned, pseudo-classes determine the state of the elements with which the user interacts. Unlike CSS pseudo-elements, which define characteristics invisible to the structure, imaginary classes are focused on behavioral factors. To make it clearer, you can give a small example. Suppose the site has a list of useful links, the user clicks on them, reads the information, but after a while it comes across the content that it has already seen. He simply went to this page again, because there are many links, and they are no different. To prevent this from happening, webmasters add a pseudo-class that changes the color of the viewed link, then the user will know exactly what he has read and where he has not yet gone.
All pseudo-classes are written to the cascading style sheet with a simple and proven syntax:
- Selector: Pseudo-class {style characteristics: color, size, indentation, positioning, etc.}
These classes can be divided into three main groups:
- those that determine the state of an element;
- those related to pseudo-elements;
- dummy classes that define the language of the content.
Pseudo-classes and state of elements
Let us consider in order what pseudo-classes can be. The first subspecies is characterized by a change in the state of an element depending on its state at a particular moment. This is the same as in the example above: if you clicked on a link, then it will change color. These include the following pseudo-classes:
- : active. If you apply this pseudo-class, then when you click on a separate fragment with the mouse, it will become active. This will manifest itself in a color change, an increase in size, or animation will appear.
- : link . Mostly applied to links that the user has not visited yet. They remain unchanged.
- : focus . Most often used for text documents, when the user, setting the cursor on the field, can change the color of the text. Sometimes this is also used for images. For example, the image is shaded, but when clicked, it acquires a natural color.
- : hover . When the user simply hovers the mouse over a specific object, he can change the color or shape, without having to click.
- : visited . This pseudo-class is mainly intended for visited links that change their color to purple by default.
Beginners mistakenly assume that these pseudo-classes are intended only for links, but with due desire and imagination, you can change any element of the site.
Especially for CSS pseudo-elements
This group of selectors includes pseudo-classes that can change pseudo-elements. Such a pseudo-class is : first-child . In the cascading style sheet, you need to create a new class for : first-child and set the color of the text or its size. The result will be as follows:
- B: first-child {color: red; }
Most often this is done when it is necessary to highlight several pieces of text in bold and only the beginning of the paragraph should be different. Therefore, the class is called the same as the tag that is responsible for bold text. If you put this into practice, thanks to the pseudo-class, only the first fragment in bold will have a red color, the rest of the words will be standard black.
Also : first-child is used to remove the indentation in the first paragraph, then instead of color: red; it will be necessary to write text-indent: 0; , and B be replaced by P (the tag that is responsible for the beginning of the paragraph is also indicated).
Content Language
Pseudo-class : lang is mainly applied to texts that are written in different languages. For example, if the article contains citations in the original language, then you can set individual characteristics for them. The syntax for this cluster will be as follows:
- Class name: lang (language) {text characteristics (color, font, appearance , etc.)}
As for the position "language", it is designated according to accepted standards. For example, English - en, Russian - ru, German - de, etc. Thanks to this pseudo-class, you can change the style of a foreign text throughout the document.
conclusions
CSS pseudo-classes and pseudo-elements are one of those cascading style sheet questions that make it difficult to understand. However, there is nothing complicated here, the main thing is to understand that a pseudo-class is a certain state that is fulfilled under the conditions previously agreed. For example, when you hover over or click the mouse. A pseudo-element is an independent part of a document that is not part of HTML markup, but can have its own style. You could even say that it is virtual HTML. If you look at the situation from this perspective, then everything becomes extremely simple and understandable, and with such knowledge you can already start creating sites.