Tengo esta estructura en HTML:
Y el caso es que el pagination a
, coge estilos de los gallery-container a
, cosa que no quiero que ocurra, como podría hacer para que solo cogiera los estilos que le he dado en pagination a
??
Coge también esos estilos por que ese a
también esta dentro de .gallery-container
,
lo que tienes que hacer es indicar que los segundos estilos que pones se apliquen solo a los a
que sean hijos directos de .gallery-container
de esta manera:
.gallery-container > a { estilos }
Aquí tienes un ejemplo:
.a > p {color:red;}
<div class="a">
<p>aaaaaa</p>
<div class="b">
<p>bbbbbb</p>
</div>
</div>
Se puede solucionar con los selectores class
e id
.
El valor del atributo id
de un elemento es único; es decir, no debería haber otro elemento con el mismo nombre de identificador (id) dentro de tu documento HTML. Dentro de los selectores que tenemos en CSS (por tipo, por clase y por id), cada uno tiene un determinado peso, siendo el selector de id el que tiene más peso.
Si cambias el class
por un id
en el div de paginación quedaría así:
#pagination a {
text-align:center;
width: 30px;
height: 30px;
color: black;
display: inline-block;
background-color: white;
}
.gallery-container a {
color: black;
height: 200px;
width: 80%;
margin: 20px 100px 0;
text-decoration: none;
display: block;
position: relative;
background-color: rgb(227, 30, 36);
border: 1px solid black;
}
Y el html:
<div class="contenedor">
<div class="gallery-container">
<a href="#">Link</a>
<div id="pagination">
<a href="#">Pagina 1</a>
</div>
</div>
</div>
Se más específico en la "ruta" del estilo:
.gallery-container .pagination a { ... }
color: black !important