By combining HTML and CSS, you can control absolutely all elements of a web page. Using styles, you can easily change the look of any block or line. Often the layout designer needs to perform a more complex task - to change the appearance of not the element itself, but its individual part or a certain state. In this case, CSS pseudo-classes come to the rescue.
Pseudo-classes work on the same principle as regular classes in markup, but physically they are not present on the page. With their help, you can select elements based on information not included in the document that cannot be selected with the usual selector. Here is a simple example: you have a red button, and you want it to turn blue when you hover. Theoretically, this can be implemented in JavaScript, but why such difficulties? Much more convenient to use : hover CSS. With its help, you can give the block any parameters that will be triggered exclusively when you hover the mouse.
The list of CSS pseudo-classes is updated regularly. Perhaps, while you will read this material, several new ones will appear. To get started, consider the ones that appeared in the CSS3 specification.
: nth-of-type
Suppose you have a list in which you want to use alternating colors, that is, the first line will be written, for example, in red, the second in blue, the third in red again, and the fourth in blue again. Previously, you had to create new classes for this. Layouts of the past added a class to each element of the list, and then changed their appearance in the stylesheet. It was not very convenient and polluted the layout.
Now everything is made easier. Use the CSS: nth-of-type pseudo-class. This will make it possible to obtain the necessary visual effect without changing anything in the markup. The principle of operation is simple: you specify a selector, and in brackets after its name write a formula or keyword that will find the required elements. For example: nth-of-type (even) finds all the even elements, and: nth-of-type (odd) finds the odd ones. There are a large number of formulas that are used for the most accurate control. You can specify a number in brackets - in this case, the styles will be applied to the element whose index is equal to this number.
: nth-child
This CSS pseudo-class is similar in principle to the previous one, but unlike it, it works exclusively with children of the selected element. For example, if you want to use it to customize the appearance of <li> tags in a list, you need to use the ul: nth-child construct, since <ul> is the parent of <li>.
For precise control, you can use formulas. They are quite complicated for a beginner, but once you get a little deeper into the syntax, things get easier. The formulas look like this: an + b, where a is the factor and b is the offset. For example, if you specify n in brackets, then the pseudo-class will select all child elements (because additional conditions in the form of a and b are not specified). If you specify n + 2, all elements except the first will be selected (because the offset is two). This moment is best studied in practice. Experiment with child components and different formulas.
: last-child
Everything is simple here. CSS child pseudo- classes are used to select one specific element. This selects the last child component of the parent. It is used quite often, for example, to highlight the last row of a table or to indent the last block to avoid transferring it to the next row.
: nth-last-child
According to the principle of action, it is similar to the nth-child mentioned above, but it acts in the opposite direction, that is, when used, the elements will be moved up and down. This is convenient if you need to find the last few elements.
You might think that these CSS pseudo-classes and pseudo-elements are useless, since you can also achieve the goal using regular classes. This is not true. : nth-child,: nth-last-child and their analogues are very convenient when working on large projects - for example, in cases where the block has a huge number of children. Manually arranging classes is long and difficult.
State Management Pseudo-Classes
What if you need to change the appearance of an element in a certain state? In this case, CSS pseudo-classes of clicking, hovering and other actions are provided. Let's consider them in more detail.
: link
This is a pseudo-class of CSS links, and not any, but only those that have not been visited yet. In it, you can set styles for those <a> elements that the user has not yet clicked on.
: visited
An analogue of the previous option, which only manages already visited links. By combining these two pseudo-classes, you can customize the appearance of the <a> tags exactly as you need. However, keep in mind that states are calculated for specific browsers and reset after clearing the history.
Pseudo-class: target CSS
One of the most interesting pseudo-classes, which, when used correctly, to some extent replaces the use of JavaScript. It makes it possible to control the element whose identifier is specified in the page address bar. Yes, the first time it's hard to understand. Let's try to parse an example.
Let's say we have 3 div blocks with specific id on the page: id1, id2, id3. We also have three links with the corresponding href values: # id1, # id2, # id3. When you click on the first link in the address bar of the page, after the link to the page itself, the corresponding id will appear.
In CSS, for all div blocks, the display: none property is specified, that is, by default they are not shown. We use target: div and set the display: block property to it. Now, when you click on links with specific href, blocks with the corresponding id will be assigned display: block, which means they will begin to appear on the page! When you click on the link with href = ”# id1”, a block with id1 will appear, and so on.
Still nothing clear? Try experimenting. Create a page with the markup and styles described above. After a couple of minutes, you’ll get a good grasp of everything.
Pseudo-classes that can be applied to any elements.
Most of the pseudo-classes described above required links to work. However, not everyone needs <a> elements. A number of options can be applied to absolutely any part of the page.
- : active is intended for stylization of elements on which the user left-clicked;
- : hover - CSS for elements that the user hovers over;
- : focus - for those parts of the page that are currently in focus. This pseudo-class is often used to work with forms. For example, if you want to highlight a username input line when a visitor places a cursor in it and starts typing characters.
Remember that: active is valid only when pressed. Immediately after the left mouse button stops working, the styles specified with it will disappear and the element will be displayed as it was displayed by default. In most cases, this pseudo-class is used to work with buttons. You can ask them a large number of states. For example, by default the button will be blue, on hover it will be green, when pressed it will be red, etc.
Of course, pseudo-classes are fully supported only by modern browsers. For example, in IE6 and 7, focus cannot be used, and hover and active in IE6 only work for links. Let's hope that you do not have to work with such browsers, but if you still need it, use conditional comments.
Additional pseudo-classes
The options listed above are not limited. Thanks to modern CSS, you can select only enabled elements (: enabled) or only disabled (: disabled), only checked checkbox and radio (: checked) radio buttons. We will briefly describe a few more options that you can use to more closely control the appearance of the content.
- : only-child - it is possible to apply a style to an element, which is the only child element;
- : lang - to work with elements whose language is set using the lang attribute;
- : root - used to select the root element. Accordingly, in HTML such is the <html> tag;
- : not is a very powerful tool. It makes it possible to limit the use of styles by certain selectors. Here is an example: .blue-color: not (span). Such a selector will apply styles to all elements with the blue-color class if they are not <span>.
A complete list of pseudo-classes may stretch beyond more than one page. Most coders use only a few of them in practice, preferring to control states using JavaScript. Yes, this is convenient, but there are a number of points when more effective results can be achieved more easily using the appropriate pseudo-class.