Can I combine CSS media queries with CSS selectors?

Question

I'm styling a web page for displaying articles. The main content is the article body, but there's also a list of links to related articles. I want the list normally to be displayed to one side of the article, but to be displayed underneath the article in either of the following situations:

The viewport is < 992px wide
There is wide content in the article, e.g. a large table

I've achieved this with the following CSS...

.article-sidebar {
    text-align: left;
}
@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
    }
}
@media (max-width: 991px) { 
    .article-sidebar {
        padding-top: 46px;
        border-top: 1px solid #eeeeee;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

...plus some JavaScript that works out if the article has any "wide children" and removes the 'article-sidebar' class and adds the 'article-sidebar-bottom' class if so.

However, I don't like all the duplication of the styling between >= 991px .article-sidebar and .article-sidebar-bottom. I understand that if there was duplication between different media queries for the same class I could combine them as explained here, and if media queries weren't involved I could just comma separate the CSS selectors, but is there any way to avoid repeating myself in this case?

You'll have to restructure your markup in order to increase the amount that you can share across screen sizes. It's kind of odd that the styling is duplicated between the `.article-sidebar` and `.article-sidebar-bottom` classes. If you want that styling on the sidebar, it should be applied to just one class. — Derek Peterson, Nov 06 '15 at 19:18
@DerekPeterson - Thanks, I think restructuring was indeed the way to go. I've done this and posted my own answer. — James K, Nov 06 '15 at 20:37

score 2 · Accepted Answer · edited Aug 11 '21 at 10:08

I've now played about with this a bit more and come up with a solution that doesn't duplicate the code in the same way:

.article-sidebar, .article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
        border-top: initial;
        padding-left: initial;
        padding-right: initial;
    }
}

I think my problem was that I was thinking 'top down', i.e. starting with large screens and then adding support for smaller devices in the media query. If it's the larger screens that are handled by the media query then I think it becomes much neater.

Thanks to everyone who's commented so far. Although I've found a better solution to my own problem I'd still be interested in an answer to the original phrasing of the question... i.e. whether anyone can provide the syntax to use the same style for different combinations of class & media query (if this syntax exists...)

Same. Because if I cannot find a solution, then I am going to have to repeat my code block a good five times. — Pangamma, Jan 10 '18 at 00:15

Can I combine CSS media queries with CSS selectors?

1 Answers1