CSS selectors in the showroom
Web development technologies are based on simple principles that are often difficult to understand. With this, perhaps, all novice programmers are faced. One of the approaches to understanding technologies, and therefore to their effective application, is to look at them through analogies from the real world.
Here, for example, CSS selectors. If you know that they are used to stylize the elements of web pages, but do not quite understand how they work, I believe that today you have a chance to fix it. In order to figure out how CSS selectors work, let's go to a car dealership.
So, you ended up in a car dealership in which cars of different brands, colors, issued at different times are displayed. Sellers are usually found in such places, but we will not include them in our example.
')
Cars, as well as their characteristics, can be classified using the same system that underlies the CSS selectors. And if you understand that the cars in the figure below can be divided into sedans, convertibles and light trucks, this means that you can understand how the CSS selectors are designed.
To begin, let us describe the cars for sale using HTML code:
We are going to look at four basic ways to style HTML elements with CSS. Namely:
Consider these options in more detail.
In the above HTML code example, each <div> tag represents a separate car. Suppose we need, using CSS, to assign certain properties to all these cars. What do they have in common with sedans ( sedan ), convertibles ( convertible ) or light trucks ( truck )? In fact, the list can be very long, but we will limit ourselves to three properties. Each of our cars has four wheels, the maximum height of the car does not exceed 270 centimeters, and the body of each is made of steel. We write these arguments as follows:
From this simple example we will begin. As you can see, here are some CSS properties that will be applied by default to <div> tags. As to those that are already in the code, and to those that we can add to it later. Pay attention to the fact that this code would be appropriate to call "pseudo-CSS", since when styling, say, the same <div> tags on a real web page, very different properties will work.
In fact, we can develop this idea further. Let us describe with the help of HTML the features of the interior design of cars. Here, for example, how to describe a sedan:
Sedans have two rows of seats. The front row ( frontRow ) contains two seats, the back row ( backRow ) - three. Extreme seats in the rows are near the windows. Do car seats have any common properties? Find out a little later.
Take a look at the very first fragment of the HTML code that contains a description of all the cars for sale. Notice that each <div> tag that symbolizes a car is assigned a set of classes. These classes are used to give general properties to all members of a class.
Let's say we assign the year2005 class to various sedans, trucks and cabriolets that came off the assembly line in 2005. What can such cars have in common? For example - radio with CD-player! We reflect this in the CSS code that sets the style of the class.
But what if we have a crewCab class, which symbolizes the presence of a double cabin in a car, in particular, a truck? Trucks with such a cabin have two rows of seats, in which, in total, there are five seats. This class can be used specifically for trucks. Classes combine by writing them one after another through a dot:
Classes are a more specific type of element than referring to HTML elements. For example, the main body material of all cars by default is steel. But you need to reflect the fact that some cars have an aluminum body. To do this, you can create an aluminum class, which, when applied to the <div> tag , overrides the material property of all members of the class. Recall: above, we set the material property for all <div> elements to the value of steel .
Now, by applying the aluminum class to some of the <div> elements, we change steel to aluminum .
Thus, if the same property has a different value in the element style and in the class style that apply to the same element, this element will receive the property specified for the class.
HTML elements can be assigned identifiers that must be unique for each element. This is the most accurate way to refer to a single item. The style assigned to the identifier overrides all other styles. The item ID is very similar to a car license plate.
Let's say we have a car with number 123 XYZ . The previous owner wanted this car painted in a unique shade of purple. Here is a description of this fact in CSS:
The element and its identifier are related as one-to-one. It is very similar to real cars and their license plates. Two cars cannot have identical numbers. The identifier is, in addition, the most powerful way to address an element, thanks to which it is possible to create exceptions to the rules that all elements must obey.
Suppose we need cars that are assigned a class leather Seats have leather seats. Take a look at the second fragment of the HTML code from the “Element Types” section, in which we described the car interior design.
In order to achieve the desired effect, for cars with leather seats, you can also assign a leather class to each <div> tag with a seat class. But here's the thing: this approach will allow us to turn only to the seats, to affect with the help of CSS only the “leather seats”, and not the “cars with leather seats”. After all, in the <div> tag corresponding to the entire car, there is no mention of the seats.
Tags with class seat are located inside tags with classes sedan , convertible or truck . This means that the “seats” in our example are descendants of “cars”. Therefore, in order for us to have the opportunity to apply to both the “car with leather seats” and the “seats” themselves, we will assign a class leatherSeats to cars with leather seats, and to refer to the seats we use the following design:
Note that class names are separated by a space. This is the so-called descendant selector. As a result, the CSS code from the example allows you to stylize all the elements with the class seat , which are in a container that is assigned the class leatherSeats .
Now suppose that we need to indicate that the front seats of some cars are heated. In such a situation, you can use the selector ~ , which is known as the relative selector. This approach allows you to assign styles to elements relative to their neighbors.
For example, it might look like this:
And here's another example. Let's say a certain car model has very unusual properties. For example, the 2008 Chevrolet light truck is equipped with DVD players built into the rear seats. Here are some arguments to help express this in the form of CSS:
As a result, it may look like this:
If you had a bad idea of ​​how to work with CSS, I hope this example helped you to understand what was previously unclear. Its main purpose is to go from abstract concepts of HTML and CSS, to quite tangible, specific cars, to help you imagine how CSS styles affect HTML documents. And, if you managed to put in your head what we were talking about, open the editor, at least the same codepen.io , take the HTML and CSS directories, and start your own experiments with the code that will allow you to consolidate in practice everything what you know and understand.
Here, for example, CSS selectors. If you know that they are used to stylize the elements of web pages, but do not quite understand how they work, I believe that today you have a chance to fix it. In order to figure out how CSS selectors work, let's go to a car dealership.
So, you ended up in a car dealership in which cars of different brands, colors, issued at different times are displayed. Sellers are usually found in such places, but we will not include them in our example.
')
Cars, as well as their characteristics, can be classified using the same system that underlies the CSS selectors. And if you understand that the cars in the figure below can be divided into sedans, convertibles and light trucks, this means that you can understand how the CSS selectors are designed.
To begin, let us describe the cars for sale using HTML code:
<section> <div class='sedan blue 2015 leatherSeats'></div> <div class='sedan red 2012 hatchback'></div> /** 10 more */ </section> <section> <div id="123xyz" class='convertible purple audi v8'></div> <div class='convertible green mustang dualExhaust'></div> /** 10 more */ </section> <section> <div id="789abc" class='truck 2014 seatWarmer crewCab'></div> <div class='truck 2013 powerSteering'></div> /** 10 more */ </section> We are going to look at four basic ways to style HTML elements with CSS. Namely:
- By type of item. In our case, this is a <div> tag containing information about the car.
- By class (class). For example, this is the blue class assigned to the first car in the code.
- By id (id). An example of an identifier from the code is 123xyz .
- By relationship with other elements
Consider these options in more detail.
Item Types
In the above HTML code example, each <div> tag represents a separate car. Suppose we need, using CSS, to assign certain properties to all these cars. What do they have in common with sedans ( sedan ), convertibles ( convertible ) or light trucks ( truck )? In fact, the list can be very long, but we will limit ourselves to three properties. Each of our cars has four wheels, the maximum height of the car does not exceed 270 centimeters, and the body of each is made of steel. We write these arguments as follows:
div{ wheels: 4; max-height: 270; material: steel; } From this simple example we will begin. As you can see, here are some CSS properties that will be applied by default to <div> tags. As to those that are already in the code, and to those that we can add to it later. Pay attention to the fact that this code would be appropriate to call "pseudo-CSS", since when styling, say, the same <div> tags on a real web page, very different properties will work.
In fact, we can develop this idea further. Let us describe with the help of HTML the features of the interior design of cars. Here, for example, how to describe a sedan:
<div class='sedan'> <div class='frontRow'> <div class='window'></div> <div class='seat'></div> <div class='seat'></div> <div class='window'></div> </div> <div class='backRow'> <div class='window'></div> <div class='seat'></div> <div class='seat'></div> <div class='seat'></div> <div class='window'></div> </div> </div> Sedans have two rows of seats. The front row ( frontRow ) contains two seats, the back row ( backRow ) - three. Extreme seats in the rows are near the windows. Do car seats have any common properties? Find out a little later.
Classes
Take a look at the very first fragment of the HTML code that contains a description of all the cars for sale. Notice that each <div> tag that symbolizes a car is assigned a set of classes. These classes are used to give general properties to all members of a class.
Let's say we assign the year2005 class to various sedans, trucks and cabriolets that came off the assembly line in 2005. What can such cars have in common? For example - radio with CD-player! We reflect this in the CSS code that sets the style of the class.
.year2005{ muiscPlayer: cd; } But what if we have a crewCab class, which symbolizes the presence of a double cabin in a car, in particular, a truck? Trucks with such a cabin have two rows of seats, in which, in total, there are five seats. This class can be used specifically for trucks. Classes combine by writing them one after another through a dot:
.truck.crewCab{ seats: 5; } Classes are a more specific type of element than referring to HTML elements. For example, the main body material of all cars by default is steel. But you need to reflect the fact that some cars have an aluminum body. To do this, you can create an aluminum class, which, when applied to the <div> tag , overrides the material property of all members of the class. Recall: above, we set the material property for all <div> elements to the value of steel .
div{ material: steel; } Now, by applying the aluminum class to some of the <div> elements, we change steel to aluminum .
.aluminum{ material: aluminum; } Thus, if the same property has a different value in the element style and in the class style that apply to the same element, this element will receive the property specified for the class.
Identifiers
HTML elements can be assigned identifiers that must be unique for each element. This is the most accurate way to refer to a single item. The style assigned to the identifier overrides all other styles. The item ID is very similar to a car license plate.
Let's say we have a car with number 123 XYZ . The previous owner wanted this car painted in a unique shade of purple. Here is a description of this fact in CSS:
#123xyz{ color: weirdpurple; } The element and its identifier are related as one-to-one. It is very similar to real cars and their license plates. Two cars cannot have identical numbers. The identifier is, in addition, the most powerful way to address an element, thanks to which it is possible to create exceptions to the rules that all elements must obey.
Relationship between elements
Suppose we need cars that are assigned a class leather Seats have leather seats. Take a look at the second fragment of the HTML code from the “Element Types” section, in which we described the car interior design.
In order to achieve the desired effect, for cars with leather seats, you can also assign a leather class to each <div> tag with a seat class. But here's the thing: this approach will allow us to turn only to the seats, to affect with the help of CSS only the “leather seats”, and not the “cars with leather seats”. After all, in the <div> tag corresponding to the entire car, there is no mention of the seats.
Tags with class seat are located inside tags with classes sedan , convertible or truck . This means that the “seats” in our example are descendants of “cars”. Therefore, in order for us to have the opportunity to apply to both the “car with leather seats” and the “seats” themselves, we will assign a class leatherSeats to cars with leather seats, and to refer to the seats we use the following design:
.leatherSeats .seat{ material: leather; } Note that class names are separated by a space. This is the so-called descendant selector. As a result, the CSS code from the example allows you to stylize all the elements with the class seat , which are in a container that is assigned the class leatherSeats .
Now suppose that we need to indicate that the front seats of some cars are heated. In such a situation, you can use the selector ~ , which is known as the relative selector. This approach allows you to assign styles to elements relative to their neighbors.
For example, it might look like this:
.driverSeat ~ .seat{ seatWarmers: true; } And here's another example. Let's say a certain car model has very unusual properties. For example, the 2008 Chevrolet light truck is equipped with DVD players built into the rear seats. Here are some arguments to help express this in the form of CSS:
- You need to start with several classes, as we are talking about a very specific type of car. For example, it could be div.truck.chevy.year2008 .
- Then you should think about how you can apply to the rear seats. The back row of seats can be assigned an extra class. Say something like .backRow . Or you can use the last-child selector, which allows you to select the last descendant, given that in the description of the car's interior, first go the front seats, then the rear.
- And finally, you need to refer to the seats themselves.
As a result, it may look like this:
div.chevy.truck.year2008 .backRow .seat{ media: dvdPlayer; } Results
If you had a bad idea of ​​how to work with CSS, I hope this example helped you to understand what was previously unclear. Its main purpose is to go from abstract concepts of HTML and CSS, to quite tangible, specific cars, to help you imagine how CSS styles affect HTML documents. And, if you managed to put in your head what we were talking about, open the editor, at least the same codepen.io , take the HTML and CSS directories, and start your own experiments with the code that will allow you to consolidate in practice everything what you know and understand.
Source: https://habr.com/ru/post/317430/
All Articles