How to change the default link style in css/html

Question

I have set up the default style for all links on the site but then I want to have different style for links in sidebar.

On the sidebar, I put the following html:

<div class="toppost">

<p><a href="https:" rel="attachment noopener wp-att-222">Title 1</a></p>

<p><a href="https://" rel="attachment noopener wp-att-222">Title 2</a></p>

</div>

In css, I have the following code:

.toppost p {
    background-color: #ffc531;
}
.toppost:hover p {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

Then, when you look at the sidebar, part of the background color changes to what I set up for all p but the part with the link has the default color that is set up for whole site.

I have a basic knowledge of css and html and hopefully I managed to clearly explain this. If you have any idea how I can remove default style for links just for this section on the site, please let me know. I will much appreciate any help.

Thank you!

Answer 1

You probably set up the whole site default with a CSS target such as this:

a {
  /* styles here */
}

But now you're only targeting the p elements. The sidebar links therefore still use the styles which are applied to them directly (the default styles from above) rather than the ones applied only to their parents, the p elements in your sidebar.

To solve this, change the CSS for your sidebar so that it also targets the links directly:

.toppost p a {
    background-color: #ffc531;
}
.toppost:hover p a {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

Answer 2

A more maintainable way is to CSS classes. There are countless ways to do this, one of which is BEM ( https://css-tricks.com/bem-101/ ). It can help a lot as your structure grows.

Also, follow the indication made in the comment: replace the "div" to an "ul", and each paragraph ("p") to a "li". This is more appropriate as it better represents the structure of your document.

HTML (original structure):

<div class="toppost">

  <p><a href="https:" rel="attachment noopener wp-att-222" class="toppost__link">Title 1</a></p>

  <p><a href="https://" rel="attachment noopener wp-att-222" class="toppost__link">Title 2</a></p>

</div>

HTML (recommended structure):

<ul class="toppost">

  <li><a href="https:" rel="attachment noopener wp-att-222" class="toppost__link">Title 1</a></li>

  <li><a href="https://" rel="attachment noopener wp-att-222" class="toppost__link">Title 2</a></li>

</ul>

CSS (the same for both):

.toppost__link  {
    background-color: #ffc531;
}
.toppost:hover .toppost__link {
    color: #ffc531 ;
    background-color: #000 ;
    text-decoration: underline ;
}

Answer 3

If you want to change the colour of a link then the selector you write must target the link and not just the paragraph containing the link.