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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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