Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Applying a css style to several patterns

Tags:

html

css

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%;
  ...
}
like image 396
ripper234 Avatar asked Jan 23 '10 16:01

ripper234


People also ask

How do I apply multiple styles in CSS?

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.

How do you target multiple elements in 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.

What selector should you use when applying a style to multiple elements?

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.

How do you apply the same style to multiple HTML elements?

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.


2 Answers

.foo, .bar
{
  font-size:50%;
  ...
}

Source: https://www.w3.org/TR/CSS22/selector.html#grouping

like image 60
Kobi Avatar answered Oct 20 '22 12:10

Kobi


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>
like image 44
Roland Bouman Avatar answered Oct 20 '22 12:10

Roland Bouman