We're merging with GenerateBlocks! Learn more here.

[Support request] css multiple classes same style

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support css multiple classes same style

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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

    #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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.