How to change background color only to certain elements of a grid?

Navigation
2

Greetings! I need a little help with a CSS theme, the thing is that I'm developing a Wordpress project and I use a plugin to display the posts on a grid. The theme is that I have placed 3 columns, each photo has a button "Read more", however, in each column the buttons must have different colors, I have researched a bit and I have tried with odd and even but it does not work or I do not know what I am doing wrong. I leave the code of the grid below: 

<div id="post-grid-178" class="post-grid grid">
<div class="grid-nav-top"></div>
<div class="grid-items " id="">
<div class="item mix skin even flat blog ">
<div class="layer-media">
<a href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/"><img alt="" src="/../wp-content/uploads/2018/10/sharon-mccutcheon-617866-unsplash-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">A canary tells its owner when they have visitors</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog ">
<div class="layer-media"><a href="/../2018/10/23/get-to-know-the-dog-army-in-india/"><img alt="" src="/../wp-content/uploads/2018/10/animal-animal-photography-blur-89781-300x208.jpg"></a></div>


<div class="layer-content">
<div class="element element_0 title">Get to know the dog army in India</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/get-to-know-the-dog-army-in-india/">READ MORE</a></div></div>

<div class="item mix skin even flat blog ">
<div class="layer-media"><a href="/../2018/10/23/the-5-fastest-races-in-the-world/"><img alt="" src="/../wp-content/uploads/2018/10/Galgo_español-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">The 5 fastest races in the world</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/the-5-fastest-races-in-the-world/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog ">
<div class="layer-media"><a href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/"><img alt="" src="/../wp-content/uploads/2018/10/eric-han-540884-unsplash-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What should you know before you have a cat?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/"><img alt="" src="/../wp-content/uploads/2018/10/adorable-animal-blur-825949-1.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">Why pitbulls were used to take care of children</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog "><div class="layer-media"><a href="/../2018/10/23/5-exercises-pet-to-lose-weight/"><img alt="" src="/../wp-content/uploads/2018/10/Captura-de-pantalla-2018-10-22-a-las-12.35.25-p.-m.-300x184.png"></a></div>


<div class="layer-content">
<div class="element element_0 title">5 exercises pet to lose weight</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/5-exercises-pet-to-lose-weight/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/what-are-the-right-toys-for-your-pet/"><img alt="" src="/../wp-content/uploads/2018/10/356890-PAVKBG-677-300x300.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What are the right toys for your pet?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/what-are-the-right-toys-for-your-pet/">READ MORE</a></div></div>


<div class="item mix skin odd flat blog "><div class="layer-media"><a href="/../2018/10/23/whats-the-right-dose-of-snacks-for-your-dog/"><img alt="" src="/../wp-content/uploads/2018/10/camylla-battani-780956-unsplash.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What’s the right dose of snacks for your dog?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/whats-the-right-dose-of-snacks-for-your-dog/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/why-dogs-shouldnt-eat-chocolate/"><img alt="" src="/../wp-content/uploads/2018/10/animal-animal-photography-cute-33102-300x200.jpg"></a></div>

<div class="grid-nav-bottom"><div class="pagination dark"><div class="paginate"></div></div></div>
    
asked by Anto J 06.11.2018 в 03:17
source

3 answers

1

You can do it by adding an id to each link, for example 

   /*Codigo CSS*/

    #read1{
        background:;
    }

    #read2{
        background:;
    }

    #read3{
        background:;
    }

    #read4{
        background:;
    }

    #read5{
        background:;
    }

HTML already with id added 

    <div id="post-grid-178" class="post-grid grid"> 
    <div class="grid-nav-top"></div> 
    <div class="grid-items " id=""> 
    <div class="item mix skin even flat blog "> 
    <div class="layer-media"> <a href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/">
    <img alt="" src="/../wp-content/uploads/2018/10/sharon-mccutcheon-617866-unsplash-300x200.jpg"></a>

    </div> <div class="layer-content">
    <div class="element element_0 title">A canary tells its owner when they have visitors</div>
    <a target="_blank" id="read1"class="element element_1 read_more" href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/">READ MORE</a></div></div>
    <div class="item mix skin odd flat blog "> 
    <div class="layer-media"><a href="/../2018/10/23/get-to-know-the-dog-army-in-india/">
    <img alt="" src="/../wp-content/uploads/2018/10/animal-animal-photography-blur-89781-300x208.jpg"></a></div> 

    <div class="layer-content"> 
    <div class="element element_0 title">Get to know the dog army in India</div>
    <a id="read2"target="_blank" class="element element_1 read_more" href="/../2018/10/23/get-to-know-the-dog-army-in-india/">READ MORE</a></div></div> 
    <div class="item mix skin even flat blog "> 
    <div class="layer-media">
    <a href="/../2018/10/23/the-5-fastest-races-in-the-world/">
    <img alt="" src="/../wp-content/uploads/2018/10/Galgo_español-300x200.jpg"></a></div> 

    <div class="layer-content"> 
    <div class="element element_0 title">The 5 fastest races in the world</div>
    <a id="read3" target="_blank" class="element element_1 read_more" href="/../2018/10/23/the-5-fastest-races-in-the-world/">READ MORE</a></div></div> 
    <div class="item mix skin odd flat blog "> 
    <div class="layer-media"><a href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/">
    <img alt="" src="/../wp-content/uploads/2018/10/eric-han-540884-unsplash-300x200.jpg"></a></div> 
    <div class="layer-content"> 
    <div class="element element_0 title">What should you know before you have a cat?</div>
    <a id="read4" target="_blank"  class="element element_1 read_more" href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/">READ MORE</a></div></div> 
    <div class="item mix skin even flat blog ">

    <div class="layer-media">
    <a href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/"><img alt="" src="/../wp-content/uploads/2018/10/adorable-animal-blur-825949-1.jpg"></a></div> 
    <div class="layer-content"> 
    <div class="element element_0 title">Why pitbulls were used to take care of children</div>
    <a id="read5"target="_blank" class="element element_1 read_more" href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/">READ MORE</a></div></div> <div class="item mix skin odd flat blog "><div class="layer-media"><a href="/../2018/10/23/5-exercises-pet-to-lose-weight/"><img alt="" src="/../wp-content/uploads/2018/10/Captura-de-pantalla-2018-10-22-a-las-12.35.25-p.-m.-300x184.png"></a></div>

Now you only add the color to each background tag and it will be different each one. I hope you serve friend

    
answered by 06.11.2018 в 04:37
0

If you add style to each link tag, do you admit it? 

    <a target="_blank" style="background: black;"class="element element_1 read_more" href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/">READ MORE</a>

    
answered by 06.11.2018 в 05:15
0

Here I leave an example made with CSS (I did not modify your HTML) where you use the background of the links in red for the first, then blue, then green, and then start again: 

.grid-items .item a {
  background-color: red;
  color: white;
}
.grid-items .item:nth-child(3n-1) a {
  background-color: blue;
  color: white;
}
.grid-items .item:nth-child(3n) a {
  background-color: green;
  color: white;
}
<div id="post-grid-178" class="post-grid grid">
<div class="grid-nav-top"></div>
<div class="grid-items " id="">
<div class="item mix skin even flat blog ">
<div class="layer-media">
<a href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/"><img alt="" src="/../wp-content/uploads/2018/10/sharon-mccutcheon-617866-unsplash-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">A canary tells its owner when they have visitors</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/a-canary-tells-its-owner-when-they-have-visitors/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog ">
<div class="layer-media"><a href="/../2018/10/23/get-to-know-the-dog-army-in-india/"><img alt="" src="/../wp-content/uploads/2018/10/animal-animal-photography-blur-89781-300x208.jpg"></a></div>


<div class="layer-content">
<div class="element element_0 title">Get to know the dog army in India</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/get-to-know-the-dog-army-in-india/">READ MORE</a></div></div>

<div class="item mix skin even flat blog ">
<div class="layer-media"><a href="/../2018/10/23/the-5-fastest-races-in-the-world/"><img alt="" src="/../wp-content/uploads/2018/10/Galgo_español-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">The 5 fastest races in the world</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/the-5-fastest-races-in-the-world/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog ">
<div class="layer-media"><a href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/"><img alt="" src="/../wp-content/uploads/2018/10/eric-han-540884-unsplash-300x200.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What should you know before you have a cat?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/what-should-you-know-before-you-have-a-cat/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/"><img alt="" src="/../wp-content/uploads/2018/10/adorable-animal-blur-825949-1.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">Why pitbulls were used to take care of children</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/why-pitbulls-were-used-to-take-care-of-children/">READ MORE</a></div></div>

<div class="item mix skin odd flat blog "><div class="layer-media"><a href="/../2018/10/23/5-exercises-pet-to-lose-weight/"><img alt="" src="/../wp-content/uploads/2018/10/Captura-de-pantalla-2018-10-22-a-las-12.35.25-p.-m.-300x184.png"></a></div>


<div class="layer-content">
<div class="element element_0 title">5 exercises pet to lose weight</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/5-exercises-pet-to-lose-weight/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/what-are-the-right-toys-for-your-pet/"><img alt="" src="/../wp-content/uploads/2018/10/356890-PAVKBG-677-300x300.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What are the right toys for your pet?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/what-are-the-right-toys-for-your-pet/">READ MORE</a></div></div>


<div class="item mix skin odd flat blog "><div class="layer-media"><a href="/../2018/10/23/whats-the-right-dose-of-snacks-for-your-dog/"><img alt="" src="/../wp-content/uploads/2018/10/camylla-battani-780956-unsplash.jpg"></a></div>

<div class="layer-content">
<div class="element element_0 title">What’s the right dose of snacks for your dog?</div><a target="_blank" class="element element_1 read_more" href="/../2018/10/23/whats-the-right-dose-of-snacks-for-your-dog/">READ MORE</a></div></div>

<div class="item mix skin even flat blog "><div class="layer-media"><a href="/../2018/10/23/why-dogs-shouldnt-eat-chocolate/"><img alt="" src="/../wp-content/uploads/2018/10/animal-animal-photography-cute-33102-300x200.jpg"></a></div>

<div class="grid-nav-bottom"><div class="pagination dark"><div class="paginate"></div></div></div>

I hope it serves you.

Good luck!

    
answered by 06.11.2018 в 14:15
How to automate the login in a web how to consume delphi dll in c #