[Support request] CSS Simplify

Home Forums Support CSS Simplify

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1451685
    Matic

    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.

    #1451826
    David
    Staff
    Customer Support

    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.

    #1451940
    Matic

    Thanks for a fantastic and thorough answer. I will do what you recommended.

    Have a great day!

    #1451985
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.