Multiple selectors merged in CSS
To select an element that simultaneously matches several selectors, you need to write these selectors together, without spaces.
For example, the following selector will select an element that has both the class bbb and the class zzz:
.bbb.zzz {
}
And the following selector will select the heading h2, which simultaneously has the class bbb and the class zzz:
h2.bbb.zzz {
}
In this way, you can construct arbitrary selector structures. The order of the selectors used does not matter, except for the rule that tag selectors must be placed at the very beginning.
That is, for example, the selectors .bbb.zzz and .zzz.bbb are completely equivalent.
Additionally, you can form selectors using id, such as: #elem.eee, or h2#elem.eee, or h2.eee#elem and so on.
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.bbb.zzz {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
h2.bbb.zzz {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
#elem.bbb {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
#elem.bbb.zzz {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
h2#elem.bbb {
color: red;
}
