A CSS document description language is constantly evolving. Over time, not only its power and functionality grow, its flexibility and usability also increase.
CSS selectors
Let's get it right. Open any CSS tutorial, at least one section in it will be devoted to types of selectors. This is not surprising, since they are one of the most convenient ways to manage page content. With their help, you can interact with absolutely any HTML elements. Now there are 7 types of selectors:
- for interacting with pseudo-classes;
- to control pseudo-elements.
The syntax is simple. To learn how to use CSS selectors, just read about them. Which option is better for controlling content in your case? Let's try to figure it out.
Tag Selectors
This is the simplest option that does not require special knowledge for recording. To manage tags, you need to use their name. Suppose your site header is wrapped in a <header> tag. To control it in CSS, use the header {} selector.
Advantages - ease of use, versatility.
Disadvantages - a complete lack of flexibility. In the above example, all header tags will be selected at once. But what if you need to manage only one?
Class selectors
The most common option. Designed to manage tags with the class attribute. Suppose your code has three <div> blocks, each of which needs to be given a specific color. How to do it? Standard CSS selectors for tags will not work, they indicate parameters for all blocks at once. The way out is simple. Assign a class to the elements. For example, the first div got class = 'red', the second got class = 'blue', the third got class = 'green'. Now they can be selected using CSS tables.
The syntax is this: specify a point ("."), After which we write the name of the class. To control the first block, use the .red construct. The second is .blue and so on.
Important! The use of clear class attribute values ​​is recommended. It is considered bad form to use translit (for example, krasiviy-blok) or random combinations of letters / numbers (ojfh834871). In this code, you are sure to get confused, not to mention the difficulties that those who will deal with the project after you will have to face. The best option is to use some kind of methodology, such as BEM.
Advantages - quite high flexibility.
Disadvantages - several elements can have the same class, which means that they will be edited at the same time. The problem is solved using the methodology, as well as the inheritance of preprocessors. Be sure to learn less, sass or some other preprocessor, they will greatly simplify the work.
ID selector
As for this option, the opinions of layout and programmers are mixed. Some CSS tutorials do not recommend using IDs at all, as they can cause inheritance problems if applied inappropriately. However, many experts are actively placing them throughout the markup. You decide. The syntax is: the pound sign (“ # "), then the name of the block. For example, #red.
ID differs from class in several ways. Firstly, a page cannot have two identical IDs. They are assigned unique names. Secondly, such a selector has a higher priority. This means that if you set the block class to red and specify a red background color in the CSS tables , then assign it the id blue and 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 - it is easy to get confused in a large number of ID and class.
Important! If you use the BEM methodology (or its analogues), you generally do not need IDs . This layout technique involves the use of unique classes, which is much more convenient.
Universal selector
Syntax: star sign ("*") and curly braces, ie * {}.
It is used to assign specific attributes to all elements of the page at once. When can this come in handy? For example, if you want to set the page property to box-sizing: border-box. It can be used not only to control all components of the document, but also to control all the children of a certain block, for example, div * {}.
Advantages - you can control a large number of elements at the same time.
Disadvantages - not a flexible option. In addition, using this selector in some cases slows down the page.
By attributes
Allows you to control an element with a specific attribute. For example, you have several input tags with a different type attribute. One of them is text, the second is password, the third is number. Of course, you can assign each class or ID, but this is not always convenient. CSS selectors by attributes provide the ability to specify values ​​for specific tags with maximum accuracy. For example, like this:
input [type = 'text'] {}
This attribute selector will select all input 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 has the ability to control elements even with great convenience!
Imagine that your page has input with the attribute placeholder = “Enter the name“ and input placeholder = “Enter the password“. They can also be selected using the selector! The following construction is used for this:
input [placeholder = “Enter the name“] {} or input [placeholder = “Enter the password“]
Possible more flexible work with attributes. Suppose you have several tags with similar title attributes (say, “Caspian” and “Caspian”). To select both, use the following selectors:
[title * = “Caspian“]
CSS will select all elements in the title of which there are Caspian symbols, that is, both Caspian and Caspian.
You can also select tags whose attributes begin with certain characters:
[title ^ = "the character you want"] {}
or end with them:
[title $ = "desired character"] {}.
Advantages - maximum flexibility. You can select any existing page elements without fussing with classes.
Disadvantages - it is used relatively rarely, only in specific cases. Many coders prefer methodologies, since it can be easier to specify a class than to put numerous square brackets and equal signs. In addition, these selectors do not work in Internet Explorer version 7 and below. However, who now needs the old Internet Explorer?
Pseudo-Class Selectors
A pseudo-class indicates the state of an element. For example:: hover - what happens to part of the page when you hover,: visited - visited link. This also includes elements like: first-child and: last-child.
This type of selector is actively used in modern typesetting, because thanks to it it is possible to make a 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, 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 immediately, but within a half second.
Advantages - are actively used to "revitalize" the pages. Easy to use.
Disadvantages - they are not. This is really a convenient tool. However, inexperienced layout designers can get confused in 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 in HTML, but they can still be controlled. Didn’t understand anything? Everything is simpler than it seems. For example, you want to make the first letter in a string large and red, leaving the rest of the text small and black. Of course, you can enclose this letter in a span with a specific class, but it is long and boring. It is much easier to select the entire paragraph and use the :: first-letter pseudo-element. It makes it possible to control the appearance of the first letter.
There are a fairly large number of pseudo-elements. List them in one article is unlikely to succeed. You can find relevant information in your favorite search engine.
Advantages - provide the ability to flexibly customize the appearance of the page.
Disadvantages - newcomers to them are often confused. Many selectors of this type only work in certain browsers.
Summarize
The selector is a powerful tool for controlling the flow of a document. Thanks to it, you can select absolutely every component of the page (even existing only conditionally). Be sure to learn all the options available, or at least write them down. This is especially important if you create complex pages with a modern design and lots of interactive elements.