Computers, Programming
CSS, pseudo-class, pseudo-element: hover, child, target
Combining HTML and CSS, you can manage absolutely all elements of a web page. With styles, you easily change the appearance of any block or line. Often, a coder needs to perform a more complex task - to change the appearance of not the element itself, but its individual part or 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 they are not physically present on the page. With their help, you can select items based on the information that is not included in the document, which can not be selected with the usual selector. Here's a simple example: you have a red button, and you want it to turn blue when you hover it. Theoretically it can be implemented in JavaScript, but why such complexity? Much more convenient to use : hover CSS. With its help, you can give the unit any parameters that will work only when you hover the mouse cursor.
The CSS pseudo-class list is updated regularly. Perhaps while you are reading this material, several new ones will appear. First, let's look at the ones that appeared in the CSS3 specification.
: Nth-of-type
Suppose you have a list in which you want to use the alternation of colors, i.e. the first line will, for example, be written in red, and the second line will be blue, the third red again, the fourth again blue. Previously, you had to create new classes for this. Past makeers added each element of the list to the class, and then changed their appearance in the style sheet. It was not very convenient and polluted the layout.
Now everything is easier. Use the CSS pseudo class: nth-of-type. This will give an opportunity to get the necessary visual effect without changing anything in the markup. The principle of operation is simple: you specify a selector, and in parentheses after its name, write a formula or keyword that will find the required elements. For example: nth-of-type (even) finds all even elements, and: nth-of-type (odd) - odd. There are a large number of formulas that are used for the most accurate control. In parentheses, you can specify a number - in which case the styles will be applied to the element whose index is equal to this number.
: Nth-child
This CSS pseudo-class is similar to the previous one, but unlike it works exclusively with the children of the selected element. For example, if you want to use it to customize the appearance of the is the parent of
For precise control, formulas can be used. They are quite difficult for a beginner, but it's worth a little digging into the syntax, how things get simpler. Formulas look like this: an + b, where a is a multiplier, and b is an offset. For example, if you specify n in parentheses, the pseudo-class will select all the children (because no additional conditions are specified in the form a and b). If you specify n + 2, all elements will be selected, except the first one (because the offset is two). It is best to study this moment in practice. Experiment with the child components and different formulas.
: Last-child
Everything is simple. CSS child pseudo-classes are used to select one particular element. This selects the last child of the parent. It is used quite often, for example, to select the last row of the table or to remove the indentation from the last block to avoid its transfer to the next line.
: Nth-last-child
By the principle of action is similar to the previously mentioned nth-child, but acts in the opposite direction, i.e. when used, elements will move from bottom to top. This is useful if you want to find the last few items.
You might think that these pseudo-classes and CSS pseudo-elements are useless, since you can also achieve the goal by using normal classes. This is not true. : Nth-child,: nth-last-child and their analogs are very useful 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.
Pseudo-classes of state management
What if you need to change the appearance of an element in a certain state? In this case, CSS pseudo-classes of pressing, guidance and other actions are provided. Let us consider them in more detail.
: Link
This is a pseudo-class of CSS links, not just any, but only those that have not been visited yet. In it, you can specify styles for those elements that the user has not yet crossed.
: Visited
An analogue of the previous version, which only manages the links already visited. By combining these two pseudo-classes, you can customize the appearance of the tags just as you need them. However, note that the states are calculated for specific browsers and reset after clearing the history.
Pseudo-class: target CSS
One of the most interesting pseudo-classes, which with proper use to some extent replaces the use of JavaScript. It allows you to manage an element whose identifier is specified in the address bar of the page. Yes, the first time it's hard to understand. Let's try to make out an example.
Let's say we have 3 div boxes on the page with certain id: 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 will appear the corresponding id.
In CSS, for all div blocks, the display: none property is specified, that is, by default, they are not shown. Use target: div and set its display: block property. Now, when you click on links with certain href, blocks with the corresponding id will be assigned display: block, which means that they will start to appear on the page! If you click on the link with the id1, etc., when you click the link with the id1, you will see a block with id1, and so on.
Still nothing is clear? Try to experiment. Create a page with the above markup and styles. In a couple of minutes you will be fine in everything.
Pseudo-classes that can be applied to any element
Most of the pseudo-classes described above required references for work. However, not everyone needs the elements. A number of options can be applied to absolutely any part of the page.
- : Active is intended for styling elements on which the user clicked the left mouse button;
- : Hover - CSS for the elements to which the user hovers the cursor;
- : 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 the input string for the user name, when the visitor places the cursor in it and starts typing characters.
Remember that: active is active only when you press it. Immediately after the left mouse button stops working, the styles assigned 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 set them a large number of states. For example, by default the button will be blue, when hovering - green, when pressed - red, etc.
Of course, pseudo-classes are fully supported only by modern browsers. For example, in IE6 and 7, you can not use focus, and hover and active in IE6 work only for references. Let's hope that you do not have to work with such browsers, and if you need to, then use conditional comments.
Additional pseudo-classes
The list listed above is not limited to the list. Thanks to modern CSS, you can select only the included elements (: enabled) or only disabled (: disabled), only checked checkboxes and radio (: checked). In brief, we will describe a few more options that you can use to more closely control the appearance of the content.
- : Only-child - the ability to apply a style to an element that is the only child;
- : Lang - to work with elements that have a language set using the lang attribute;
- : Root - used to select the root element. Accordingly, in HTML, this is the tag;
- : Not is a very powerful tool. It makes it possible to restrict the application of styles to certain selectors. Here's an example: .blue-color: not (span). This selector applies styles to all elements with the blue-color class, if they are not .
A complete list of pseudo-classes can stretch for more than one page. Most typesetters use only some of them in practice, preferring to manage states using JavaScript. Yes, it is convenient, but there are a number of points where more effective results can be achieved more easily using the appropriate pseudo-class.
Similar articles
Trending Now