Now let’s talk about class combinations

Class hierarchy

In addition to describing a specific class within the <style> tag, we can also define a class hierarchy.

Let’s say I want all adjectives in the first paragraph to be white, but I don’t want to change the adjective class. Instead, I can create a new combined hierarchical style like this:

<style>
.paragraph1 {/* ... */}
.paragraph2 {/* ... */}
.paragraph3 { /* ... */ }
.adjective {/* ... */}
.adjective:hover { /* ... */ }

/* added a new style, the space between class names is mandatory */
.paragraph1 .adjective {
    background: white;
}
</style>

Since the combined style has a higher priority than the simple style, the colour from the .adjective class will be overwritten and we will get:

In general, by creating different combinations, you can achieve very interesting effects. For example, I can change the colour of all adjectives when hovering over a paragraph. To do this, I add a style with a pseudo-class:

<style>
/* ... */
    
.paragraph1 .adjective {
    background: white;
}

/* now when you hover over a paragraph, the colour of all adjectives will change */
.paragraph1:hover .adjective {
    background: red;
}
</style>

The result will be as follows

However, if I want the adjectives to change colour when hovering inside the first paragraph, I will need to add another style

.paragraph1:hover .adjective:hover {
    background: yellow;
}

Combining classes

So far, we have only specified one class for each tag. It is possible to specify multiple classes. This is especially common in plug-in libraries with styles, which we will try later.

This is used for decomposition purposes. For example, I want to create a separate style for a block with a frame.

To do this, I split the adjective class into two, like this:

.adjective {
    /* here I left only the colour and activation of smooth transitions */
    background: yellowgreen;
    transition: all 0.3s;
}

.bordered {
   /* in this new style I put everything related to the block and frame */
    border: 2px dashed black;
    display: inline-block; 
    margin: 2px; 
    padding: 0 4px;
    border-radius: 8px;
    box-shadow: 0 0 8px grey;
}

Because of this, all my borders will naturally disappear

But now I can add frames to all tags as I wish without having to create a new class.

For example, I can add a paragraph by adding a second class to the class attribute with a space:

<div class="paragraph1 bordered">
    <!-- ... -->
</div>

The result will be as follows:

Here, my indents have been lost, so I can add a clarifying class that will take into account the behaviour of the paragraph in combination with the bordered class. To do this, I define the combined style as follows:

/* we don't put a space here, we just glue the class names together */
.paragraph1.bordered {
    margin: 16px 0;
    border-width: 6px;
}

The result will be as follows

Well, now we can do the task

Task