How do I style individual webpage objects? The common way is to assign a class, identifier, or call by tag. But this layout does not always work. Especially when it comes to nested menus, the last elements of the list, CSS styles of active or visited links. It is for such cases that pseudo-classes were created. This is a special kind of selectors that protect the developer's nervous system and greatly simplify layout.
Syntax and Rules for Using Pseudo-Classes
A distinctive feature of pseudo-classes is the colon. It is this sign that distinguishes them from conventional selectors. After the colon, the name of the pseudo-class is necessarily without a space. In the end, if necessary, the value in brackets is indicated in the form of an integer, formula or keyword.
li:last-child{ padding-bottom: 0; }
Sometimes you can find a double spelling (: :). This specification was added in CSS3 to refer to the pseudo-elements :: backdrop, :: before, :: after. They differ in that they add styles to objects that are not in the DOM tree. For example, an uppercase letter or the first line.
p::before{ content: ''; display: block; width: 100%; color: #222; }
We will not analyze all thirty selectors, we will take only those that mean in CSS the last element (: last-child), the first (: first-child). And also consider a special pseudo-class (: nth-child), which allows you to access children by serial number. We will study on the example of creating a site navigation panel:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ width: 100%; padding: 0; margin: 0; background: #000; } nav{ display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; background: rgba(255,255,255,.1); } nav a{ color: #fff; text-decoration: none; text-transform: uppercase; font: bold 15px Arial, sans-serif; padding: 1em; } </style> </head> <body> <nav> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav> </body> </html>
The result was a simple menu with four white links. Using pseudo-classes, we can selectively customize each navigation item, resize it, or make them colorful. For example, to indicate in CSS the last element in red and the first green, you need the following code:
nav a:first-child{ color: green; } nav a:last-child{ color: red; }
Universal selector: nth-child
This selector is a structural pseudo-class. With its help, you can manage objects by their numbering. The ordinal number is indicated in brackets and begins with a unit. If you need the last element in CSS, use the following entry:
nav a:nth-child(-1){ border-right: 1px solid red; }
In addition to integer values: nth-child accepts keywords as values:
- odd - odd elements;
- even are even.
Now to add a yellow border to every second link in the navigation panel, it’s enough to write:
nav a:nth-child(even){ border-bottom: 1px solid yellow; }
The combined use of pseudo-classes
Cascading style sheets allow you to combine several pseudo-classes in one selector at once. This approach can come in handy when you need to assign specific styles to all CSS elements except the last.
nav a:not(:last-child){ padding-right: 10px; }
Literally, the entry above tells the browser to add an indent to the right of all the <a> links inside the <nav> navigation, except for the last element. CSS selector: not means "everything except". The brackets indicate the names of classes, identifiers, pseudo-elements, and tag names.
Now, knowing about the possibility of combining selectors, we add our interactivity navigation panel. To do this, we will use the state pseudo-class: hover, which adds the necessary styles when you hover the mouse over an object.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ width: 100%; padding: 0; margin: 0; background: #000; } nav{ display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; background: rgba(255,255,255,.1); overflow: hidden; } nav a{ color: #fff; text-decoration: none; text-transform: uppercase; font: bold 15px Arial, sans-serif; padding: 1em; transition: all .5s ease-in-out; } nav a:not(:last-child){ padding-right: 2em; } nav a:hover{ border-bottom: 1px solid#D349CE; transform: scale(1.03); opacity: .8; } nav a:nth-child(2):hover{ border-color: #46C5CD; } nav a:nth-child(3):hover{ border-color: #3EDC79; } nav a:nth-child(-1):hover{ border-color: #f69; } </style> </head> <body> <nav> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav> </body> </html>
Using the nav a: hover selector, we make sure that the appearance of the links changes each time you hover. So the user will be much easier and more interesting to interact with the site. Note the notation nav a: nth-child (n). Thanks to it, each menu item has its own underline color in the state: hover.
You can go further and add: focus and: active for the <a> elements, which will change the behavior of links during clicks. Or color them in a different color and increase the font size in the active state. With CSS selectors, even static HTML pages come to life without a hint of JavaScript.