css multiple classes same style

Tagged: css

This topic has 1 reply, 2 voices, and was last updated 1 year, 10 months ago by elvin.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
January 4, 2022 at 10:27 pm #36307

Tom
Participant

Hi

I want to show use one css for mutilple class.

Code works for single class as below:
/* Mobile show two columns per row */
@media (max-width: 768px) {
#wpsp-7857 {
font-size: 0.5em;
}

#wpsp-7857 article {
width: 48%;
margin-right: 2%;
float: left;
}

}

It doesn’t work fine if adding multiple wpsp id. With applying below css, only the last wpsp id(#wpsp-7990) show two columns per row on mobile. The others don’t.
/* Mobile show two columns per row */
@media (max-width: 768px) {
#wpsp-7857, #wpsp-7885, #wpsp-7990 {
font-size: 0.5em;
}

#wpsp-7857, #wpsp-7885, #wpsp-7990 article {
width: 48%;
margin-right: 2%;
float: left;
}

}

I guess it’s because of my adding way is wrong, but I don’t know how to set it correctly for letting css work for mutilple wpsp id.

Could I get a help?

Thanks

January 5, 2022 at 7:16 pm #36312
elvin
Moderator
Hi there,

WPSP’s section tag generally has multiple selectors aside from the unique id (the one you’re currently using).

Here’s an example format:

<section id="wpsp-208" class=" wpsp-card wp-show-posts-columns wp-show-posts" style="">

the id="wpsp-208" attribute’s equivalent as a CSS selector is #wpsp-208 like what you have now but you can also use the class="" attribute if you wish to be less specific so you can apply the CSS to multiple lists.

On the class="", we can see that there are multiple classes. We can use either 1 of them or all of them at once depending on purpose.

Example:
```
.wp-show-posts {
font-size: 0.5em;
}
```
This CSS applies to ALL WPSP lists because ALL WPSP lists have the class wp-show-posts.

Now let’s say you want to set exemptions. We can use the :not CSS selector and unique id="" attribute for that.

Example: applying a CSS to ALL WPSP lists EXCEPT #wpsp-7857
```
.wp-show-posts:not(#wpsp-7857) {
font-size: 0.5em;
}
```
That’s the basics. The rest will require familiarity with what class WPSP adds depending on its settings.

For more about selectors, I suggest learning more about CSS. Here’s a good source – https://www.w3schools.com/css/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

[Support request] css multiple classes same style