Menu
How can I apply a CSS style block to several different classes? For instance, I have
<div class="foo">...</div>
<div class="bar">...</div>
...
.foo .bar ??? // This selector should apply to both classes
{
font-size:50%;
...
}
396
You can apply multiple CSS property or value pairs for styling the element by separating each one with a semicolon within the style attribute. You should use inline CSS styles sparingly because it mixes the content marked by HTML with the presentation done using CSS.
It is possible to give several items on your page the same style even when they don't have the same class name. To do this you simply list all of the elements you want to style and put a comma between each one.
CSS class selector The class selector selects HTML elements that have a class attribute that matches the selector. The class selector is useful for targeting multiple elements, things like cards or images that you want to have matching styles.
To apply the same CSS styles to more than 1 HTML elements tags, you can separate various HTML element tags selectors by using the , (comma character) in CSS. This will set the text color of both paragraphs to red . Like this, you can apply one style to many HTML element tag selectors separated by the comma character.
.foo, .bar
{
font-size:50%;
...
}
Source: https://www.w3.org/TR/CSS22/selector.html#grouping
60
use a comma:
.foo, .bar {
....
}
The converse, applying multiple classes to a single element is possible too:
<html>
<head>
<style type="text/css">
.foo {
}
.bar {
}
</style>
</head>
<body>
<!--
space separated list of classnames
to apply multiple css classes to a single element.
-->
<div class="foo bar">...</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
