Custom CSS to override only ONE part of a page

  • Resolved spiralsofdanu

    (@spiralsofdanu)


    9 years, 6 months ago

    Hi All

    I am using a custom CSS rule, inserted in the child stylesheet, to override the link colours on a single page.

    The code looks like this

    .page-id-5983 a {
	color: #000000!important;
}

    However, whilst this works, it is also overriding the colours in the menu bar on that one page, and I want these to remain the same as the rest of the site.
    https://ju-jitsu.co.uk/upcoming-events/

    I think that there might be a way to only target the page, and not the menu, but the searches I’ve tried have not yielded the correct results, and I suspect I am using the wrong search terms.

    Does anyone have ideas what the correct code should be?

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

  • try:

    .page-id-5983 .mh-content a { }

    etc…

    or make the link colors specific to the used page template, by using:

    .page-template-page-calendar .mh-content a { color: #000000!important; }
    Thread Starter spiralsofdanu

    (@spiralsofdanu)

    Thanks Michael.
    In the end, we cracked it with:

    .page-id-5983 .entry a {
                color: #000000!important;
}

    Thank you so much for your help – really appreciated.
    I’m off for a lie down

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS to override only ONE part of a page’ is closed to new replies.