2

Realizo una web y para hacer el aviso de cookies busque en internet, y encontre un código que me funciona muy bien pero quiero entenderlo completamente. Este es el codigo completo, CSS, Html y Javascript

<script type="text/javascript">
function controlcookies() {
         // si variable no existe se crea (al clicar en Aceptar)
    localStorage.controlcookie = (localStorage.controlcookie || 0);

    localStorage.controlcookie++; // incrementamos cuenta de la cookie
    cookie1.style.display='none'; // Esconde la política de cookies
}
</script>


<style type="text/css">

/* CSS para la animación y localización de los DIV de cookies */


#cookiesms1:target {
    display: none;
}
.cookiesms{ 
    width:100%;
    height:43px;
    margin:0 auto;
    padding-left:1%;
        padding-top:5px;
        font-size: 1.2em;
    clear:both;
        font-weight: strong;
color: #333;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition: bottom 1s;

}

.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;

}

/* Fin del CSS para cookies */

</style>
<!--Código HTML de la política de cookies -->

<!--La URL incluida es la parte que se ha de modificar -->

<div class="cookiesms" id="cookie1">
Esta web utiliza cookies, puedes ver nuestra  <a href="tu-url-donde-explicas-la-politica-de-cookies">la política de cookies, aquí</a> 
Si continuas navegando estás aceptándola
<button onclick="controlcookies()">Aceptar</button>
<div  class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de cookies + </div>
</div>
<script type="text/javascript">
if (localStorage.controlcookie>0){ 
document.getElementById('cookie1').style.bottom = '-50px';
}
</script>

<!-- Fin del código de cookies --->

Disculpen si escribí mucho codigo, no se si esté permitido o no, pero para que se entienda todo, investigué en youtube para qué sirve la pseudo clase target y creí haber entendido pero a la hora de quitarlo de mi codigo el aviso de privacidad no aparece, y al volverle a agregar la clase sí aparece. Alguien podría decirme qué es lo que hace exactamente en esté codigo?

3 respuestas 3

5

La pseudo-clase target apunta a un elemento del DOM específico a través de su identificación en la URL por medio de un id, por ejemplo

https://demo.com.mx/about.php#element1

El cual dentro del documento HTML se represnta así

<a href="#element1">Elemento 1</a>


<p id="element1">Este es un párrafo</p>

Y dentro del CSS para poderle aplicar estilos lo harías de este modo

p#element1:target{ color: red; }

Entonces con este fragmento de código:

#cookiesms1:target {
    display: none;
}

Le estás indicando que apunte a un elemento con el id=cookiesms1 para ocultarlo cuando lo identifique como parte del cuerpo de la URL al final https://demo.app.com/index.php#cookkiesms1, cuando le quitas la seudo-clase entonces ya no esta apuntando a dicho elemento

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        p#element1:target{
          color: red;
        }
        p#element2:target{
          color: steelblue;
        }
      </style>
    </head>
    <body>
      <a href="#element1">Elemento 1</a>
      <a href="#element2">Elemento 2</a>
    <p id="element1">
      Elemento párrafo 1
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolorum reprehenderit asperiores, officia possimus sequi expedita, magni quidem distinctio officiis consequuntur nemo neque atque. Omnis, et iste nihil ab alias?
    </p>
    <p id="element2">
      Elemento párrafo 2
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aperiam quia blanditiis reprehenderit eos, porro quidem totam quod provident. Iusto modi autem voluptate, maxime, suscipit voluptas consequuntur aliquam voluptatum facilis!
    </p>
    </body>
    </html>

1

Estas utilizando display: none;, por lo tanto al quitarle el :target estas ocultando directamente el aviso de privacidad que tiene el id con el nombre cookiesms1.

El pseudo selector :target en CSS coincide cuando el hash en la URL y el id de un elemento son los mismos. Cualquier cosa que pueda hacer para cambiar una clase para cambiar el estado puede hacerlo cuando el elemento está en :target.

Por ejemplo: cambiar los colores, cambiar la posición, cambiar las imágenes, ocultar o mostrar cosas, lo que sea.

1

Sirve para lo que te respondió el usuario anonimo. también sirve para crear ventanas modal.

.modal{
width: 400px;
height: 400px;
background-color: #ddd;
display: none;
}
.modal:target{
display: flex;
align-items: center;
justify-content: center;
}
<div id='/modal/info/css' class='modal'>
<h1>Soy una ventana modal</h1>
</div>

<!-- BOTON QUE ABRE EL MODAL -->
<a href="#/modal/info/css">Abrir modal</a>

<!-- SI NO QUIERES TENER UN BOTON, PUEDES ABRIR EL MODAL DESDE EL BUSCADOR AÑADIENDO # Y EL LINK -->

<!-- https://www.mipagina.com/#/modal/info/css -->

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.