Archived topic
CSS Simplify
3 replies · Started by Matic on September 20, 2020
Hi,
I have a 2-part question.
Let's work with the real example of my CSS code:
body.home .inside-article, body.archive .inside-article {
some-property: some-value;
}
body.home .entry-meta a, .entry-meta a:visited, .entry-title a, .entry-title a:visited, .entry-meta {
property-1: value-1;
}
body.archive .entry-meta a, .entry-meta a:visited, .entry-title a, .entry-title a:visited, .entry-meta {
property-1: value-1;
}1. FIRST QUESTION
I use body.home and body.archive selectors to specify only the homepage and archives as I don't want changes to show on my blog posts. As you can see with the first line of code, I managed to group body.home .some-class and body.archive .some-class, but when there's a a:visited (or :hover), I cannot group it anymore and I have to create two brackets, one for body.home and another for body.archive.
Is there a way to group those, so I wouldn't have to have so much clutter (an excess code)?
2. SECOND QUESTION
Is there an even more elegant solution. I was thinking along the lines of @media only screen { .class1, .class2, etc}, so my final code would look something like that?
@body.home, @body.archive {
.inside-article {
some-property: some-value;
}
.entry-meta a, .entry-meta a:visited, .entry-title a, .entry-title a:visited, .entry-meta {
property-1: value-1;
}
}I tried this, but it didn't work.
Is there a way to do this?
Cheers,
Matic
EDIT: "property-1: value-1;" was made up to shorten my otherwise long code with several real properties.
Hi there,
you could do this:
body:not(.single) .inside-article {
/* styles here */
}the :not psuedo selector allows you to apply a style globally aside from any elements it contains in this case that is the single body class that exists only on the Singe Post.
You can string them together, so to exclude Posts and Pages you would do this:
body:not(.single):not(.page) .inside-article {
/* styles here */
}As an alternative you can drill the DOM and find selectors specific for your need. For example:
.generate-columns-container .inside-article {
/* styles here */
}The generate-columns-container wraps the articles list on home and archives that are displayed in columns. So that is probably the most effective method for your needs as it will only target articles displayed within post columns.
2. No - not possible with CSS - that would require a SCSS or SASS compiler. You could use use one of these methods in a desktop IDE to write your code, and then compile it to CSS and copy it to your WP styles. But you cannot do it natively in WordPress.
Thanks for a fantastic and thorough answer. I will do what you recommended.
Have a great day!
Glad to be of help
