2

¡Saludos! Necesito una ayudita con un tema de CSS, la cosa es que estoy desarrollando un proyecto con Wordpress y utilizo un plugin para mostrar los post en un grid.El tema es que he colocado para que se muestren 3 columnas, cada foto tiene un botón de "Read more", sin embargo, en cada columna los botones deben tener colores diferentes, he investigado un poco y he intentado con pares e impares pero no me funciona o no sé que estoy haciendo mal. Dejo el código de la grid a continuacion:

<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>

4
  • No entiendo la consulta, la idea es que siempre el primer botón sea azul, el siguiente rojo, el siguiente verde y el posterior vuelva a ser azul? Commented el 6 nov. 2018 a las 2:27
  • Son esos 3 botones amigo, la idea es que siempre tengan esos colores como ha dicho y que todos los botones de las filas debajo tengan los mismos colores de cada uno ¿Si me explico?
    – Anto J
    Commented el 6 nov. 2018 a las 3:27
  • Yo investigué un poco y encontré esto, pero lo aplico y se cambia en todos, no se que estoy haciendo mal: w3.org/Style/Examples/007/evenodd.pt_BR.html
    – Anto J
    Commented el 6 nov. 2018 a las 3:29
  • Deberías poner también el CSS que estás intentado aplicar para ver cual es el problema y porque no te funciona. A lo mejor no tienes los selectores adecuados o cin tu estructura HTML necesitas otra solución
    – user7176
    Commented el 6 nov. 2018 a las 8:40

3 respuestas 3

1

Lo puedes hacer agregando un id a cada enlace por ejemplo

   /*Codigo CSS*/

    #read1{
        background:;
    }

    #read2{
        background:;
    }

    #read3{
        background:;
    }

    #read4{
        background:;
    }

    #read5{
        background:;
    }

El HTML ya con id agregado

    <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> 

Ahora solo agregas el color a cada etiqueta background y sera diferente cada uno. Espero te sirva amigo

2
  • Si no es eso lo que necesitas dime y con gusto te ayudare. Commented el 6 nov. 2018 a las 3:39
  • Si estoy viendo la web ahorita y en vista movil tocaria modificar el width de las imagenes tambien porque usan como el 90% de la pantalla y se ven estiradas y si le pones el style directo en el html de cada etiqueta a es decir style=" background:red;" Commented el 6 nov. 2018 a las 4:12
0

Si agregas es estilo en cada etiqueta de enlace te lo admite?

    <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>

lo deje asi agregando el style en cada una directamente

5
  • Si lo puedo hacer, pero por ejemplo en este caso me pondría negro todos los botones, ya lo aplico para que vea amigo
    – Anto J
    Commented el 6 nov. 2018 a las 4:20
  • Si ya vi estan todos en negro Commented el 6 nov. 2018 a las 4:21
  • No puedes cambiar la clase todos tienen que ser iguales en class? Commented el 6 nov. 2018 a las 4:22
  • Si amigo porque si cambio la clase no me muestra los botones debido a que estos generan la clave con el ID del grid, ya le adjunto el código PHP
    – Anto J
    Commented el 6 nov. 2018 a las 4:28
  • Continuemos el debate en el chat. Commented el 6 nov. 2018 a las 4:42
0

Acá te dejo un ejemplo hecho con CSS (no modifiqué tu HTML) donde usa el fondo de los links en rojo para el primero, después azul, después verde, y después vuelve a comenzar:

.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>

Espero te sirva.

¡Suerte!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.