4

Tengo esta estructura en HTML:

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

2
  • Has probado colocar después del atributo la etiqueta !important. Por ejemplo: color: black !important
    – Jok
    Commented el 3 jul. 2018 a las 9:15
  • @Jok si, pero los atributos de margin, text-decoration, position y border me los coge del .gallery-container a
    – MadCode
    Commented el 3 jul. 2018 a las 9:17

3 respuestas 3

3

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>

3

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

Se más específico en la "ruta" del estilo:

.gallery-container .pagination a { ... }

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.